Weitere ähnliche Inhalte Ähnlich wie Mobile Web Performance using WebPageTest and HTTPArchive (20) Mehr von Doug Sillars (20) Mobile Web Performance using WebPageTest and HTTPArchive1. 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.
2. 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
3. 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-118629
http://searchengineland.com/its-official-google-says-more-searches-now-on-mobile-than-on-desktop-220369
4. 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
5. 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.htm
http://media.fb.com/2015/05/12/instantarticles/
6. 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/1263954439
http://www.mobilejoomla.com/mobile-joomla-blog/172-responsive-design-vs-server-side-solutions-infographic.html
7. 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.
8. 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
9. © 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
10. © 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
11. 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.
12. 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.
13. 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/
14. 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
15. Souders’ Laws of Fast Websites
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable
16. 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
Frequency
70% < 100 Requests
6% > 200 requests
17. 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
Frequency
18. 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
19. Speed Index vs.Request Count
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
• 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
20. Speed Index vs.Request Count
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
• Sites with many requests can have
a low SpeedIndex
• Independent.co.uk
• Xda-developers.com
>400 requests, yet SpeedIndex
<10000
21. Souders’ Laws of Fast Websites
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable
22. 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.
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 requests
42% of domains have just 1 request
23. How Big are Mobile Pages?
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
46% under 500 KB
91% under 2MB
87 mobile sites over 3MB
24. 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?
25. Enormous Mobile Sites Cost $$
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
http://whatdoesmysitecost.com/test/150911_T3_GG0#p
ppCost
26. Enormous Mobile Sites Cost $$
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
27. 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
28. 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
29. Souders’ Laws of Fast Websites
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable
If you Must redirect – CACHE your
redirects:
30. 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.
31. 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.
32. So What Makes a Site Very Fast?
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
21% SpeedIndex < 5,000
66% SpeedIndex <10,000
85% SpeedIndex <15,000
33. 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.
34. Souders’ Laws of Fast Websites
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
Rule 1 - Make Fewer HTTP Requests
Rule 2 - Use a Content Delivery Network
Rule 3 - Add an Expires Header
Rule 4 - Gzip Components
Rule 5 - Put Stylesheets at the Top
Rule 6 - Put Scripts at the Bottom
Rule 7 - Avoid CSS Expressions
Rule 8 - Make JavaScript and CSS External
Rule 9 - Reduce DNS Lookups
Rule 10 - Minify JavaScript
Rule 11 - Avoid Redirects
Rule 12 - Remove Duplicate Scripts
Rule 13 - Configure ETags
Rule 14 - Make AJAX Cacheable
35. Load Important Stuff First
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
8 requests required to load page
97 requests for ads/analytics/trackers
36. © 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…
37. 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: 644kb
9/1/2013: 815kb
9/1/2014: 1020kb
9/1/2015: 1203kb
38. 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.
39. JavaScript Has Grown 25% 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.
New Graph,
same increase
2013-2014
40. CSS has Grown By 20%
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
Was 33% last
year
2013-2014
41. 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.
42. © 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…
43. 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.
44. Most Pages Don’t Use Fonts
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
56% do not use
custom fonts
But 9 sites use >
500 KB
45. 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.
46. RWD
© 2014 AT&T Intellectual Property. All rights reserved. AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
47. 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.
48. Mobile Specific Vs. 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 RWD Delta
Count 218 98
Total Requests 42 52 19% higher
Total KB 474 893 47% higher
SpeedIndex 9172 9138 0.4% FASTER
Top 1,000 sites Moto G (KitKat) 2014
Top 1,000 sites Moto G (KitKat) 2015
Mobile Specific RWD Delta
Count 171 98
Total Requests (median) 62 61 equal
Total KB (median) 770 1,102 43% higher
SpeedIndex (median) 8801 7746 13% FASTER
49. 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.
50. 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.
51. © 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
52. © 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.
53. © 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
Hinweis der Redaktion Bullet points on why WPT is awesome?
Bullet points on why WPT is awesome?
Maybe background on what the SpeedIndex measurement is? Actually 4,752 URLs are tested’
Note the long tail –
818 is publico.es which had a spike around the test period and is back to normal - http://mobile.httparchive.org/viewsite.php?u=http%3A%2F%2Fwww.publico.es%2F&l=Apr%2015%202014
Note the long tail –
818 is publico.es which had a spike around the test period and is back to normal - http://mobile.httparchive.org/viewsite.php?u=http%3A%2F%2Fwww.publico.es%2F&l=Apr%2015%202014
Note the long tail –
818 is publico.es which had a spike around the test period and is back to normal - http://mobile.httparchive.org/viewsite.php?u=http%3A%2F%2Fwww.publico.es%2F&l=Apr%2015%202014
30 sites have <40 requests and take over 25s to load 30 sites have <40 requests and take over 25s to load This is your Moto G data 40 of the top 1,000 sites *in HTTP archive* are under 1MB, but take over 25 seconds to load. 40 of the top 1,000 sites *in HTTP archive* are under 1MB, but take over 25 seconds to load. 40 of the top 1,000 sites *in HTTP archive* are under 1MB, but take over 25 seconds to load. TCP connections need to be made for each of them
CSS and the critical path – Patrick Hamman - https://www.youtube.com/watch?v=-W0FBNbMLs0 I don’t know if this chart is great.. But my idea is that fast sites are closer to zero external CSS. Slower sites are more likely to have 2-4 CSS (and it only gets worse)
May be the bulk of the download but growing more slow and more importantly aren’t render blocking