Cherry Prommawin Search Quality Analyst
June 2017
Kratai Lerdsurasakda Product 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
More than half of all web traffic is now coming from smartphones and tablets. Google analytics data, US, Q1 2016.
Mobile Speed Optimization • Google Confidential and Proprietary
| 6
WHAT ARE WE TALKING ABOUT TODAY Why is mSpeed performance so important? How to measure mSpeed performance? How to optimize for mSpeed performance?
Mobile Speed Optimization • Google Confidential and Proprietary
| 7
53% of consumers will abandon a site if it takes longer than 3 seconds to load.
Compared to a page that loads in 1 second
3
seconds
-22% pageviews
-22% conversions
5
seconds
-35% pageviews
-38% conversions
+50%
+105%
bounce rate
bounce rate
Source: http://conversionxl.com/
Proprietary + Confidential
“
1-2 seconds: Good 3-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
| 10
Table of Contents Why is mSpeed performance so important? How to measure mSpeed performance? How to optimize for mSpeed performance?
Mobile Speed Optimization • Google Confidential and Proprietary
| 11
mSpeed Measurement
Tools to Measure Mobile Performance Use both tools in conjunction to test your own sites
<5000
85 / 100
Mobile Speed Optimization • Google Confidential and Proprietary
| 13
WebPageTest Settings (WebPageTest.Org/MobileTest) Optimize for what the user experiences “in the wild”
Connection: 3G Number of tests: 3 First View Only Chrome (tab) : Emulate Mobile Browser
Mobile Speed Optimization • Google Confidential and Proprietary
| 14
WebPageTest Results Use 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
| 15
What’s the best metric?
Load Time:
4.033s
First Byte:
0.805s
Start Render:
2.282s
Fully Loaded:
10.041s
Speed Index:
2309
Mobile Speed Optimization • Google Confidential and Proprietary
| 16
The most meaningful metric
Above the fold
The Speed Index is the average time at which visible parts of the page are displayed.
Mobile Speed Optimization • Google Confidential and Proprietary
| 17
The speed Index : speed perception 0.9s
1.6s
Speed Index : 750
Speed Index : 1500
Mobile Speed Optimization • Google Confidential and Proprietary
| 18
Google PageSpeed Insights Review optimization best practices to assess a page’s theoretical performance
Mobile Speed Optimization • Google Confidential and Proprietary
| 19
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
| 20
Framework for Faster Mobile Sites
Decrease Page Weight
Give a Good First Impression
Goal: <1 MB
Goal: < 3 seconds
Page Weight = the number of bytes your page loads. Each asset on your page has weight.
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.
Lighter pages load more quickly.
Reduce Number of Requests
1
Goal: <80 requests Requests = Number of resources the browser needs to request from the server. Fewer requests = faster load time.
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.
Mobile Speed Optimization • Google Confidential and Proprietary
| 21
mSpeed Optimization Best Practices Making as few requests for as few bytes as possible before the above the fold content loads
Decrease Page Weight
Give a Good First Impression
Goal: <1 MB 1.
Compress with GZIP
2.
Compress and select efficient images
3.
Avoid load images that users never see
4.
Avoid loading the same file twice
5.
Minify resources
Goal: < 3 seconds 1. 2. 3.
Reduce Number of Requests
1
Goal: <80 requests
Prioritize download of visible content
1.
Avoid landing page redirects
2.
Leverage browser caching
Progressively load anticipated data
3.
Concatenate resources
Enable HTTPS
(If on HTTP/1, concatenate resources)
4.
Reduce server response time
5.
Enable HTTP/2
1 Based on WebPageTest Speed Index
Mobile Speed Optimization • Google Confidential and Proprietary
| 22
Decrease Page Weight Mobile Speed Optimization • Google Confidential and Proprietary
| 23
How to Decrease Page Weight (Summary) Recommendation Audit Compress and select efficient images
Avoid loading images that users never see
Compress with GZIP
Avoid loading the same file twice
Minify resources (HTML, CSS, JS)
What it really means
Difficulty
Time
Impact
Easy
Quick
Very High
Easy
Quick
High
Easy
Quick
High
Easy
Quick
Small
Average
Average
Average
Large images on the site cause load delays. Choose smaller images that are compressed to speed up load time.
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!
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.
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.
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.
Mobile Speed Optimization • Google Confidential and Proprietary
| 24
Images often account for a significant amount of bytes
63%
of a page weight on average
Compress and Select Efficient Images
Difficulty
Time
Impact
Easy
Quick
High
White Chair
White Chair
Dimensions File Size
1200 x 800 296 KB
Desktop Dimensions 1200 x 800
Mobile Dimensions 300 x 200
Mobile Speed Optimization • Google Confidential and Proprietary
| 26
Compress and Select Efficient Images
Difficulty
Time
Impact
Easy
Quick
High
Img{ max-width:100%; } 1800 x 1200px
Mobile Speed Optimization • Google Confidential and Proprietary
| 27
Compress and Select Efficient Images
Difficulty
Time
Impact
Easy
Quick
High
Mobile Speed Optimization • Google Confidential and Proprietary
| 28
Compress and Select Efficient Images
Difficulty
Time
Impact
Easy
Quick
High
Mobile Speed Optimization • Google Confidential and Proprietary
| 29
Avoid Images that People Never See
Difficulty
Time
Impact
Easy
Quick
High
White Chair
White Chair
File Size
500 KB
display: block;
display: none;
Mobile Speed Optimization • Google Confidential and Proprietary
| 30
Avoid Images that People Never See
Difficulty
Time
Impact
Easy
Quick
High
style.css
network tab
Mobile Speed Optimization • Google Confidential and Proprietary
| 31
Avoid Images that People Never See
Difficulty
Time
Impact
Easy
Quick
High
Mobile Speed Optimization • Google Confidential and Proprietary
| 32
Make a Good First Impression
How to Make a Good First Impression Recommendation Audit Prioritize download of visible content
Progressively load anticipated data
Enable HTTPS
What it really means
Difficulty
Time
Impact
Average
Average
Average
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
HTTPS 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
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.
Mobile Speed Optimization • Google Confidential and Proprietary
| 34
Prioritize Download of Visible Contents
Difficulty
Time
Impact
Average
Average
Average
Pro Tips:
Above the fold
-
10
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.
3
Mobile Speed Optimization • Google Confidential and Proprietary
| 35
Prioritize Download of Visible Contents
Difficulty
Time
Impact
Average
Average
Average
Mobile Speed Optimization • Google Confidential and Proprietary
| 36
Prioritize Download of Visible Contents - JS
Use defer and async Defer : if loading order matters Async : if the script is standalone
Difficulty
Time
Impact
Average
Average
Average
Prioritize Download of Visible Contents - CSS
Time
Impact
Average
Average
Average
Critical CSS
Prioritize Download of Visible Contents - CSS
Difficulty
extraction (node.js) https://github.com/addyosmani/critical
critical.css
Time
Impact
Average
Average
Average
Non-critical CSS
Difficulty
https://github.com/filamentgroup/loadCSS
Prioritize Download of Visible Contents
Difficulty
Time
Impact
Average
Average
Average
Reduce Number of Requests Mobile Speed Optimization • Google Confidential and Proprietary
| 42
How to Reduce Number of Request Recommendation Audit Avoid landing page redirects
Leverage browser caching
If on HTTP/1, concatenate resources
Reduce server response time
Enable HTTP/2
What it really means 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
Difficulty
Time
Impact
Easy
Quick
High
Easy
Quick
High
Easy
Quick
High
Difficult
Long
High
Difficult
Long
High
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.
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.
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.
HTTP/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.
Mobile Speed Optimization • Google Confidential and Proprietary
| 43
Difficulty
Time
Impact
Easy
Quick
High
Avoid Landing-Page Redirects example.com → m.example.com → m.example.com/yo DNS Lookup + Connection + Data
example.com
DNS Lookup + Connection + Data
Connection + Data
m.example.com
m.example.com/yo
0s
3s
example.com has added responsive pages to their site, no redirects are needed - fast(er) and optimal!
example.com
0s
Win
3s
Mobile Speed Optimization • Google Confidential and Proprietary
| 44
Leverage Browser Caching
Difficulty
Time
Impact
Easy
Quick
High
http://www.google.com
Mobile Speed Optimization • Google Confidential and Proprietary
| 45
Leverage Browser Caching
Difficulty
Time
Impact
Easy
Quick
High
http://www.google.com
Mobile Speed Optimization • Google Confidential and Proprietary
| 46
Leverage Browser Caching
Difficulty
Time
Impact
Easy
Quick
High
http://www.google.com
Mobile Speed Optimization • Google Confidential and Proprietary
| 47
Leverage Browser Caching
Difficulty
Time
Impact
Easy
Quick
High
http://www.google.com
Cache
Don’t Cache
• Style sheets • JS files • Web fonts • Static resources (logos, images)
• Dynamic info • User info • Rapidly changing data (temperature) Mobile Speed Optimization • Google Confidential and Proprietary
| 48
49
Introducing the AMP Project An open source initiative to enable a better web, with sites that are fast, beautiful, and monetize well
50
AMP pages support design customization and flexibility
51
Thank you!
