june 2017 - google searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate mobile...

52
June 2017 Cherry Prommawin Search Quality Analyst Kratai Lerdsurasakda Product Education Lead

Upload: others

Post on 05-Jun-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

June 2017

Cherry Prommawin Search Quality Analyst

Kratai LerdsurasakdaProduct Education Lead

Page 2: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Let’s Start with a Quiz

Page 3: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

How many % of Thais are coming online via Mobile devices?

A) 70%

B) 80%

c) 90%

Page 4: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

We have 98M phones in Thailand… How many Smartphone do we have?

A) 50M

B) 45M

c) 40M

Page 5: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

How many hours Thai use Mobile phone daily?

A) 3 hours

B) 5 hours

c) 7 hours

Page 6: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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.

Page 7: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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?

Page 8: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

of consumers will abandon a site if it takes longer than 3 seconds to load.

53%

Page 9: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 10: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 11: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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?

Page 12: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

mSpeed Measurement

Page 13: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 14: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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”

Page 15: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 16: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 17: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 18: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 18

The speed Index : speed perception

Speed Index : 1500

0.9s 1.6s

Speed Index : 750

Page 19: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 19

Google PageSpeed InsightsReview optimization best practices to assess a page’s theoretical performance

Page 20: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 21: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 22: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 23: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 23

Decrease Page Weight

Page 24: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 25: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Images often account for a significant amount of bytes

63% of a page weighton average

Page 26: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 27: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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%;}

Page 28: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 28

Compress and Select Efficient ImagesDifficulty Time Impact

Easy Quick High

Page 29: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 29

Compress and Select Efficient ImagesDifficulty Time Impact

Easy Quick High

Page 30: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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;

Page 31: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 31

Avoid Images that People Never SeeDifficulty Time Impact

Easy Quick High

style.css

network tab

Page 32: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 32

Avoid Images that People Never SeeDifficulty Time Impact

Easy Quick High

Page 33: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Make a Good First Impression

Page 34: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 35: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 36: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 36

Prioritize Download of Visible ContentsDifficulty Time Impact

Average Average Average

Page 37: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 38: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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>

Page 39: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 40: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Difficulty Time Impact

Average Average Average

Non

-crit

ical

CSS

https://github.com/filamentgroup/loadCSS

Page 41: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Difficulty Time Impact

Average Average AveragePrioritize Download of Visible Contents

Page 42: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 42

Reduce Number of Requests

Page 43: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 44: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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

Page 45: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 45

Leverage Browser CachingDifficulty Time Impact

Easy Quick High

http://www.google.com

Page 46: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 46

Leverage Browser CachingDifficulty Time Impact

Easy Quick High

http://www.google.com

Page 47: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Mobile Speed Optimization • Google Confidential and Proprietary | 47

Leverage Browser CachingDifficulty Time Impact

Easy Quick High

http://www.google.com

Page 48: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

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)

Page 49: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

49

Page 50: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

50

Introducing theAMP ProjectAn open source initiative to enablea better web, with sites that are fast,beautiful, and monetize well

Page 51: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

AMP pages support design customization and flexibility

51

Page 52: June 2017 - Google Searchservices.google.com/fh/files/misc/mobilesitesth6june.pdfbounce rate Mobile Speed Optimization • Google Confidential and Proprietary | 10 1-2 seconds: Good

Thank you!