SlideShare a Scribd company logo

Mobile Web Performance using WebPageTest and HTTPArchive

Download as PPTX, PDF
Doug Sillars, profile picture
Doug Sillars

The document discusses the importance of optimizing mobile websites, highlighting that a significant portion of web traffic and e-commerce now comes from mobile devices. It emphasizes the necessity for faster load times, noting that slow pages lead to increased bounce rates and user frustration. Key strategies for enhancing mobile performance include reducing HTTP requests, leveraging content delivery networks, and optimizing the critical rendering path.

Mobile
Related topics:
Mobile Web Solutions
1 of 53
Downloaded 27 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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-118629 http://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.htm http://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/1263954439 http://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
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
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
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
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
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
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
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
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
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
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?
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
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.
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
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:
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? © 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
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 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
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
© 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: 644kb 9/1/2013: 815kb 9/1/2014: 1020kb 9/1/2015: 1203kb
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 © 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
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
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.
© 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…
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 © 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
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 © 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
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.
© 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

More Related Content

PDF
What Makes Mobile Websites Tick - Oredev
Doug Sillars
 
PPTX
Getting Your Piece of the Mobile Pi 2017
Doug Sillars
 
DOCX
Aricles of FII
vinod1505
 
PDF
Project titles for B.E
Senthil Kumar
 
PDF
Embedded project list
Senthil Kumar
 
PPTX
Power
Dennali Avo
 
DOC
Abstract8
Senthil Kumar
 
PPTX
Derma
Ana KoKita
 
What Makes Mobile Websites Tick - Oredev
Doug Sillars
 
Getting Your Piece of the Mobile Pi 2017
Doug Sillars
 
Aricles of FII
vinod1505
 
Project titles for B.E
Senthil Kumar
 
Embedded project list
Senthil Kumar
 
Power
Dennali Avo
 
Abstract8
Senthil Kumar
 
Derma
Ana KoKita
 

Viewers also liked (11)

PPTX
Test
rahul_adodis
 
PDF
Projects Titles on embedded
Senthil Kumar
 
PPT
Symmetrical2
Senthil Kumar
 
PDF
text-1
Koichi Nagasato
 
PDF
Legalização casamento homoafetivo 2015
Bianca Fabianowicz
 
PDF
Biomedical projects
Senthil Kumar
 
PDF
Entrepreneurship
Deepak R Gorad
 
PDF
HallowLED
Joseph Chiu
 
PDF
E -commerce by DRG
Deepak R Gorad
 
PPTX
20130228 update rondje oss 1
pgvanderpoel
 
DOC
Wireless projects
Senthil Kumar
 
Test
rahul_adodis
 
Projects Titles on embedded
Senthil Kumar
 
Symmetrical2
Senthil Kumar
 
text-1
Koichi Nagasato
 
Legalização casamento homoafetivo 2015
Bianca Fabianowicz
 
Biomedical projects
Senthil Kumar
 
Entrepreneurship
Deepak R Gorad
 
HallowLED
Joseph Chiu
 
E -commerce by DRG
Deepak R Gorad
 
20130228 update rondje oss 1
pgvanderpoel
 
Wireless projects
Senthil Kumar
 
Ad

Similar to Mobile Web Performance using WebPageTest and HTTPArchive (20)

PDF
Measuring and improving your app's network performance oredev
Doug Sillars
 
PDF
Mobile Web Performance - Getting and Staying Fast
Andy Davies
 
PDF
Hacking Web Performance @ ForwardJS 2017
Maximiliano Firtman
 
PDF
Sample Whitepaper
Richard Smiraldi
 
DOCX
Lunarpages | make optimizing site speed a priority for your business
Lunar_Pages
 
PPTX
Web Page Speed - A Most Important Feature
Scott Germaise
 
PDF
Mobile web performance dwx13
Avenga Germany GmbH
 
PPT
Grail 120322064025-phpapp01
sajid345209
 
PPTX
Wordcamp 2017-toronto-sam lalonde
wcto2017
 
PPTX
Do you want mobile with that
Martin Clancy
 
PPTX
High Performance Apps: Tips for Speed, Power and Data
Doug Sillars
 
PDF
How to Take Your Website Beyond Fast
Search Engine Journal
 
PPTX
Android App performance - Europe 2015
Doug Sillars
 
PPT
MeasureWorks - Emerece eTravel - 7 performance concerns for marketers
MeasureWorks
 
PPTX
Leveraging Website Speed to Increase Sales
Vendasta Technologies
 
PPTX
Performance Is About People, Not Metrics [2017 Web Directions Summit]
Tammy Everts
 
PDF
Building High Performance Web Sites
Praveen P N
 
PPTX
Belgian Mobile Barometer
Mobilosoft
 
PDF
Hacking Web Performance 2019
Maximiliano Firtman
 
PPTX
SEO 101 - Google Page Speed Insights Explained
Steve Weber
 
Measuring and improving your app's network performance oredev
Doug Sillars
 
Mobile Web Performance - Getting and Staying Fast
Andy Davies
 
Hacking Web Performance @ ForwardJS 2017
Maximiliano Firtman
 
Sample Whitepaper
Richard Smiraldi
 
Lunarpages | make optimizing site speed a priority for your business
Lunar_Pages
 
Web Page Speed - A Most Important Feature
Scott Germaise
 
Mobile web performance dwx13
Avenga Germany GmbH
 
Grail 120322064025-phpapp01
sajid345209
 
Wordcamp 2017-toronto-sam lalonde
wcto2017
 
Do you want mobile with that
Martin Clancy
 
High Performance Apps: Tips for Speed, Power and Data
Doug Sillars
 
How to Take Your Website Beyond Fast
Search Engine Journal
 
