june 2017 - google searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate mobile...
TRANSCRIPT
June 2017
Cherry Prommawin Search Quality Analyst
Kratai LerdsurasakdaProduct Education Lead
Let’s Start with a Quiz
How many % of Thais are coming online via Mobile devices?
A) 70%
B) 80%
c) 90%
We have 98M phones in Thailand… How many Smartphone do we have?
A) 50M
B) 45M
c) 40M
How many hours Thai use Mobile phone daily?
A) 3 hours
B) 5 hours
c) 7 hours
Mobile Speed Optimization • Google Confidential and Proprietary | 6
More than half of all web trafficis now coming from smartphones and tablets.
Google analytics data, US, Q1 2016.
Mobile Speed Optimization • Google Confidential and Proprietary | 7
WHAT ARE WE TALKING ABOUT TODAY
Why is mSpeed performance so important?
How to measure mSpeed performance?
How to optimize for mSpeed performance?
of consumers will abandon a site if it takes longer than 3 seconds to load.
53%
Proprietary + Confidential
Compared to a page that loads in 1 second
Source: http://conversionxl.com/
-35%pageviews
-38%conversions
+105%bounce rate
5seconds
3seconds
-22%pageviews
-22%conversions
+50%bounce rate
Mobile Speed Optimization • Google Confidential and Proprietary | 10
1-2 seconds: Good3-6 seconds: Average, try to improve it.7-10 seconds: Poor. Get to work.10+ seconds: I’m very, very sorry.
– Jeremy Smith, Conversion Optimization Expert
“
Mobile Speed Optimization • Google Confidential and Proprietary | 11
Table of Contents
Why is mSpeed performance so important?
How to measure mSpeed performance?
How to optimize for mSpeed performance?
mSpeed Measurement
Mobile Speed Optimization • Google Confidential and Proprietary | 13
<5000 85 / 100
Tools to Measure Mobile PerformanceUse both tools in conjunction to test your own sites
Mobile Speed Optimization • Google Confidential and Proprietary | 14
Number of tests: 3
First View Only
Chrome (tab) : Emulate Mobile Browser
Connection: 3G
WebPageTest Settings (WebPageTest.Org/MobileTest)Optimize for what the user experiences “in the wild”
Mobile Speed Optimization • Google Confidential and Proprietary | 15
WebPageTest ResultsUse a combination of 4 metrics to define the performance of the website
Speed Index (SI):• Above-the-fold loading time• Target: Under 5,000 ms• Additional Information
3 metrics impacting the SI:• Time to fully load the page• # of requests• Weight of the page
Mobile Speed Optimization • Google Confidential and Proprietary | 16
What’s the best metric?
Load Time:
First Byte:
Start Render:
Fully Loaded:
Speed Index: 2309
10.041s
2.282s
0.805s
4.033s
Mobile Speed Optimization • Google Confidential and Proprietary | 17
The most meaningful metric
The Speed Index is the average time at which visible parts of the page are displayed.
Above the fold
Mobile Speed Optimization • Google Confidential and Proprietary | 18
The speed Index : speed perception
Speed Index : 1500
0.9s 1.6s
Speed Index : 750
Mobile Speed Optimization • Google Confidential and Proprietary | 19
Google PageSpeed InsightsReview optimization best practices to assess a page’s theoretical performance
Mobile Speed Optimization • Google Confidential and Proprietary | 20
Table of Contents
Why is mSpeed performance so important?
How to measure mSpeed performance?
How to optimize for mSpeed performance?- Decrease Page Weight- Make a Good First Impression- Reduce Number of Requests
Mobile Speed Optimization • Google Confidential and Proprietary | 21
Framework for Faster Mobile Sites
IT’S LIKE... moving into a new apartment. It’s a much faster process if:
1. The boxes are all light, and therefore easy to move.
2. You can unpack the most essential items first so the new place quickly feels like home.
3. You require fewer trips between the moving van and the apartment.
Page Weight = the number of bytes your page loads. Each asset on your page has weight.
Lighter pages load more quickly.
Customers want to see visible content that is “above-the-fold” as soon as possible. Load important content first and make site usable in 3 seconds.
Requests = Number of resources the browser needs to request from the server.
Fewer requests = faster load time.
Reduce Number of RequestsGoal: <80 requests
Give a Good First ImpressionGoal: < 3 seconds1
Decrease Page Weight Goal: <1 MB
Mobile Speed Optimization • Google Confidential and Proprietary | 22
Reduce Number of RequestsGoal: <80 requests
Give a Good First ImpressionGoal: < 3 seconds1
Decrease Page Weight Goal: <1 MB
mSpeed Optimization Best PracticesMaking as few requests for as few bytes as possible before the above the fold content loads
1 Based on WebPageTest Speed Index
1. Compress with GZIP2. Compress and select
efficient images3. Avoid load images that
users never see4. Avoid loading the same
file twice5. Minify resources
1. Prioritize download of visible content
2. Progressively load anticipated data
3. Enable HTTPS
1. Avoid landing page redirects2. Leverage browser caching3. Concatenate resources
(If on HTTP/1, concatenate resources)
4. Reduce server response time
5. Enable HTTP/2
Mobile Speed Optimization • Google Confidential and Proprietary | 23
Decrease Page Weight
Mobile Speed Optimization • Google Confidential and Proprietary | 24
How to Decrease Page Weight (Summary)
Recommendation Audit What it really means Difficulty Time Impact
Compress and select efficient images
Large images on the site cause load delays. Choose smaller images that are compressed to speed up load time.
Easy Quick Very High
Avoid loading images that users never see
A responsive site may load an image but determine not to display it if the user is on a mobile device. This wastes bandwidth and can always be avoided. Only load images in the right resolution for the target device/viewing capability!
Easy Quick High
Compress with GZIP There are many files of code that are required for a website. To reduce download time, use a tool called GZIP to compress these files into a smaller size.
Easy Quick High
Avoid loading the same file twice
Sometimes a site will load a file twice. It may load the same image in desktop and mobile versions, or it may load the same JS library twice. This is never necessary.
Easy Quick Small
Minify resources(HTML, CSS, JS)
Minification is the process of removing all unnecessary characters (space, newlines, comments that the browser does not read) from source code without changing its functionality.
Average Average Average
Images often account for a significant amount of bytes
63% of a page weighton average
Mobile Speed Optimization • Google Confidential and Proprietary | 26
Compress and Select Efficient Images
Dimensions 1200 x 800 File Size 296 KB
Difficulty Time Impact
Easy Quick High
White Chair
White Chair
Desktop Dimensions 1200 x 800
Mobile Dimensions 300 x 200
Mobile Speed Optimization • Google Confidential and Proprietary | 27
Compress and Select Efficient ImagesDifficulty Time Impact
Easy Quick High
1800 x 1200px
Img{ max-width:100%;}
Mobile Speed Optimization • Google Confidential and Proprietary | 28
Compress and Select Efficient ImagesDifficulty Time Impact
Easy Quick High
Mobile Speed Optimization • Google Confidential and Proprietary | 29
Compress and Select Efficient ImagesDifficulty Time Impact
Easy Quick High
Mobile Speed Optimization • Google Confidential and Proprietary | 30
Avoid Images that People Never SeeDifficulty Time Impact
Easy Quick High
File Size 500 KB
White Chair
White Chair
display: block; display: none;
Mobile Speed Optimization • Google Confidential and Proprietary | 31
Avoid Images that People Never SeeDifficulty Time Impact
Easy Quick High
style.css
network tab
Mobile Speed Optimization • Google Confidential and Proprietary | 32
Avoid Images that People Never SeeDifficulty Time Impact
Easy Quick High
Make a Good First Impression
Mobile Speed Optimization • Google Confidential and Proprietary | 34
How to Make a Good First Impression
Recommendation Audit What it really means Difficulty Time Impact
Prioritize download of visible content
Load and display text and images that the user will see first, before he or she scrolls. Therefore the user can read and interact with this content while lower-down elements load.
Average Average Average
Progressively load anticipated data
Anticipate what content the user may see and need next, and load it in. For example, when a user is trying to order food through a mobile site, they will probably want to see the menu and order buttons before any graphics and animations. Average Average Average
Enable HTTPSHTTPS means your site is encrypted and therefore will provide an extra level of security for your users. HTTPS is strongly encouraged for sites that require personal or credit card data from users and highly recommended for everyone else. Difficult Long High
Mobile Speed Optimization • Google Confidential and Proprietary | 35
Prioritize Download of Visible Contents
Pro Tips:- A hero image should load & render as
early as possible- <5 JS files (scripts)- <3 CSS files (stylesheets) before
above-the-fold visible images load.
Difficulty Time Impact
Average Average Average
10 3
Above the fold
Mobile Speed Optimization • Google Confidential and Proprietary | 36
Prioritize Download of Visible ContentsDifficulty Time Impact
Average Average Average
Prioritize Download of Visible Contents - JSDifficulty Time Impact
Average Average Average
Use defer and async
Defer : if loading order matters
Async : if the script is standalone
Prioritize Download of Visible Contents - CSSDifficulty Time Impact
Average Average Average
<style> Inlined critical CSS </style>
<script> Load every other CSS file in async </script>
Prioritize Download of Visible Contents - CSSDifficulty Time Impact
Average Average Average
Criti
cal C
SS
extraction (node.js) critical.css
https://github.com/addyosmani/critical
Difficulty Time Impact
Average Average Average
Non
-crit
ical
CSS
https://github.com/filamentgroup/loadCSS
Difficulty Time Impact
Average Average AveragePrioritize Download of Visible Contents
Mobile Speed Optimization • Google Confidential and Proprietary | 42
Reduce Number of Requests
Mobile Speed Optimization • Google Confidential and Proprietary | 43
How to Reduce Number of RequestRecommendation Audit What it really means Difficulty Time Impact
Avoid landing page redirects
A redirect occurs when users aren’t taken directly to the landing page from the initial click. The most common reason for a redirect is a user trying to access a website from a mobile device. They might put itsite.com into their browser, but they're taken to m.site.com Easy Quick High
Leverage browser caching
Caching is what we refer to as storing pieces of a visited website in the browser’s memory. Pieces of a website can be “cached” so that a user can easily access it without having to wait for the full load time.
Easy Quick High
If on HTTP/1, concatenate resources
The website has to call multiple files on the server to load its content. Concatenate the JS and CSS files together to reduce the number of times the website has to communicate with the server.
Easy Quick High
Reduce server response time
A server hosts all of the website’s information. The faster the server can respond to a user request on a website, the faster the site will load.
Difficult Long High
Enable HTTP/2HTTP/2 is a redesigned site code that reduces the developers complexity and improves load speed. Enabling HTTP/2 might require reworking the majority of a site’s code.
Difficult Long High
Mobile Speed Optimization • Google Confidential and Proprietary | 44
Avoid Landing-Page Redirects
example.com has added responsive pages to their site, no redirects are needed - fast(er) and optimal!
example.com Win
0s 3s
example.com m.example.com m.example.com/yo
0s 3s
DNS Lookup +Connection +Data
DNS Lookup +Connection +Data
Connection +Data
example.com → m.example.com → m.example.com/yo
Difficulty Time Impact
Easy Quick High
Mobile Speed Optimization • Google Confidential and Proprietary | 45
Leverage Browser CachingDifficulty Time Impact
Easy Quick High
http://www.google.com
Mobile Speed Optimization • Google Confidential and Proprietary | 46
Leverage Browser CachingDifficulty Time Impact
Easy Quick High
http://www.google.com
Mobile Speed Optimization • Google Confidential and Proprietary | 47
Leverage Browser CachingDifficulty Time Impact
Easy Quick High
http://www.google.com
Mobile Speed Optimization • Google Confidential and Proprietary | 48
Leverage Browser CachingDifficulty Time Impact
Easy Quick High
http://www.google.com
Cache
• Style sheets• JS files• Web fonts• Static resources (logos, images)
Don’t Cache
• Dynamic info• User info• Rapidly changing data (temperature)
49
50
Introducing theAMP ProjectAn open source initiative to enablea better web, with sites that are fast,beautiful, and monetize well
AMP pages support design customization and flexibility
51
Thank you!