In Search of Speed
Download as PPTX, PDF1 like803 views
The document discusses the importance of web performance and its impact on business metrics, highlighting that faster websites lead to better user experiences, increased traffic, and higher revenues. It outlines various techniques for improving webpage speed, such as reducing HTTP requests, using CDNs, and optimizing frontend performance. The author emphasizes that while enhancing speed is challenging, it is essential for gaining a competitive advantage in the digital space.
In Search of Speed
- 1. insearchofspeedhttp://stevesouders.com/docs/speedgeeks-20091026.pptx &.zipDisclaimer: This content does not necessarily reflect the opinions of my employer.
- 2. Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-businessAptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspxStrangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-businessSproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-fasterHTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
- 4. 17%83%iGoogle, primed cachethe importance of frontend performance9%91%iGoogle, empty cache
- 5. Make fewer HTTP requestsUse a CDNAdd an Expires headerGzip componentsPut stylesheets at the topPut scripts at the bottomAvoid CSS expressionsMake JS and CSS externalReduce DNS lookupsMinify JSAvoid redirectsRemove duplicate scriptsConfigure ETagsMake AJAX cacheable14 Rules
- 6. Even Faster Web SitesSplitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS SelectorsUnderstanding Ajax performance..........Doug CrockfordCreating responsive web apps............Ben Galbraith, Dion AlmaerWriting efficient JavaScript.............Nicholas ZakasScaling with Comet.....................Dylan SchiemannGoing beyond gzipping...............Tony GentilcoreOptimizing images...................Stoyan Stefanov, Nicole Sullivan
- 7. Google+ 0.4 secsearches 0.6%
- 8. Yahoo!+ 0.4 sectraffic 5-9%
- 9. Bing+2 secrevenue 4.3%
- 11. Netflixoutbound bandwidth 43%
- 13. fast performance =better user experiencemore trafficmore revenuereduced costs
- 14. so...why don't more people do it?
- 17. if it wasn't hard everyone would do itthe hard is what makes it great
- 18. this year's theme:Fast by Default
- 19. Aptimize WAXconcatenate scriptsconcatenate stylesheetssprites, data: URIsfar future Expiresminify JS and CSSautomatically in real time
- 20. WAX on:http://sharepoint.microsoft.com# requests empty: 96 35# requests primed: 50 9scripts 7, stylesheets 12, images 25pages faster: 46-64% empty, 15-53% primed
- 21. Strangeloop Networks"typical ecommerce site"pages per visit: 11 16time on site: 24 30 minsconversions: 16%order value: 5.5%
- 22. Railsfar future Expiresconcatenate scriptsdomain shardingconfigure ETagspipeline: async scripts, spriting, minification, flushing
- 23. SproutCoreconcatenate scriptsconcatenate stylesheetsversioning (future Expires)stylesheets at the topscripts at the bottomminify JS & CSSremove dupe scripts
- 24. WPO
- 25. Why do some sites feel slow?
- 26. Google Mail
- 27. Google Docs
- 28. AOL
- 29. Twitter
- 30. ESPN
- 31. Best Buy
- 32. IKEA
- 33. CNN
- 35. Search
- 36. WebPagetest.orgVA, UK, NZIE7, IE8Dial, DSL, FIOSempty, empty & primedquad corePat Meenan (AOL)
- 37. News
- 38. Shopping
- 39. Sports
- 40. Progressive Enhancementdeliver HTMLdefer JSavoid DOMdecorate later
- 42. recent news
- 43. finds BG imagesgroups into spritesgenerates spriterecomputes BG posinjects into pagehttp://spriteme.org/
- 44. Browserscope
- 46. @font-faceblocks rendering in IE if below SCRIPT tagdeclare above all SCRIPTs
- 50. focus on the frontendrun YSlow and Page Speed!progressive enhancement progressive renderingtakeaways
- 51. SPEED is the next competitive advantageuse it...before someone else does
- 53. Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-businessAptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspxStrangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-businessSproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-fasterHTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
Editor's Notes
- #2: YtseJam Photography, "Going nowhere fast", http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
- #8: Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
- #9: Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
- #10: Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
- #11: Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
- #12: Google, Bing: http://en.oreilly.com/velocity2009/public/schedule/detail/8523 Yahoo!: http://www.slideshare.net/stoyan/yslow-20-presentationShopzilla: http://en.oreilly.com/velocity2009/public/schedule/detail/7709Netflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
- #13: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business0.21% decrease even 5 weeks after the delay was removed – users perception of a site is learnedNetflix: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
- #17: http://www.youtube.com/watch?v=m888nlVxZu8
- #20: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
- #21: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
- #22: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
- #24: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster
- #27: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #28: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #29: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #30: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #31: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #32: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #33: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #34: 3000 kbps up, 600kbps downsingle CPU Thinkpad X61Windows XPIE 7
- #36: http://stevesouders.com/p3/index.php?sites=google-search,yahoo-search,bing,ask,aol-search&ival=500
- #38: http://stevesouders.com/p3/index.php?sites=yahoo-news,cnn,cnet,google-news,nytimes,msnbc,foxnews&ival=1000
- #39: http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&ival=2000
- #40: http://stevesouders.com/p3/index.php?sites=ebay,amazon,netflix,target,bestbuy,ikea&ival=2000
- #46: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/
- #47: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/