What Makes Mobile Websites Tick?How Do We Make Them Faster?

Insights from WebPagetest and HTTPArchive

@dougsillars, AT&T@andydavies, NCC Group

© 2015 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Why Mobile Web?

85% of survey respondents said mobile devices are a central part of everyday life.

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

http://blogs.salesforce.com/company/2014/02/mobile-behavior-report.html

Why Mobile Web?

• >50% of US e-commerce web traffic is mobile• Google: >50% of searches come from

smartphones

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

http://marketingland.com/mobile-drives-nearly-half-e-commerce-traffic-pc-still-rules-sales-report-118629http://searchengineland.com/its-official-google-says-more-searches-now-on-mobile-than-on-desktop-220369

Why Mobile Web?

In the 2014 Holiday Season:• 60% of Amazon and Target customers

shopped with a mobile device. • On Cyber Monday, Amazon sold 18

toys/second via mobile.

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=2002024

But, all is not Rosy:

• Study: 60% of consumers Most Frustrated by “web pages loading slowly or not at all”

• Facebook: “Articles shared by users average 8 seconds to load – by far the slowest single content type on Facebook.”

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

http://www.marketwired.com/press-release/survey-mobile-broadband-performance-expectations-higher-than-ever-even-as-more-operators-2052324.htmhttp://media.fb.com/2015/05/12/instantarticles/

DATA:– Add 160KB to a page:

Bounce rate +12% on mobile

SPEED:– 40% exit a site if > 3s load time– 64% expect a site to load in < 4s

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Why Mobile Performance?

4% of mobile users admit to throwing their phones out of frustration from slow sites!

http://laraswanson.com/mobileweb/http://www.flickr.com/photos/9009139@N08/1263954439http://www.mobilejoomla.com/mobile-joomla-blog/172-responsive-design-vs-server-side-solutions-infographic.html

Website Performance – webpagetest.org

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

SpeedIndex Measure of Visual Performance

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Speed Index (Top) = 1200 Speed Index (Bottom) = 9000

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property. http://mobile.httparchive.org

How Mobile Data is Collected

• Scans ~5,000 mobile URLs twice a month• Mobitest agent running on iPhone 4 running

iOS 5.1.1 located in Dulles, USA• Network profile (simulated 3G network)

– 1.6Mbps download, 768Kbps upload, 300ms RTT

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Challenge of HTTP Archive Data

• Sites outside US incur extra latency– affects timings (requests & page size less affected)

• iOS test agent is old and misses some metrics e.g. TTFB

• Data is noisy

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Improve the Testing

• Run top 1,000 sites on Motorola G (KitKat) in Dulles, VA.

• Andy Davies’ Google Docs Sheet– Requires WPT private instance (or key to public

instance)– Run took ~ 2 days

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

http://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/

Test Setup

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Read data into HTTPArchive format SQL database

Run HTTPArchive to collect all of the data into the database (overnight script)

Begin querying the data

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Souders’ Laws of Fast WebsitesRule 1 - Make Fewer HTTP RequestsRule 2 - Use a Content Delivery NetworkRule 3 - Add an Expires HeaderRule 4 - Gzip ComponentsRule 5 - Put Stylesheets at the TopRule 6 - Put Scripts at the BottomRule 7 - Avoid CSS ExpressionsRule 8 - Make JavaScript and CSS ExternalRule 9 - Reduce DNS LookupsRule 10 - Minify JavaScriptRule 11 - Avoid RedirectsRule 12 - Remove Duplicate ScriptsRule 13 - Configure ETagsRule 14 - Make AJAX Cacheable

How Many Requests Do Mobile Pages Make?

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Number of Requests

Freq

uenc

y

70% < 100 Requests

6% > 200 requests

How Many Requests Do Mobile Pages Make?

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Number of Requests

Freq

uenc

y

U.S. “News” Site

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

NOT OPTIMISED FOR MOBILE!

September 11, 2015

1.6MB download

336 requests (down from 707)

96 (down from 202 domains!)

First Byte .3s

Start Render 15s

SpeedIndex 18000

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Speed Index vs.Request Count• Reducing request count does not

guarantee fast performance• Low Request Count – High

SpeedIndex?• Sites from China and Russia• Tested in Washington DC• Major US Software Company

• JS load takes 20s

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Speed Index vs.Request Count• Sites with many requests can have

a low SpeedIndex

• Independent.co.uk• Xda-developers.com

>400 requests, yet SpeedIndex <10000

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Souders’ Laws of Fast WebsitesRule 1 - Make Fewer HTTP RequestsRule 2 - Use a Content Delivery NetworkRule 3 - Add an Expires HeaderRule 4 - Gzip ComponentsRule 5 - Put Stylesheets at the TopRule 6 - Put Scripts at the BottomRule 7 - Avoid CSS ExpressionsRule 8 - Make JavaScript and CSS ExternalRule 9 - Reduce DNS LookupsRule 10 - Minify JavaScriptRule 11 - Avoid RedirectsRule 12 - Remove Duplicate ScriptsRule 13 - Configure ETagsRule 14 - Make AJAX Cacheable

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

U.S. “News” Site

