SlideShare a Scribd company logo

Page Performance

•Download as KEY, PDF•
•
A
atorreno

Points.com webdev lunch and learn #2: Page performance. What makes websites slow, how to make them faster.

Related slideshows

Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
 
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...
 
BTV PHP - Building Fast Websites
BTV PHP - Building Fast WebsitesBTV PHP - Building Fast Websites
BTV PHP - Building Fast Websites
 
1 of 128
Webdev Best Practices Al Torreno
Website Peformance
Fast enough? "Everyone is on High Speed"
From webperformancetoday.com
Shopzilla • Reduced avg page load time from 6s to 1.2s, increased revenue by 12% and page views by 25%
Amazon • Increased revenue by 1% for every 100ms improvement
Yahoo! • Increased traffic by 9% for every 400ms improvement
Page Performance
• Bandwidth is NOT the only bottleneck to website performance
• Bandwidth is NOT the only bottleneck to website performance • Improvements to performance = increased traffic + revenue
Corp AFKLM login: 20 requests, 960.7 KB, 1.68s AA login: 24 requests, 951.7 KB, 1.94s
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
eBGT Hyatt Buy MV:50 requests, 544.1 KB, 2.8s JetBlue Buy MV: 61 requests, 642.1 KB, 4.83s
How do we compare?
Page Performance
Page Performance
Page Performance
Page Performance
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
Okay, but how?
Steve Souders Web performance guru
optimize front-end performance first, that's where 80% or more of the end-user response time is spent.
Page Performance
Page Performance
Online Resources
Online Resources • Google Page Speed
Online Resources • Google Page Speed • Yahoo Exceptional Performance
The Tools
Firebug net panel
Google Page Speed
Google Page Speed • Plugin for FF and Chrome
Google Page Speed • Plugin for FF and Chrome • Analyzes and grades page
Google Page Speed • Plugin for FF and Chrome • Analyzes and grades page • Checks against best practices
Google Page Speed • Plugin for FF and Chrome • Analyzes and grades page • Checks against best practices • Provides recommendations
Page Performance
Page Performance
Site Score (100) Corp (AA) 74 PdC 63 eBGT (Hyatt) 83 Apple 80 Amazon 93 Facebook 98 Google 100
First, some terminology
http Waterfall
Parallel loading • According to the http 1.1 spec, a single-user client SHOULD NOT maintain more than 2 connections with a single hostname.
Scripts block parallel downloads
Scripts block parallel downloads
http Waterfall
Minimize http requests
Minimize http requests
Minimize http requests • Combine js into a single file
Minimize http requests • Combine js into a single file • Combine CSS into a single file
Minimize http requests • Combine js into a single file • Combine CSS into a single file • Combine images into a sprite
Sprites
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}
Page Performance
Page Performance
Round up
Round up • Minimize redirects
Round up • Minimize redirects • Remove bad requests (aka 404)
Questions?
Reduce payload
Reduce payload • Minify js and css
Reduce payload • Minify js and css • gzip
Reduce payload • Minify js and css • gzip • Optimize/compress graphics
Parallelize downloads across multiple domains
Parallel loading • According to the http 1.1 spec, a single-user client SHOULD NOT maintain more than 2 connections with a single hostname.
So, let's load assets from multiple hosts
Page Performance
• dynamic content from buy.points.com
• dynamic content from buy.points.com • images from static1.points.com and static2.points.com
• dynamic content from buy.points.com • images from static1.points.com and static2.points.com • in IE6, 6 parallel downloads
• 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
• 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
Questions?
Optimize Caching
Optimize Caching • Doesn't help us with speed of initial page • Helps with speed of subsequent pages / subsequent visits
Caching 101
Caching 101 • Homepage, first visit: Must request all static resources.
Caching 101 • Homepage, first visit: Must request all static resources. • Images/CSS/JS/etc stored in browser cache
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
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"
Response headers Expires Cache-Control:max-age Last-modified Etag
Gotcha
Gotcha • If none of these response headers are set, the browser must determine if it can use the cached version
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
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
Aggressively cache all static resources
Response headers Expires Cache-Control:max-age Last-modified Etag
Use fingerprinting when a static resource needs to change
Fingerprinting <script src="coolmenu.js"></script>
Fingerprinting <script src="coolmenu_v2.js"></ script>
Scripts block progressive rendering
Page Performance
Page Performance
Page Performance
Page Performance
Page Performance
Page Performance
Page Performance
Page Performance
Provides user feedback "Did this website crash my browser?"
Improves perceived speed
Scripts at the bottom
Stylesheets up top Scripts at the bottom
<html> <head> </head> <body> </body> </html>
<html> <head> </head> <body> </body> </html>
<html> <head> </head> <body> </body> </html>
No inline anything
No inline anything
No inline anything • No inline styles
No inline anything • No inline styles • No inline scripts
No inline anything • No inline styles • No inline scripts • blocks progressive rendering
No inline anything • No inline styles • No inline scripts • blocks progressive rendering • blocks parallel downloads
LABjs • Framework for asynchronous load of javascript • Able to load js files in parallel • Ensures proper execution order
LABjs in action
LABjs in action • Onboarding for IcelandAir
LABjs in action • Onboarding for IcelandAir • Lots of javascript
LABjs in action • Onboarding for IcelandAir • Lots of javascript • Their homepage: 32 requests, 795.6 KB, 12.42s
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
Evil • css expressions • iframes • document.write()
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/
Gotcha Cookies are sent with every http request
Serve static resources from a cookieless domain e.g. images.points.com
Reduce DNS lookups i.e. Don't go overboard
Reduce DNS lookups
Reduce DNS lookups • ajax.googleapis.com
Reduce DNS lookups • ajax.googleapis.com • buy.points.com
Reduce DNS lookups • ajax.googleapis.com • buy.points.com • images1.points.com
Reduce DNS lookups • ajax.googleapis.com • buy.points.com • images1.points.com • images2.points.com
Reduce DNS lookups • ajax.googleapis.com • buy.points.com • images1.points.com • images2.points.com • s3.aws.amazon.com
DNS lookups are expensive
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

More Related Content

Page Performance

Editor's Notes

  1. \n\n
  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