Mobile Web Performance using WebPageTest and HTTPArchive

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.


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


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

http://marketingland.com/mobile-drives-nearly-half-e-commerce-traffic-pc-still-rules-sales-report-118629

http://marketingland.com/mobile-drives-nearly-half-e-commerce-traffic-pc-still-rules-sales-report-118629

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.


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.”


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/

http://www.marketwired.com/press-release/survey-mobile-broadband-performance-expectations-higher-than-ever-even-as-more-operators-2052324.htm

http://www.marketwired.com/press-release/survey-mobile-broadband-performance-expectations-higher-than-ever-even-as-more-operators-2052324.htm

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


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


SpeedIndex Measure of Visual Performance


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

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


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


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


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

Test Setup


Read data into HTTPArchive format SQL database

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

Begin querying the data


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?


Number of Requests

Freq

uenc

y

70% < 100 Requests

6% > 200 requests

How Many Requests Do Mobile Pages Make?


Number of Requests

Freq

uenc

y

U.S. “News” Site


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


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


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


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


How Big are Mobile Pages?

46% under 500 KB91% under 2MB

87 mobile sites over 3MB

Speed Index vs Page Size


Outside US

Seriously?


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


Enormous Mobile Sites Cost $$

Speed Index vs Page Size


• 425 KB• 29 Requests• SpeedIndex

>16000

Redirects are a Mobile Killer


• 425 KB• 29 Requests• SpeedIndex

>16000

7.5 seconds before page load lost to redirects



If you Must redirect – CACHE your redirects:


Low Byte Count

• Long TTFB


Low Request and Byte Count

• Multiple scripts• Head of line

blocking


So What Makes a Site Very Fast?

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


Sites with SpeedIndex < 2000

• <5 Requests to load page


Load Important Stuff First8 requests required to load page

97 requests for ads/analytics/trackers


Some worrying trends…

Pages Are Still Getting Bigger


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


Our Base Page Isn’t Changing Much


JavaScript Has Grown 25% in 12 Months

New Graph, same increase

2013-2014


CSS has Grown By 20%

Was 33% last year

2013-2014


Images are Bulk of Download


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


Fonts – 200% Growth in 12 Months


Most Pages Don’t Use Fonts

56% do not use custom fonts

But 9 sites use > 500 KB


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


RWD


Mobile Specific Sites


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


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


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/


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.


Thanks

Doug Sillars@dougsillars

Andy Davies@andydavies

Mobile Web Performance using WebPageTest and HTTPArchive

Mobile

Transcript of Mobile Web Performance using WebPageTest and HTTPArchive