http://www.webpagetest.org/domains.php?test=150911_8M_AJJ&run=3&cached=0

Requests made to 96-202 Domains

16 domains > 10 requests each

25% of domains have 2 requests42% of domains have just 1 request

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

How Big are Mobile Pages?

46% under 500 KB91% under 2MB

87 mobile sites over 3MB

Speed Index vs Page Size

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Outside US

Seriously?

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Enormous Mobile Sites Cost $$http://whatdoesmysitecost.com/test/150911_T3_GG0#pppCost

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Enormous Mobile Sites Cost $$

Speed Index vs Page Size

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

• 425 KB• 29 Requests• SpeedIndex

>16000

Redirects are a Mobile Killer

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

• 425 KB• 29 Requests• SpeedIndex

>16000

7.5 seconds before page load lost to redirects

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Souders’ Laws of Fast WebsitesRule 1 - Make Fewer HTTP RequestsRule 2 - Use a Content Delivery NetworkRule 3 - Add an Expires HeaderRule 4 - Gzip ComponentsRule 5 - Put Stylesheets at the TopRule 6 - Put Scripts at the BottomRule 7 - Avoid CSS ExpressionsRule 8 - Make JavaScript and CSS ExternalRule 9 - Reduce DNS LookupsRule 10 - Minify JavaScriptRule 11 - Avoid RedirectsRule 12 - Remove Duplicate ScriptsRule 13 - Configure ETagsRule 14 - Make AJAX Cacheable

If you Must redirect – CACHE your redirects:

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Low Byte Count

• Long TTFB

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Low Request and Byte Count

• Multiple scripts• Head of line

blocking

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

So What Makes a Site Very Fast?

21% SpeedIndex < 5,00066% SpeedIndex <10,00085% SpeedIndex <15,000

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Sites with SpeedIndex < 2000

• <5 Requests to load page

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Souders’ Laws of Fast WebsitesRule 1 - Make Fewer HTTP RequestsRule 2 - Use a Content Delivery NetworkRule 3 - Add an Expires HeaderRule 4 - Gzip ComponentsRule 5 - Put Stylesheets at the TopRule 6 - Put Scripts at the BottomRule 7 - Avoid CSS ExpressionsRule 8 - Make JavaScript and CSS ExternalRule 9 - Reduce DNS LookupsRule 10 - Minify JavaScriptRule 11 - Avoid RedirectsRule 12 - Remove Duplicate ScriptsRule 13 - Configure ETagsRule 14 - Make AJAX Cacheable

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Load Important Stuff First8 requests required to load page

97 requests for ads/analytics/trackers

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Some worrying trends…

Pages Are Still Getting Bigger

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

9/1/2012: 644kb9/1/2013: 815kb9/1/2014: 1020kb9/1/2015: 1203kb

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Our Base Page Isn’t Changing Much

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

JavaScript Has Grown 25% in 12 Months

New Graph, same increase

2013-2014

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

CSS has Grown By 20%

Was 33% last year

2013-2014

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Images are Bulk of Download

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Lots of focus on HTML, CSS, JS and images but…

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Fonts – 200% Growth in 12 Months

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Most Pages Don’t Use Fonts

56% do not use custom fonts

But 9 sites use > 500 KB

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Mobile Design: RWD vs. Mobile Redirect

• Responsive Web Design (RWD) One site for all screens– Media Queries change layout based on screen size

• Mobile Specific: Server redirects to Specific Mobile Site

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

RWD

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Mobile Specific Sites

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Mobile Specific Vs. RWD

Mobile Specific RWD DeltaCount 218 98Total Requests 42 52 19% higherTotal KB 474 893 47% higherSpeedIndex 9172 9138 0.4% FASTER

Top 1,000 sites Moto G (KitKat) 2014

Top 1,000 sites Moto G (KitKat) 2015

Mobile Specific RWD DeltaCount 171 98Total Requests (median) 62 61 equalTotal KB (median) 770 1,102 43% higherSpeedIndex (median) 8801 7746 13% FASTER

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

In Summary

• Reduce Requests– Quantity and Size– HTML, CSS, JavaScript, and Fonts are crucial to optimize

• Optimize critical rendering path• Mobile redirect vs. RWD:

– Performance line is blurring on newer browsers/hardware

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

You too can explore this

Download the raw data:http://mobile.httparchive.org/downloads.php

Or explore it in Big Query:https://www.igvita.com/2013/06/20/http-archive-bigquery-web-performance-answers/http://bigqueri.es/

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Early Release…

Includes:• Getting Started• Interpreting waterfalls• Scripting tests• Using the API• Continuous Integration• Private Instances

http://bit.ly/usingwebpagetest

© 2015 AT&T Intellectual Property. All rights reserved. AT&T, the AT&T logo and all other marks contained herein are trademarks of AT&T Intellectual Property and/or AT&T affiliated companies. All other marks contained herein are the property of their respective owners. Information contained herein is not an offer, commitment, representation or warranty by AT&T and is subject to change. Mention of a specific company or entity is not an endorsement by AT&T.

© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.

Thanks

Doug Sillars@dougsillars

Andy Davies@andydavies