How fast are we going now?
- 1. How fast are we going now? @souders stevesouders.com/docs/html5devconf-howfast-20130401-corrected.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
- 16. AT&T is the nation's fastest 4G LTE network for your iPhone 5. As explained by kids, faster is better.
- 20. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 21. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!
- 22. 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/
- 23. Connection Speed
- 24. Akamai State of the Internet Q3 2012 akamai.com/stateoftheinternet/
- 26. YoY: +68% +131% +30% akamai.com/stateoftheinternet/
- 27. Year-over-year: • global speeds are 4% faster • US speeds are 18% faster • US mobile speeds are 30- 131% faster
- 31. Page Weight
- 32. 327K (32%) bigger in one year “All” URLs (70K to 300K URLs) sample size may affect results httparchive.org/trends.php?s=All
- 33. “Top 1000” URLs 10/1 spike due to testing change not apples-to-apples httparchive.org/trends.php?s=Top1000
- 34. 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 8K Where’s the other 80 K? 151 K
- 35. “other” resources Δ K/ Content-Type Mar `12 Mar `13 page text/plain 823, 8K, 7K 778, 44K, 35K 28K video/mp4 3, 316K, 1K 8, 2498K, 20K 19K video/x-flv 7, 556K, 4K 16, 1262K, 21K 17K application/octet- 158, 28K, 5K 187, 58K, 11K 6K stream how many 70 K avg xfer size K/page (remember: “Top 1000”)
- 36. 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
- 37. 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
- 38. 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%)
- 39. Year-over-year:* • pages 231K (28%) heavier • images up 114K (23%) • video up 62K (67%) * “Top 1000” URLs, transfer size
- 40. quality of craft
- 48. Year-over-year:* • no significant change in adoption of best practices * “Top 1000” URLs
- 49. page speed
- 51. avg across ~900K measurements synthetic: 1 browser, 1 location, 1 network connection, etc.
- 52. window.onload ≠ user perception
- 53. 3.3 seconds window.onload 4.8 seconds 90% rendered
- 54. 2.0 seconds 88% rendered 5.2 seconds window.onload
- 55. “Speed Index” “average time at which visible parts of the page are displayed”
- 57. sneak preview Page Load Time, year-over-year • desktop: 3.5% faster • mobile: 30% faster Watch for Google blog post tomorrow!
- 58. Scorecard: • connections are faster • browsers getting faster • pages are heavier • best practices are flat • page load times are faster
- 59. April Fools! takeaways the Web is fast enough WE’RE DONE!
- 60. takeaways watch video growth better performance metric push best practices multiple CPUs caching
- 62. Steve Souders @souders stevesouders.com/docs/html5devconf-howfast-20130401-corrected.pptx
Editor's Notes
- #2: YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
- #3: GENERALLY SLOW IS BADhttp://www.flickr.com/photos/msvg/4476789745/
- #4: http://www.flickr.com/photos/silent_e/406944364/
- #5: SLOW IS BADhttp://www.flickr.com/photos/iwona_kellie/4867301081/
- #6: http://www.flickr.com/photos/stuant63/3159936302/
- #7: http://www.flickr.com/photos/cwinters/4561002487/
- #8: http://www.flickr.com/photos/bruce-camera/5244072368/
- #9: http://www.flickr.com/photos/94213193@N00/324472983/
- #10: http://www.flickr.com/photos/ngarkat/806196696/
- #11: http://www.flickr.com/photos/chadfust/999798684/
- #12: http://www.flickr.com/photos/matman/661077091/
- #13: http://www.flickr.com/photos/lizhaslam/6255976169/
- #14: http://www.flickr.com/photos/mommypants/3189190946/
- #15: http://www.flickr.com/photos/w4nd3rl0st/5944487713/
- #16: NOTICE HOW THE GIRL IS GIVING THE “GO FASTER” SIGNhttp://www.flickr.com/photos/blake/6062598298/
- #17: FAST CAN BE A LITTLE FRIGHTENINGhttp://www.flickr.com/photos/45777632@N06/6340839611/
- #18: http://www.flickr.com/photos/dullhunk/3930915541/
- #19: http://www.flickr.com/photos/sagamiono/5460242231/
- #21: AT&T is the nation's fastest 4G LTE network for your iPhone 5. As explained by kids, faster is better.
- #24: 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
- #27: “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
- #28: This was a ~5 second speed up.
- #29: contribute.barackobama.com
- #30: SOMETIMES FAST IS JUST BASED ON PERCEPTIONShttp://www.flickr.com/photos/photohype/288124023/
- #31: Specific to Akamai – how long it takes to download their resources. Could be affected by big clients moving on or off, causing/lessening congestion.
- #33: Actual carrier is hidden behind “US-1” etc.
- #35: based on Gomez RUM dataNot sure how they determine “perceived” render time.
- #36: based on Gomez RUM data
- #37: based on Gomez RUM data
- #38: http://www.flickr.com/photos/bigbaddie/4907862472/
- #39: 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
- #40: 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
- #41: 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
- #42: 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
- #44: 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
- #45: text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
- #46: text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
- #47: text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
- #48: 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%
- #50: 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
- #51: 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
- #52: I gathered this data by manual SQL queries looking at only the responses started before window.onload.
- #53: text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
- #54: text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
- #55: text/plain: 35K per page = 31K video + 3K fontsoctet-stream: 19K per page = 15K video + 4K fonts
- #56: I gathered this data by manual SQL queries looking at only the responses started before window.onload.
- #57: 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%
- #59: http://www.flickr.com/photos/rexboggs5/7608691710/
- #68: flickr.com/photos/wwarby/3296379139/
- #70: 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
- #72: http://www.webpagetest.org/video/compare.php?tests=121212_KK_VED-r%3A2-c%3A0&thumbSize=200&ival=1000&end=visual
- #73: http://www.webpagetest.org/video/compare.php?tests=121212_KF_V7Y-r%3A3-c%3A0&thumbSize=200&ival=1000&end=visual
- #74: The percentages indicate page rendering progress.https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
- #77: http://www.flickr.com/photos/churl/159610735/
- #78: http://upload.wikimedia.org/wikipedia/commons/e/ed/Jester-_Joker_Card001.jpg
- #80: flickr.com/photos/myklroventine/4062102754/