Mobile Web Performance using WebPageTest and HTTPArchive
-
Upload
doug-sillars -
Category
Mobile
-
view
2.367 -
download
0
Transcript of 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.
© 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