Vietnam Mobile Day 2017: giới thiệu về trải nghiệm người dùng trên mobile (Smartphone), hướng dẫn tối ưu website trên mobile, giới thiệu về công nghệ AMP (cải thiện tải trang) & PWA (Áp dụng các tính năng của mobile apps cho website)
7. Confidential + Proprietary
On mobile, entertaining apps dominate time,
but sites capture the bulk of transactions
Sources: Time spent stats:http://yahoodevelopers.tumblr.com/post/127636051988/seven-years-into-the-mobile-revolution-content-is;
Commercial task stats: Google/Ipsos Multiscreen Industry Study of 29k smartphone users across 9 industries (to be published).
66%
SITES
6%
APPS
28%
SITES &
APPS
PRIMARY CHANNEL FOR
COMMERCIAL TASKS
INDUSTRY SNAPSHOT
75% OF AUTOS USERS
60% OF FINANCE USERS
70% OF TRAVEL USERS
71% OF RETAIL & TECH USERS
64% OF LOCAL SERVICES USERS
... USE SITES MORE OFTEN FOR
COMMERCIAL TASKS
90%
10%
TIME
SPENT
ON SITES
TIME
SPENT
ON APPS
10%
35%
GAMING
& ENT.
34%
OTHER
31%
SOCIAL
USER TIME SPENT
ON MOBILE DEVICES
8. NOT FUNCTIONAL
Find it hard to
compare prices
and options
Can’t see level of
details or info
Small screen
makes it hard
to type
SLOW
Take too long
to load
11. “Don’t make me think” rule
Each source of frustration during the navigation lower this resource
A visitor comes to your site with a Goodwill resource
When the resource is depleted, the customer leaves the site
12. Homepage & Site Navigation
Site Search
Commerce & Conversions
Form Entry
Usability & Form Factor
The common thread in all sections
is that mobile users tend to be
very goal-oriented - they expect
to be able to get what they need
from a mobile site easily,
immediately, and on their own
terms.
25 Design Principles
13. Proprietary + Confidential
of consumers will
abandon a site if it takes
longer than 3 seconds to load.53%
DoubleClick study using Google Analytics data; n=3.7K mSites, 2016.
14. Proprietary + Confidential
How fast do Websites in Vietnam load?
Google Research, Webpagetest.org, Global, sample of more than 900,000 mWeb sites across Fortune 1000 and Small Medium Businesses. Testing was performed using Chrome and
emulating a Nexus 5 device on a globally representative 3G connection. 1.6Mbps download speed, 300ms Round-Trip Time (RTT). Tested on EC2 on m3.medium instances, similar in
performance to high-end smartphones, Feb 2017.
Speed: avg speed index by vertical
Recommend speed index
16. Proprietary + Confidential
2.2s
Source: “A Beginner’s Guide to Website Speed Optimization”
The Numbers Don’t Lie!
When Mozilla increased page speed by
2.2 seconds, Firefox download figures
rose by 15.4 percent, or 10 million per
year!
Walmart saw 2 percent increase in
conversion rates for every 1 second
improvement in page load times.
25. Proprietary + Confidential
Mobile friendly website
Based on 25 msite design
principles
Fast loading mobile site
Based on WPT/Lighthouse on 3G
Speed Index of 5000ms
Today’s goals
1 2
35. What it really looks like
Research
(google.com, marketing
channels)
Tiki.vn Purchase
60%
40%
30%
36. Users acquired from Mobile App are most likely to make 2nd order, making it the
most valuable platform for re-engage return customers
37. Users acquired from Mobile Web are most likely to make a purchase, but on other
platforms. They tend to research on Mobile Web, but then come to other platforms
to Add to Cart again & make purchase.
38. What we need to do ?
● Page loading time as a very important feature
● UX: ensure smooth cross device experience for users
● Acquire new Mobile users aggressively
45. How we achieved it
● Using HTTP/2 & HTML Import
● Using web-component + shadow dom
● Pre-cache using Service Worker
● Lazy-load other resources only on demand
● Activating Push Notifications in the web app
52. Giới thiệu
▪ VnExpress ra mắt vào ngày 26/02/2001
▪ Là tờ báo điện tử đầu tiên, và là báo
tiếng Việt có nhiều người đọc nhất hiện
nay.
▪ Hơn 40 triệu lượt xem / ngày
▪ Hơn 8 triệu độc giả thường xuyên /
ngày
▪ Đạt 15.8 tỷ lượt xem trong năm 2016
53. Lộ trình phát triển
2001 2007 2013 2017
PC PC PC + Mobile Multi screen
54. 2012 - Thời điểm bắt đầu
▪ Bắt đầu chuyển đổi nền tảng
công nghệ từ .NET sang Open
Source
▪ Tồn tại 2 phiên bản website
desktop và mobile riêng lẽ
▪ Mobile chỉ là một phiên bản
lượt rút gọn của desktop
55. 2013 - Bước chuyển mình
▪ Dịch chuyển các dịch vụ sang
giao diện tùy ứng (Web
Responsive)
▪ Đầu 2013, tỷ lệ người dùng
mobile của VnExpress ~25%,
trong đó khoảng 6.5% là tablet
▪ Bounce rate 70%, time on site
trung bình 2 phút, số trang đọc
trung bình 3 / session.
56. 2014 - 2017 Không ngừng tối ưu hoá
▪ Phân tách tất cả tài nguyên tĩnh (css, js, images)
của mobile riêng
▪ Dung lượng hình ảnh được nén ở mức tối thiểu
▪ Giảm số lượng các box không cần thiết, lượt text,
hình ảnh, hiệu ứng không cần thiết
▪ Tuân thủ các qui tắc tối ưu theo đề nghị từ
PageSpeed của Google: Above the fold, xử lý các
render blocking resource, cấu trúc trang html...