Page Performance
- 1. Webdev Best Practices Al Torreno
- 3. Fast enough? "Everyone is on High Speed"
- 5. Shopzilla • Reduced avg page load time from 6s to 1.2s, increased revenue by 12% and page views by 25%
- 6. Amazon • Increased revenue by 1% for every 100ms improvement
- 7. Yahoo! • Increased traffic by 9% for every 400ms improvement
- 9. • Bandwidth is NOT the only bottleneck to website performance
- 10. • Bandwidth is NOT the only bottleneck to website performance • Improvements to performance = increased traffic + revenue
- 11. Corp AFKLM login: 20 requests, 960.7 KB, 1.68s AA login: 24 requests, 951.7 KB, 1.94s
- 12. PdC homepage: 45 requests, 802.8 KB, 2.08s login page: 29 requests, 860.9 KB, 1.87s landing page: 100 requests, 329.2 KB, 4.67s
- 13. eBGT Hyatt Buy MV:50 requests, 544.1 KB, 2.8s JetBlue Buy MV: 61 requests, 642.1 KB, 4.83s
- 14. How do we compare?
- 19. Homepage Requests Payload Load Corp 20 960K 1.71s eBGT 50 544K 2.8s PdC 45 802K 2.1s Amazon 45 288K 1.63s Apple 43 1.1M 1.27s Facebook 15 162K 0.772s Google 8 157K 0.672s
- 20. Okay, but how?
- 21. Steve Souders Web performance guru
- 22. optimize front-end performance first, that's where 80% or more of the end-user response time is spent.
- 25. Online Resources
- 26. Online Resources • Google Page Speed
- 27. Online Resources • Google Page Speed • Yahoo Exceptional Performance
- 28. The Tools
- 31. Google Page Speed • Plugin for FF and Chrome
- 32. Google Page Speed • Plugin for FF and Chrome • Analyzes and grades page
- 33. Google Page Speed • Plugin for FF and Chrome • Analyzes and grades page • Checks against best practices
- 34. Google Page Speed • Plugin for FF and Chrome • Analyzes and grades page • Checks against best practices • Provides recommendations
- 37. Site Score (100) Corp (AA) 74 PdC 63 eBGT (Hyatt) 83 Apple 80 Amazon 93 Facebook 98 Google 100
- 39. http Waterfall
- 40. Parallel loading • According to the http 1.1 spec, a single-user client SHOULD NOT maintain more than 2 connections with a single hostname.
- 41. Scripts block parallel downloads
- 42. Scripts block parallel downloads
- 43. http Waterfall
- 46. Minimize http requests • Combine js into a single file
- 47. Minimize http requests • Combine js into a single file • Combine CSS into a single file
- 48. Minimize http requests • Combine js into a single file • Combine CSS into a single file • Combine images into a sprite
- 49. Sprites
- 50. Sprites <div class="error">Oh gawd</div> <h1>Lorem Ipsum</h1> .error{background:url(sprite.png) no-repeat 0 -300px} h1{background:url(sprite.png) no- repeat 0 -250px}
- 53. Round up
- 54. Round up • Minimize redirects
- 55. Round up • Minimize redirects • Remove bad requests (aka 404)
- 56. Questions?
- 57. Reduce payload
- 58. Reduce payload • Minify js and css
- 59. Reduce payload • Minify js and css • gzip
- 60. Reduce payload • Minify js and css • gzip • Optimize/compress graphics
- 61. Parallelize downloads across multiple domains
- 62. Parallel loading • According to the http 1.1 spec, a single-user client SHOULD NOT maintain more than 2 connections with a single hostname.
- 63. So, let's load assets from multiple hosts
- 65. • dynamic content from buy.points.com
- 66. • dynamic content from buy.points.com • images from static1.points.com and static2.points.com
- 67. • dynamic content from buy.points.com • images from static1.points.com and static2.points.com • in IE6, 6 parallel downloads
- 68. • dynamic content from buy.points.com • images from static1.points.com and static2.points.com • in IE6, 6 parallel downloads • in FF5, 18 parallel downloads
- 69. • dynamic content from buy.points.com • images from static1.points.com and static2.points.com • in IE6, 6 parallel downloads • in FF5, 18 parallel downloads • FTW
- 70. Questions?
- 71. Optimize Caching
- 72. Optimize Caching • Doesn't help us with speed of initial page • Helps with speed of subsequent pages / subsequent visits
- 73. Caching 101
- 74. Caching 101 • Homepage, first visit: Must request all static resources.
- 75. Caching 101 • Homepage, first visit: Must request all static resources. • Images/CSS/JS/etc stored in browser cache
- 76. Caching 101 • Homepage, first visit: Must request all static resources. • Images/CSS/JS/etc stored in browser cache • Subsequent visits: Browser (somehow) determines whether to reuse cached version or re-request asset
- 77. Conditional GET • browser: "I've got this asset in my cache, is it the most up-to-date?!" • server: "yup, it's good (304)" • Or • server: "no, here's a more up-to-date version"
- 79. Gotcha
- 80. Gotcha • If none of these response headers are set, the browser must determine if it can use the cached version
- 81. Gotcha • If none of these response headers are set, the browser must determine if it can use the cached version • Unnecessarily re-requesting static assets makes website slower
- 82. Gotcha • If none of these response headers are set, the browser must determine if it can use the cached version • Unnecessarily re-requesting static assets makes website slower • Conditional GETs still take up http requests
- 83. Aggressively cache all static resources
- 85. Use fingerprinting when a static resource needs to change
- 97. Provides user feedback "Did this website crash my browser?"
- 99. Scripts at the bottom
- 100. Stylesheets up top Scripts at the bottom
- 104. No inline anything
- 105. No inline anything
- 106. No inline anything • No inline styles
- 107. No inline anything • No inline styles • No inline scripts
- 108. No inline anything • No inline styles • No inline scripts • blocks progressive rendering
- 109. No inline anything • No inline styles • No inline scripts • blocks progressive rendering • blocks parallel downloads
- 110. LABjs • Framework for asynchronous load of javascript • Able to load js files in parallel • Ensures proper execution order
- 111. LABjs in action
- 112. LABjs in action • Onboarding for IcelandAir
- 113. LABjs in action • Onboarding for IcelandAir • Lots of javascript
- 114. LABjs in action • Onboarding for IcelandAir • Lots of javascript • Their homepage: 32 requests, 795.6 KB, 12.42s
- 115. LABjs in action • Onboarding for IcelandAir • Lots of javascript • Their homepage: 32 requests, 795.6 KB, 12.42s • eBGT Buy MV: 30 requests, 721.4 KB, 2.69s
- 116. Evil • css expressions • iframes • document.write()
- 117. Cookies 101 GET /resources/images/pdc/ signupLogin/Background_Shadow.gif HTTP/1.1 Host: www.points.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; Referer: https://www.points.com/
- 118. Gotcha Cookies are sent with every http request
- 119. Serve static resources from a cookieless domain e.g. images.points.com
- 120. Reduce DNS lookups i.e. Don't go overboard
- 121. Reduce DNS lookups
- 122. Reduce DNS lookups • ajax.googleapis.com
- 123. Reduce DNS lookups • ajax.googleapis.com • buy.points.com
- 124. Reduce DNS lookups • ajax.googleapis.com • buy.points.com • images1.points.com
- 125. Reduce DNS lookups • ajax.googleapis.com • buy.points.com • images1.points.com • images2.points.com
- 126. Reduce DNS lookups • ajax.googleapis.com • buy.points.com • images1.points.com • images2.points.com • s3.aws.amazon.com
- 127. DNS lookups are expensive
- 128. Resources • Google page speed : • code.google.com/speed/page-speed/ • Yahoo exceptional performance • developer.yahoo.com/performance/ • Steve Souders blog • stevesouders.com/blog/ • LABjs • labjs.com
Editor's Notes
- #2: \n\n
- #3: \n\n
- #4: \n\n
- #5: \n\n
- #6: \n\n
- #7: \n\n
- #8: \n\n
- #9: \n\n
- #10: \n\n
- #11: \n\n
- #12: \n\n
- #13: \n\n
- #14: \n\n
- #15: \n\n
- #16: \n\n
- #17: \n\n
- #18: \n\n
- #19: \n\n
- #20: \n\n
- #21: \n\n
- #22: \n\n
- #23: \n\n
- #24: \n\n
- #25: \n\n
- #26: \n\n
- #27: \n\n
- #28: \n\n
- #29: \n\n
- #30: \n\n
- #31: \n\n
- #32: \n\n
- #33: \n\n
- #34: \n\n
- #35: \n\n
- #36: \n\n
- #37: \n\n
- #38: \n\n
- #39: \n\n
- #40: \n\n
- #41: \n\n
- #42: \n\n
- #43: \n\n
- #44: \n\n
- #45: \n\n
- #46: \n\n
- #47: \n\n
- #48: \n\n
- #49: \n\n
- #50: \n\n
- #51: \n\n
- #52: \n\n
- #53: \n\n
- #54: \n\n
- #55: \n\n
- #56: \n\n
- #57: \n\n
- #58: \n\n
- #59: \n\n
- #60: \n\n
- #61: \n\n
- #62: \n\n
- #63: \n\n
- #64: \n\n
- #65: \n\n
- #66: \n\n
- #67: \n\n
- #68: \n\n
- #69: \n\n
- #70: \n\n
- #71: \n\n
- #72: \n\n
- #73: \n\n
- #74: \n\n
- #75: \n\n
- #76: \n\n
- #77: \n\n
- #78: \n\n
- #79: \n\n
- #80: \n\n
- #81: \n\n
- #82: \n\n
- #83: \n\n
- #84: \n\n
- #85: \n\n
- #86: \n\n
- #87: \n\n