Downloaded 98 times
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevFest Strasbourg 2025] - NodeJs Can do that !!](https://cdn.slidesharecdn.com/ss_thumbnails/devfeststrasbourg2025-nodejscandothat-251127142731-da65b6fd-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...](https://cdn.slidesharecdn.com/ss_thumbnails/fs-digitalaccessibilitywhydevelopersneedtoknowandcarein2025-251127011019-0674441d-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shade...](https://cdn.slidesharecdn.com/ss_thumbnails/md-craftingimmersiveuiwithe2eandagslshaderveronicaputrianggraini-251124030840-0c677f44-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] AI for the Underdogs: Innovation for Sma...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-aifortheunderdogsinnovationforsmallbusinesses-251124030839-72a599a4-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
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 thenation's fastest 4G LTE network for your iPhone 5. As explained by kids, faster is better.
- 18.
- 19.
- 20. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 secondsoff 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 thenew 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.
- 24. Akamai State of theInternet Q3 2012 akamai.com/stateoftheinternet/
- 25.
- 26. YoY: +68% +131%+30% akamai.com/stateoftheinternet/
- 27. Year-over-year: • global speedsare 4% faster • US speeds are 18% faster • US mobile speeds are 30- 131% faster
- 28.
- 29.
- 30.
- 31.
- 32. 327K (32%) biggerin one year “All” URLs (70K to 300K URLs) sample size may affect results httparchive.org/trends.php?s=All
- 33. “Top 1000” URLs 10/1spike 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.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. Year-over-year:* • no significantchange in adoption of best practices * “Top 1000” URLs
- 49.
- 50.
- 51. avg across ~900Kmeasurements synthetic: 1 browser, 1 location, 1 network connection, etc.
- 52. window.onload ≠ user perception
- 53.
- 54. 2.0 seconds 88% rendered 5.2seconds window.onload
- 55. “Speed Index” “average timeat which visible parts of the page are displayed”
- 56.
- 57. sneak preview Page LoadTime, 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 betterperformance 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/