Page Performance

1,453 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,453
On SlideShare
0
From Embeds
0
Number of Embeds
848
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • Page Performance

    1. 1. Webdev Best Practices Al Torreno
    2. 2. Website Peformance
    3. 3. Fast enough?"Everyone is on High Speed"
    4. 4. From webperformancetoday.com
    5. 5. Shopzilla• Reduced avg page load time from 6s to 1.2s, increased revenue by 12% and page views by 25%
    6. 6. Amazon• Increased revenue by 1% for every 100ms improvement
    7. 7. Yahoo!• Increased traffic by 9% for every 400ms improvement
    8. 8. • Bandwidth is NOT the only bottleneck to website performance
    9. 9. • Bandwidth is NOT the only bottleneck to website performance• Improvements to performance = increased traffic + revenue
    10. 10. CorpAFKLM login: 20 requests, 960.7 KB, 1.68s AA login: 24 requests, 951.7 KB, 1.94s
    11. 11. PdC homepage: 45 requests, 802.8 KB, 2.08s login page: 29 requests, 860.9 KB, 1.87slanding page: 100 requests, 329.2 KB, 4.67s
    12. 12. eBGT Hyatt Buy MV:50 requests, 544.1 KB, 2.8sJetBlue Buy MV: 61 requests, 642.1 KB, 4.83s
    13. 13. How do we compare?
    14. 14. 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.27sFacebook 15 162K 0.772s Google 8 157K 0.672s
    15. 15. Okay, but how?
    16. 16. Steve Souders Web performance guru
    17. 17. optimize front-end performance first, thatswhere 80% or more of the end-user responsetime is spent.
    18. 18. Online Resources
    19. 19. Online Resources• Google Page Speed
    20. 20. Online Resources• Google Page Speed• Yahoo Exceptional Performance
    21. 21. The Tools
    22. 22. Firebug net panel
    23. 23. Google Page Speed
    24. 24. Google Page Speed• Plugin for FF and Chrome
    25. 25. Google Page Speed• Plugin for FF and Chrome• Analyzes and grades page
    26. 26. Google Page Speed• Plugin for FF and Chrome• Analyzes and grades page• Checks against best practices
    27. 27. Google Page Speed• Plugin for FF and Chrome• Analyzes and grades page• Checks against best practices• Provides recommendations
    28. 28. Site Score (100) Corp (AA) 74 PdC 63eBGT (Hyatt) 83 Apple 80 Amazon 93 Facebook 98 Google 100
    29. 29. First, someterminology
    30. 30. http Waterfall
    31. 31. Parallel loading• According to the http 1.1 spec, a single-user client SHOULD NOT maintain more than 2 connections with a single hostname.
    32. 32. Scripts block parallel downloads
    33. 33. Scripts block parallel downloads
    34. 34. http Waterfall
    35. 35. Minimize http requests
    36. 36. Minimize http requests
    37. 37. Minimize http requests• Combine js into a single file
    38. 38. Minimize http requests• Combine js into a single file• Combine CSS into a single file
    39. 39. Minimize http requests• Combine js into a single file• Combine CSS into a single file• Combine images into a sprite
    40. 40. Sprites
    41. 41. 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}
    42. 42. Round up
    43. 43. Round up• Minimize redirects
    44. 44. Round up• Minimize redirects• Remove bad requests (aka 404)
    45. 45. Questions?
    46. 46. Reduce payload
    47. 47. Reduce payload• Minify js and css
    48. 48. Reduce payload• Minify js and css• gzip
    49. 49. Reduce payload• Minify js and css• gzip• Optimize/compress graphics
    50. 50. Parallelize downloads across multiple domains
    51. 51. Parallel loading• According to the http 1.1 spec, a single-user client SHOULD NOT maintain more than 2 connections with a single hostname.
    52. 52. So, lets load assetsfrom multiple hosts
    53. 53. • dynamic content from buy.points.com
    54. 54. • dynamic content from buy.points.com• images from static1.points.com and static2.points.com
    55. 55. • dynamic content from buy.points.com• images from static1.points.com and static2.points.com• in IE6, 6 parallel downloads
    56. 56. • 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
    57. 57. • 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
    58. 58. Questions?
    59. 59. Optimize Caching
    60. 60. Optimize Caching• Doesnt help us with speed of initial page• Helps with speed of subsequent pages / subsequent visits
    61. 61. Caching 101
    62. 62. Caching 101• Homepage, first visit: Must request all static resources.
    63. 63. Caching 101• Homepage, first visit: Must request all static resources.• Images/CSS/JS/etc stored in browser cache
    64. 64. 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
    65. 65. Conditional GET• browser: "Ive got this asset in my cache, is it the most up-to-date?!"• server: "yup, its good (304)"• Or• server: "no, heres a more up-to-date version"
    66. 66. Response headersExpiresCache-Control:max-ageLast-modifiedEtag
    67. 67. Gotcha
    68. 68. Gotcha• If none of these response headers are set, the browser must determine if it can use the cached version
    69. 69. 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
    70. 70. 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
    71. 71. Aggressively cache all static resources
    72. 72. Response headersExpiresCache-Control:max-ageLast-modifiedEtag
    73. 73. Use fingerprinting when a static resource needs to change
    74. 74. Fingerprinting<script src="coolmenu.js"></script>
    75. 75. Fingerprinting<script src="coolmenu_v2.js"></script>
    76. 76. Scripts blockprogressive rendering
    77. 77. Provides user feedback"Did this website crash my browser?"
    78. 78. Improves perceived speed
    79. 79. Scripts at the bottom
    80. 80. Stylesheets up topScripts at the bottom
    81. 81. <html><head></head><body></body></html>
    82. 82. <html><head></head><body></body></html>
    83. 83. <html><head></head><body></body></html>
    84. 84. No inline anything
    85. 85. No inline anything
    86. 86. No inline anything• No inline styles
    87. 87. No inline anything• No inline styles• No inline scripts
    88. 88. No inline anything• No inline styles• No inline scripts• blocks progressive rendering
    89. 89. No inline anything• No inline styles• No inline scripts• blocks progressive rendering• blocks parallel downloads
    90. 90. LABjs• Framework for asynchronous load of javascript• Able to load js files in parallel• Ensures proper execution order
    91. 91. LABjs in action
    92. 92. LABjs in action• Onboarding for IcelandAir
    93. 93. LABjs in action• Onboarding for IcelandAir• Lots of javascript
    94. 94. LABjs in action• Onboarding for IcelandAir• Lots of javascript• Their homepage: 32 requests, 795.6 KB, 12.42s
    95. 95. 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
    96. 96. Evil• css expressions• iframes• document.write()
    97. 97. Cookies 101GET /resources/images/pdc/signupLogin/Background_Shadow.gifHTTP/1.1Host: www.points.comUser-Agent: Mozilla/5.0 (Windows;U; Windows NT 6.1; en-US;Referer: https://www.points.com/
    98. 98. GotchaCookies are sent with every http request
    99. 99. Serve static resources from a cookieless domain e.g. images.points.com
    100. 100. Reduce DNS lookups i.e. Dont go overboard
    101. 101. Reduce DNS lookups
    102. 102. Reduce DNS lookups• ajax.googleapis.com
    103. 103. Reduce DNS lookups• ajax.googleapis.com• buy.points.com
    104. 104. Reduce DNS lookups• ajax.googleapis.com• buy.points.com• images1.points.com
    105. 105. Reduce DNS lookups• ajax.googleapis.com• buy.points.com• images1.points.com• images2.points.com
    106. 106. Reduce DNS lookups• ajax.googleapis.com• buy.points.com• images1.points.com• images2.points.com• s3.aws.amazon.com
    107. 107. DNS lookups are expensive
    108. 108. 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

    ×