Proprietary + Confidential

Mobile Site Speed

Consultation Guide
Customized for: www.railrestro.com
Date Prepared: 29th January 2018

1
 Proprietary + Confidential

Mobile Speed is Important Because Your Customers Care

“
As users migrate to mobile,
page load time is perhaps
the most important metric
we have. If you can’t
load pages fast enough,
% We should aim to make
53 your site usable in2
you can’t compete.
Consumer expectations
in a mobile-led world
of visitors will abandon
3 seconds are extreme.
a site that takes >3s to load1
”
Howard Mittman,
Condé Nast

1. Statistic from Think With Google Research Study: “The Need for Mobile Speed: How Mobile Latency Impacts Publisher Revenue”
2. Usable on Mobile 3G (1.6Mbps/768 Kbps 300ms RTT) in 3 seconds.

2
 Proprietary + Confidential

They won’t engage and convert if your site load time is slow

Engagement Conversion Revenue Impact

1 second delay in load time 1 second delay in load time 1 second delay in load time
can result in ~8% increase in can result in ~7% decrease in can result in ~2.1% decrease in
bounce rate conversions cart size
Source: Web Performance Today [link] Source: Kinsta.com Source: “The Need for Speed”, Searchengineland.com

3
 Proprietary + Confidential

A Faster Mobile Site Means More Potential Revenue

Here is a case study* comparing load time and revenue for an advertiser. When page load time decreased, revenue went up -
and vice versa. What implications does page load time have on your business’ revenue?

2013: as load time revenue 2014: as load time revenue

$460,000.00 30 $500,000.00 12

$450,000.00 $450,000.00
25 10
$440,000.00 $400,000.00

$430,000.00
20
Faster load $350,000.00
8
$420,000.00

$410,000.00 15
time = more $300,000.00

$250,000.00 6

$400,000.00 revenue!** $200,000.00

10 4
$390,000.00 $150,000.00

$380,000.00 $100,000.00
5 2
$370,000.00 $50,000.00

$360,000.00 0 $ 0
June July August June July August

2013 Revenue 2013 Avg Page Load Time 2014 Revenue 2014 Avg Page Load Time

*Source: "Site Speed & PPC Performance: Why You Can’t Ignore A Slow Site Anymore"
**Revenue uplift is not guaranteed. The purpose of sharing this case study is to show the potential impact that mobile speed load times has on revenue.

4

Use these two tools to assess your mobile site speed performance
PageSpeed Insights
Screenshot of PSI results
Page Speed Insights indicates whether your site page’s code
reflects standard best practices. It fetches the url with
a mobile user-agent and identifies issues such as large
images, render-blocking JS, and lack of browser caching.
The PageSpeed Score ranges from 0 to 100 points.
A higher score is better and a score of 85 or above indicates
that the page adheres well to best practices.
Proprietary + Confidential
WebPage Test
Screenshot of Webpage Test result
WebPageTest helps you deepdive into issues affecting load
time. You can simulate many device types, see a waterfall
of when resources load, and create slow-motion filmstrips
of your site loading.
One metric to monitor from WebPageTest is the Speed
Index. It is the average time in milliseconds at which visible
parts of the page are displayed and is good for comparing
pages against each other (either competitor pages
or before/after).
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
5
Framework for Faster Mobile Sites
Give a Good First Impression
Goal: <3 seconds
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.
IT’S LIKE... moving into a new apartment.
It’s a much faster process if:
1. You can unpack the most essential items first
so the new place quickly feels like home.
2. You require fewer trips between the moving
van and the apartment.

Reduce Number of Requests 3. The boxes are all light and therefore
Goal: <80 requests easy to move.
Requests = Number of resources the browser
needs to request from the server.
Fewer requests = faster load time.

Lower Page Weight

Goal: <1MB
Page Weight = the number of bytes your page
loads. Each asset on your page has weight.
Lighter pages load more quickly.

ConfidentialConfidential 6
+ Proprietary+ Proprietary
 Proprietary + Confidential

Your Mobile Site Does Not Meet Recommendations

First Impression Number of Requests Page Weight

Eliminate render-blocking CSS Enabling browser caching

in above-the-fold content

Note: Specific recommendations are suggestions for achieving “First Impressions,” “Number of Requests,” and “Page Weight” goals.
If your site is achieving the overall goal, the recommendations may further improve site speed. 7
 Proprietary + Confidential

Action on the Most Important Recommendations for your Site

Now – Essential Next – Important Later – Valuable

*
On Call Implementation Consultation Consultation
Very High Impact Recommendations High Impact Recommendations High Impact Recommendations
that are Easy to Fix that are Easy to Fix that Take a Little More Time to Fix

● Enabling browser caching ● Eliminate render-blocking

CSS in above-the-fold
content

*We help you make these changes on call if you have

administrative access to your site (e.g FTP or admin
panel credentials)

8
 Proprietary + Confidential

Eliminate Render-Blocking Problem

CSS in Above-the-Fold In the case of an external CSS script the parser is also forced
to wait for the resource to download, which may incur one or
Content more network roundtrips and delay the time to first render of
the page. We need to avoid and minimize the use of blocking
CSS script, particularly external CSS scripts that must be
fetched before they can be executed.
Background
High Level Overview of the Solution
The browser builds the DOM tree before rendering a page by
parsing the HTML markup. Whenever the parser encounters a 1. Identify all the CSS files which causes render
CSS script it has to stop and execute it before it can continue blocking using PageSpeed Insights tool.
parsing the HTML. 2. Properly call your css files
a. Do not use @import to call css files
b. Properly label conditional css
3. Lessen the amount of css files in the critical path
a. Combine CSS
b. Inline CSS
4. Use less css overall

Step-by-step Guide

Please refer to the PDF attached for step-by-step instructions!

9
 Proprietary + Confidential

Enabling Browser Caching Problem

for Apache 44 of your resource files do not fully leverage caching.
Caching these resources will reduce requests on every page
load after the first.
Background
High Level Overview of the Solution
Caching allows your browser to store frequently requested files
on the user’s device for a set period of time.
1. Log in to your CPanel/FTP and find
When caching is enabled, if your user visits a page twice, the the .htaccess file.
second load is much faster. As pages on your site will share many 2. Right click on the .htaccess file and select Code Edit.
resources, other pages on the site should also load more quickly. 3. Insert code, save changes, and perform smoke
testing to validate the changes.
Your server tells the browser how long a given resource can be
cached using HTTP HTTP response headers.

We recommend that you set the cache time as long as possible, Step-by-step Guide
pushing out updates using cache-busting query strings.
Please refer to the PDF attached for step-by-step instructions!

10
 Proprietary + Confidential

Appendix

Proprietary + Confidential
11
 Proprietary + Confidential

Additional Online Resources

Chrome DevTools Chrome: Optimizing W3C Mobile Checker
Performance

PageSpeed Insights CSS-Tricks YSlow

WebPagetest Smashing Magazine Pingdom

ImageOptim http archive SFGate.com Sample

(Performance Stats) Audit w/Paul Irish

The Performance SSL Server Test Paul Lewis mWeb

Beacon (Blog) Performance Auditing

12
Thank you!

Mobile
Speed
Optimisation
Session

13