Android App performance - Europe 2015
Doug Sillars
 
MeasureWorks - Emerece eTravel - 7 performance concerns for marketers
MeasureWorks
 
Leveraging Website Speed to Increase Sales
Vendasta Technologies
 
Performance Is About People, Not Metrics [2017 Web Directions Summit]
Tammy Everts
 
Building High Performance Web Sites
Praveen P N
 
Belgian Mobile Barometer
Mobilosoft
 
Hacking Web Performance 2019
Maximiliano Firtman
 
SEO 101 - Google Page Speed Insights Explained
Steve Weber
 
Ad

More from Doug Sillars (20)

PPTX
Fastandbeautiful belfast
Doug Sillars
 
PPTX
Fastandbeautiful gdg sacremento
Doug Sillars
 
PPTX
Fastandbeautiful gd glittlerock
Doug Sillars
 
PPTX
Fastandbeautiful webinale
Doug Sillars
 
PPTX
Ai powered images-pythonljubjana
Doug Sillars
 
PPTX
Fastandbeautiful zagrebtechsauna
Doug Sillars
 
PPTX
Video js zagreb
Doug Sillars
 
PDF
Vkmdp cologne
Doug Sillars
 
PPTX
Ai powered images-gdgtirana
Doug Sillars
 
PPTX
A rt gallery pantalks
Doug Sillars
 
PPTX
Ai powered images-sarajevo
Doug Sillars
 
PPTX
A rt gallery hub387
Doug Sillars
 
PPTX
Ai powered images-zurichpydata
Doug Sillars
 
PPTX
Fastandbeautiful vienna
Doug Sillars
 
PPTX
Ai powered images-opieaivienna
Doug Sillars
 
PPTX
A rt gallery devfestlondon
Doug Sillars
 
PPTX
Fastandbeautiful devfest london
Doug Sillars
 
PPTX
A rt gallery cardiff
Doug Sillars
 
PPTX
Ai powered images-mobileera
Doug Sillars
 
PPTX
Fastandbeautiful oredev
Doug Sillars
 
Fastandbeautiful belfast
Doug Sillars
 
Fastandbeautiful gdg sacremento
Doug Sillars
 
Fastandbeautiful gd glittlerock
Doug Sillars
 
Fastandbeautiful webinale
Doug Sillars
 
Ai powered images-pythonljubjana
Doug Sillars
 
Fastandbeautiful zagrebtechsauna
Doug Sillars
 
Video js zagreb
Doug Sillars
 
Vkmdp cologne
Doug Sillars
 
Ai powered images-gdgtirana
Doug Sillars
 
A rt gallery pantalks
Doug Sillars
 
Ai powered images-sarajevo
Doug Sillars
 
A rt gallery hub387
Doug Sillars
 
Ai powered images-zurichpydata
Doug Sillars
 
Fastandbeautiful vienna
Doug Sillars
 
Ai powered images-opieaivienna
Doug Sillars
 
A rt gallery devfestlondon
Doug Sillars
 
Fastandbeautiful devfest london
Doug Sillars
 
A rt gallery cardiff
Doug Sillars
 
Ai powered images-mobileera
Doug Sillars
 
Fastandbeautiful oredev
Doug Sillars
 

Recently uploaded (6)

PDF
Lesson 13- HEREDITY _ pedSAWEREGFVCXZDSASEWFigree.pdf
glennpauloani
 
PDF
6-UseCfgfhgfhgfhgfhgfhfhhaseActivity.pdf
FadyFady9
 
PPTX
ASMS Telecommunication company Profile
Mukesh604998
 
PDF
heheheueueyeyeyegehehehhehshMedia-Literacy.pdf
judekimwellnombre15
 
DOC
Camb毕业证学历认证,格罗斯泰斯特主教大学毕业证仿冒文凭毕业证
zavofe
 
DOC
证书学历UoA毕业证,澳大利亚中汇学院毕业证国外大学毕业证
byysy
 
Lesson 13- HEREDITY _ pedSAWEREGFVCXZDSASEWFigree.pdf
glennpauloani
 
6-UseCfgfhgfhgfhgfhgfhfhhaseActivity.pdf
FadyFady9
 
ASMS Telecommunication company Profile
Mukesh604998
 
heheheueueyeyeyegehehehhehshMedia-Literacy.pdf
judekimwellnombre15
 
Camb毕业证学历认证,格罗斯泰斯特主教大学毕业证仿冒文凭毕业证
zavofe
 
证书学历UoA毕业证,澳大利亚中汇学院毕业证国外大学毕业证
byysy
 

Mobile Web Performance using WebPageTest and HTTPArchive

  • 1. 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

Editor's Notes

  • #8: Bullet points on why WPT is awesome?
  • #9: Bullet points on why WPT is awesome? Maybe background on what the SpeedIndex measurement is?
  • #12: Actually 4,752 URLs are tested’
  • #17: 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
  • #18: 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
  • #19: 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
  • #20: 30 sites have <40 requests and take over 25s to load
  • #21: 30 sites have <40 requests and take over 25s to load
  • #24: This is your Moto G data
  • #25: 40 of the top 1,000 sites *in HTTP archive* are under 1MB, but take over 25 seconds to load.
  • #28: 40 of the top 1,000 sites *in HTTP archive* are under 1MB, but take over 25 seconds to load.
  • #29: 40 of the top 1,000 sites *in HTTP archive* are under 1MB, but take over 25 seconds to load.
  • #34: TCP connections need to be made for each of them CSS and the critical path – Patrick Hamman - https://www.youtube.com/watch?v=-W0FBNbMLs0
  • #36: 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)
  • #42: May be the bulk of the download but growing more slow and more importantly aren’t render blocking