Your SlideShare is downloading. ×
0
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
How fast are we going now?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How fast are we going now?

23,729

Published on

Keynote for HTML5 Dev Conf, April 1 2013.

Keynote for HTML5 Dev Conf, April 1 2013.

Published in: Technology
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,729
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
94
Comments
0
Likes
27
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
  • GENERALLY SLOW IS BADhttp://www.flickr.com/photos/msvg/4476789745/
  • http://www.flickr.com/photos/silent_e/406944364/
  • SLOW IS BADhttp://www.flickr.com/photos/iwona_kellie/4867301081/
  • http://www.flickr.com/photos/stuant63/3159936302/
  • http://www.flickr.com/photos/cwinters/4561002487/
  • http://www.flickr.com/photos/bruce-camera/5244072368/
  • http://www.flickr.com/photos/94213193@N00/324472983/
  • http://www.flickr.com/photos/ngarkat/806196696/
  • http://www.flickr.com/photos/chadfust/999798684/
  • http://www.flickr.com/photos/matman/661077091/
  • http://www.flickr.com/photos/lizhaslam/6255976169/
  • http://www.flickr.com/photos/mommypants/3189190946/
  • http://www.flickr.com/photos/w4nd3rl0st/5944487713/
  • NOTICE HOW THE GIRL IS GIVING THE “GO FASTER” SIGNhttp://www.flickr.com/photos/blake/6062598298/
  • FAST CAN BE A LITTLE FRIGHTENINGhttp://www.flickr.com/photos/45777632@N06/6340839611/
  • http://www.flickr.com/photos/dullhunk/3930915541/
  • http://www.flickr.com/photos/sagamiono/5460242231/
  • AT&T is the nation's fastest 4G LTE network for your iPhone 5. As explained by kids, faster is better.
  • Joshua Bixby sent me the sources for each data point:8 seconds (Zona, 1999):http://www.websiteoptimization.com/speed/1/ 4 seconds (Jupiter, 2006):http://www.akamai.com/4seconds 2 seconds (Forrester, 2009):http://www.akamai.com/html/about/press/releases/2009/press_091409.html 400ms (Google, 2012):http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0 
  • “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
  • This was a ~5 second speed up.
  • contribute.barackobama.com
  • SOMETIMES FAST IS JUST BASED ON PERCEPTIONShttp://www.flickr.com/photos/photohype/288124023/
  • Specific to Akamai – how long it takes to download their resources. Could be affected by big clients moving on or off, causing/lessening congestion.
  • Actual carrier is hidden behind “US-1” etc.
  • based on Gomez RUM dataNot sure how they determine “perceived” render time.
  • based on Gomez RUM data
  • based on Gomez RUM data
  • http://www.flickr.com/photos/bigbaddie/4907862472/
  • HTTP Archive: twice a month, 300K wwide top URLs from Alexa, gatherinfoinclsize.http://chart.apis.google.com/chart?chxr=1,800,1400,200|2,80,100,10&chds=9,99,80,100,9,99,800,1400&chd=t:-1|85,84,84,82,84,83,83,84,84,86,85,81,82,85,86,86,87,88,88,88,88,88,89,90,90|-1|1008,1011,1018,1042,1059,1067,1068,1090,1097,1124,1105,1092,1098,1227,1239,1249,1269,1285,1286,1284,1280,1270,1292,1311,1335&chxl=0:|3%2F15%7C+%7C4%2F15%7C+%7C5%2F15%7C+%7C6%2F15%7C+%7C7%2F15%7C+%7C8%2F15%7C+%7C9%2F15%7C+%7C10%2F15%7C+%7C11%2F15%7C+%7C12%2F15%7C+%7C1%2F15%7C+%7C2%2F15%7C+%7C3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&chm=N,15A50E,0,::2,12,,h::8|N**kB,006600,1,::2,12,,h::8&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+(kB)&chdlp=bv|r
  • http://chart.apis.google.com/chart?chds=9,99,80,100,9,99,700,1400&chxr=1,700,1400,200|2,80,100,10&chd=t:-1|89,82,86,87,88,89,90,88,86,90,90,91,90,97,98,97,100,98,99,98,99,98,99,98,100|-1|829,774,804,798,828,845,867,867,819,879,885,883,886,1027,1087,1111,1089,1108,1163,1103,1120,1131,1149,1154,1197&chxl=0:|3%2F15%7C+%7C4%2F15%7C+%7C5%2F15%7C+%7C6%2F15%7C+%7C7%2F15%7C+%7C8%2F15%7C+%7C9%2F15%7C+%7C10%2F15%7C+%7C11%2F15%7C+%7C12%2F15%7C+%7C1%2F15%7C+%7C2%2F15%7C+%7C3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&chm=N,15A50E,0,::2,12,,h::8|N**kB,006600,1,::2,12,,h::8&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+(kB)&chdlp=bv|r
  • http://chart.apis.google.com/chart?chds=9,99,50,80,9,99,400,700&chxr=1,400,700,100|2,50,80,10&chd=t:-1|57,52,55,55,56,56,57,56,54,56,57,57,56,60,61,61,62,61,62,61,62,61,61,60,62|-1|489,454,478,476,483,500,509,496,473,510,519,526,527,567,589,606,598,604,620,605,614,623,628,615,639&chxl=0:|3%2F15|+|4%2F15|+|5%2F15|+|6%2F15|+|7%2F15|+|8%2F15|+|9%2F15|+|10%2F15|+|11%2F15|+|12%2F15|+|1%2F15|+|2%2F15|+|3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=1515FF,00009D&chm=N,1515FF,0,::2,12,,h::8|N**kB,00009D,1,::2,12,,h::8&chts=00009D,24&chtt=Image+Transfer+Size+%26+Image+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,00009D,11.5,-0.5,lt,00009D,00009D|2,1515FF,11.5,-0.5,lt,1515FF,1515FF&chxtc=0,4|1,4&chxp=0&chdl=Image+Requests|Image+Transfer+Size+%28kB%29&chdlp=bv|r
  • http://chart.apis.google.com/chart?chds=9,99,10,30,9,99,150,205&chxr=1,150,205,25|2,10,30,10&chd=t:-1|14,14,14,14,15,15,15,15,14,15,15,15,15,17,17,16,17,17,17,17,17,17,17,17,17|-1|165,164,168,170,175,172,176,183,184,190,185,182,182,194,196,195,199,198,199,195,198,200,201,202,202&chxl=0:|3%2F15|+|4%2F15|+|5%2F15|+|6%2F15|+|7%2F15|+|8%2F15|+|9%2F15|+|10%2F15|+|11%2F15|+|12%2F15|+|1%2F15|+|2%2F15|+|3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=E63C0B,982807&chm=N,E63C0B,0,::2,12,,h::8|N**kB,982807,1,::2,12,,h::8&chts=982807,24&chtt=JS+Transfer+Size+%26+JS+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,982807,11.5,-0.5,lt,982807,982807|2,E63C0B,11.5,-0.5,lt,E63C0B,E63C0B&chxtc=0,4|1,4&chxp=0&chdl=JS+Requests|JS+Transfer+Size+%28kB%29&chdlp=bv|r
  • I still needtotrack down the sharp increase in Oct 2012.http://chart.apis.google.com/chart?chxr=1,0,200,50|2,0,15,5&chds=9,99,0,15,9,99,0,200&chd=t:-1|4.8,5.0,4.9,5.0,5.0,4.9,4.9,5.0,4.8,4.9,4.9,5.0,4.9,4.8,4.9,5.1,5.4,5.1,5.4,5.0,5.1,5.5,5.5,5.1,5.5|-1|16,17,15,14,21,22,24,26,17,21,24,23,24,81,113,123,91,117,150,126,137,131,129,163,165&chxl=0:|3%2F15%7C+%7C4%2F15%7C+%7C5%2F15%7C+%7C6%2F15%7C+%7C7%2F15%7C+%7C8%2F15%7C+%7C9%2F15%7C+%7C10%2F15%7C+%7C11%2F15%7C+%7C12%2F15%7C+%7C1%2F15%7C+%7C2%2F15%7C+%7C3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=6A5C49,6A3135&chm=N,6A5C49,0,::2,12,,h::8|N,6A3135,1,::2,12,,h::8&chts=6A3135,24&chtt=Other+Transfer+Size+%26+Other+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,6A3135,11.5,-0.5,lt,6A3135,6A3135|2,6A5C49,11.5,-0.5,lt,6A5C49,6A5C49&chxtc=0,4|1,4&chxp=0&chdl=Other+Requests|Other+Transfer+Size+(kB)&chdlp=bv|r
  • text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
  • text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
  • text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
  •     Mar '12    Mar '13    images    489    639    31%video    93    233    151%JS    165    202    22%HTML    36    45    25%CSS    30    37    23%fonts    14    26    86%other    3    15    400%
  • HTTP Archive: twice a month, 300K wwide top URLs from Alexa, gatherinfoinclsize.http://chart.apis.google.com/chart?chxr=1,800,1400,200|2,80,100,10&chds=9,99,80,100,9,99,800,1400&chd=t:-1|85,84,84,82,84,83,83,84,84,86,85,81,82,85,86,86,87,88,88,88,88,88,89,90,90|-1|1008,1011,1018,1042,1059,1067,1068,1090,1097,1124,1105,1092,1098,1227,1239,1249,1269,1285,1286,1284,1280,1270,1292,1311,1335&chxl=0:|3%2F15%7C+%7C4%2F15%7C+%7C5%2F15%7C+%7C6%2F15%7C+%7C7%2F15%7C+%7C8%2F15%7C+%7C9%2F15%7C+%7C10%2F15%7C+%7C11%2F15%7C+%7C12%2F15%7C+%7C1%2F15%7C+%7C2%2F15%7C+%7C3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&chm=N,15A50E,0,::2,12,,h::8|N**kB,006600,1,::2,12,,h::8&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+(kB)&chdlp=bv|r
  • http://chart.apis.google.com/chart?chds=9,99,80,100,9,99,700,1400&chxr=1,700,1400,200|2,80,100,10&chd=t:-1|89,82,86,87,88,89,90,88,86,90,90,91,90,97,98,97,100,98,99,98,99,98,99,98,100|-1|829,774,804,798,828,845,867,867,819,879,885,883,886,1027,1087,1111,1089,1108,1163,1103,1120,1131,1149,1154,1197&chxl=0:|3%2F15%7C+%7C4%2F15%7C+%7C5%2F15%7C+%7C6%2F15%7C+%7C7%2F15%7C+%7C8%2F15%7C+%7C9%2F15%7C+%7C10%2F15%7C+%7C11%2F15%7C+%7C12%2F15%7C+%7C1%2F15%7C+%7C2%2F15%7C+%7C3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&chm=N,15A50E,0,::2,12,,h::8|N**kB,006600,1,::2,12,,h::8&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+(kB)&chdlp=bv|r
  • I gathered this data by manual SQL queries looking at only the responses started before window.onload.
  • text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
  • text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
  • text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
  • I gathered this data by manual SQL queries looking at only the responses started before window.onload.
  •     Mar '12    Mar '13    images    489    639    31%video    93    233    151%JS    165    202    22%HTML    36    45    25%CSS    30    37    23%fonts    14    26    86%other    3    15    400%
  • http://www.flickr.com/photos/rexboggs5/7608691710/
  • flickr.com/photos/wwarby/3296379139/
  • http://chart.apis.google.com/chart?chds=9,99,80,100,9,99,700,1400&chxr=1,700,1400,200|2,80,100,10&chd=t:-1|89,82,86,87,88,89,90,88,86,90,90,91,90,97,98,97,100,98,99,98,99,98,99,98,100|-1|829,774,804,798,828,845,867,867,819,879,885,883,886,1027,1087,1111,1089,1108,1163,1103,1120,1131,1149,1154,1197&chxl=0:|3%2F15%7C+%7C4%2F15%7C+%7C5%2F15%7C+%7C6%2F15%7C+%7C7%2F15%7C+%7C8%2F15%7C+%7C9%2F15%7C+%7C10%2F15%7C+%7C11%2F15%7C+%7C12%2F15%7C+%7C1%2F15%7C+%7C2%2F15%7C+%7C3%2F15&chxt=x,y,r&chs=600x300&cht=lxy&chco=15A50E,006600&chm=N,15A50E,0,::2,12,,h::8|N**kB,006600,1,::2,12,,h::8&chts=006600,24&chtt=Total+Transfer+Size+%26+Total+Requests&chma=5,5,5,25&chls=1,6,3|1&chxs=1,006600,11.5,-0.5,lt,006600,006600|2,15A50E,11.5,-0.5,lt,15A50E,15A50E&chxtc=0,4|1,4&chxp=0&chdl=Total+Requests|Total+Transfer+Size+(kB)&chdlp=bv|r
  • http://www.webpagetest.org/video/compare.php?tests=121212_KK_VED-r%3A2-c%3A0&thumbSize=200&ival=1000&end=visual
  • http://www.webpagetest.org/video/compare.php?tests=121212_KF_V7Y-r%3A3-c%3A0&thumbSize=200&ival=1000&end=visual
  • The percentages indicate page rendering progress.https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  • http://www.flickr.com/photos/churl/159610735/
  • http://upload.wikimedia.org/wikipedia/commons/e/ed/Jester-_Joker_Card001.jpg
  • flickr.com/photos/myklroventine/4062102754/
  • Transcript

    • 1. How fast are we going now?@soudersstevesouders.com/docs/html5devconf-howfast-20130401-corrected.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
    • 2. AT&T is the nations fastest 4G LTEnetwork for your iPhone 5. Asexplained by kids, faster is better.
    • 3. webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/
    • 4. en.oreilly.com/velocity2009/public/schedule/detail/8523
    • 5. blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds offthe average page load timeand increased downloadconversions by 15.4%!
    • 6. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/…shaved 2.2 seconds offthe average page load timeand increased downloadconversions by 15.4%!
    • 7. We made the new platform 60%faster and this resulted in a 14%increase in donation conversions. kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/
    • 8. Connection Speed
    • 9. AkamaiState of the InternetQ3 2012 akamai.com/stateoftheinternet/
    • 10. YoY: +4% +18%akamai.com/stateoftheinternet/
    • 11. YoY: +68% +131% +30%akamai.com/stateoftheinternet/
    • 12. Year-over-year:• global speeds are 4% faster• US speeds are 18% faster• US mobile speeds are 30- 131% faster
    • 13. techcrunch.com/2011/08/08/whats-the-fastest-web-browser-in-the-real-world-chrome/
    • 14. zdnet.com/the-big-browser-benchmark-january-2013-edition-7000009776/
    • 15. zdnet.com/the-big-browser-benchmark-january-2013-edition-7000009776/
    • 16. Page Weight
    • 17. 327K (32%) bigger in one year“All” URLs (70K to 300K URLs)sample size may affect results httparchive.org/trends.php?s=All
    • 18. “Top 1000” URLs10/1 spike due to testing changenot apples-to-apples httparchive.org/trends.php?s=Top1000
    • 19. CORRECT data Mar `12 Mar `13 Δ total 822 K 1053 K 231 K images 486 K 600 K 114 K JS 163 K 188 K 25 K Flash 84 K 75 K -9 K HTML 35 K 42 K 7K CSS 30 K 36 K 6K font 3K 11 K 8KWhere’s the other 80 K? 151 K
    • 20. “other” resources Δ K/ Content-Type Mar `12 Mar `13 pagetext/plain 823, 8K, 7K 778, 44K, 35K 28Kvideo/mp4 3, 316K, 1K 8, 2498K, 20K 19Kvideo/x-flv 7, 556K, 4K 16, 1262K, 21K 17Kapplication/octet- 158, 28K, 5K 187, 58K, 11K 6Kstream how many 70 K avg xfer size K/page(remember: “Top 1000”)
    • 21. text/plain resources Δ K/ URL regex Mar `12 Mar `13 page.flv, .f4v 12, 146K, 2K 18, 1674K, 31K 29K.ttf, .eot, .woff 59, 54K, 3K 75, 38K, 3K 0K 35 K per page = (778 reqs * 44K/req) / 975 pages 31 K – video 3 K – fonts
    • 22. octet/stream resources Δ K/ URL regex Mar `12 Mar `13 page.flv,.f4v,.mp4,.swf 14, 56K, 1K 10, 652K, 7K 6K.ttf, .eot, .woff 49, 41K, 2K 88, 42K, 4K 2K 11 K per page = (187 reqs * 58K/req) / 975 pages 7 K – video 4 K – fonts
    • 23. COMPLETE data Mar `12 Mar `13 Δtotal 822 K 1053 K 231 K (28%)images 486 K 600 K 114 K (23%)JS 163 K 188 K 25 K (15%)video 92 K 154 K 62 K (67%)HTML 35 K 42 K 7 K (20%)CSS 30 K 36 K 6 K (20%)font 8K 18 K 10 K (125%)other 8K 15 K 7 K (88%)
    • 24. Year-over-year:*• pages 231K (28%) heavier• images up 114K (23%)• video up 62K (67%) * “Top 1000” URLs, transfer size
    • 25. quality of craft
    • 26. httparchive.org/trends.php?s=Top1000
    • 27. httparchive.org/trends.php?s=Top1000
    • 28. httparchive.org/trends.php?s=Top1000
    • 29. httparchive.org/trends.php?s=Top1000
    • 30. httparchive.org/trends.php?s=Top1000
    • 31. httparchive.org/trends.php?s=Top1000
    • 32. httparchive.org/trends.php?s=Top1000
    • 33. Year-over-year:*• no significant change in adoption of best practices * “Top 1000” URLs
    • 34. pagespeed
    • 35. webperformancetoday.com/
    • 36. avg across ~900K measurementssynthetic: 1 browser, 1 location, 1 network connection, etc.
    • 37. window.onload ≠user perception
    • 38. 3.3 secondswindow.onload4.8 seconds90% rendered
    • 39. 2.0 seconds88% rendered5.2 secondswindow.onload
    • 40. “Speed Index”“average time at which visible parts of the page are displayed”
    • 41. sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
    • 42. sneak previewPage Load Time, year-over-year• desktop: 3.5% faster• mobile: 30% fasterWatch for Google blog post tomorrow!
    • 43. Scorecard:• connections are faster• browsers getting faster• pages are heavier• best practices are flat• page load times are faster
    • 44. April Fools! takeaways the Web is fast enoughWE’RE DONE!
    • 45. takeawayswatch video growthbetter performance metricpush best practicesmultiple CPUscaching
    • 46. Steve Souders @soudersstevesouders.com/docs/html5devconf-howfast-20130401-corrected.pptx

    ×