How to make your <br />website blazing fast<br />@joshfraser<br />
Slow websites suck<br />
40% of people will abandon a site that take more than 3 seconds to load<br />
Slow websites lose money<br />
Amazon loses 1% of sales<br />for every 100ms of latency<br />
Google loses 20% of their traffic for every 500ms of latency<br />
Google penalizes the PageRank of slow websites<br />
80-90% of performance is front-end<br />
Yahoo increased their traffic by 9% with a 400ms speed improvement<br />
Shopzilla reduced their load time from 7 seconds to 2.  Traffic increased 25% and revenue increased 12%  <br />
Waterfall view of 500startups.com<br />
Time<br />
17% back-end<br />83% front-end<br />
Onload<br />DOM ready<br />Finished <br />
Initial connection<br />Time to 1st Byte<br />Content download<br />DNS lookup<br />
Recognize this?<br />
3 guidelines<br /><ul><li> Make things smaller
 Move them closer
 Load them smarter</li></li></ul><li>Make things smaller<br />
Gzip<br /><ul><li> Reduces size by ~70%!
 ~90% of traffic claims support
 Ignore the Accept-encoding header and use a white-list of supporting browsers instead
Gzipped JS in an iframe to test</li></li></ul><li>Strip white space and comments<br /><ul><li>YUICompressor
JS min
 CSS min
 HTML (watch out for textareas)</li></li></ul><li>Optimize images<br /><ul><li> Lossless vs. lossy
 Strip hidden EXIF data
 Use jpegtran & pngcrush / smush.it
 Resize for mobile devices
WebP for Chrome & Opera</li></li></ul><li>WebP<br />
Move things closer<br />
Use a CDN for your static resources<br /><ul><li> You can’t change the speed of light
 Popular CDN’s:
Akamai
 Level3
 Limelight
Cloudfront is the most startup friendly
 Use Google’s CDN to host your JS libraries
 Likely local browser cache hit
 Fast & free CDN
 Lots of popular libraries available</li></li></ul><li>Load things smarter<br />
Upcoming SlideShare
Loading in...5
×

How to make your website blazing fast

896

Published on

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

No Downloads
Views
Total Views
896
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "How to make your website blazing fast"

  1. 1. How to make your <br />website blazing fast<br />@joshfraser<br />
  2. 2. Slow websites suck<br />
  3. 3. 40% of people will abandon a site that take more than 3 seconds to load<br />
  4. 4. Slow websites lose money<br />
  5. 5. Amazon loses 1% of sales<br />for every 100ms of latency<br />
  6. 6. Google loses 20% of their traffic for every 500ms of latency<br />
  7. 7. Google penalizes the PageRank of slow websites<br />
  8. 8. 80-90% of performance is front-end<br />
  9. 9. Yahoo increased their traffic by 9% with a 400ms speed improvement<br />
  10. 10. Shopzilla reduced their load time from 7 seconds to 2. Traffic increased 25% and revenue increased 12% <br />
  11. 11. Waterfall view of 500startups.com<br />
  12. 12. Time<br />
  13. 13. 17% back-end<br />83% front-end<br />
  14. 14. Onload<br />DOM ready<br />Finished <br />
  15. 15. Initial connection<br />Time to 1st Byte<br />Content download<br />DNS lookup<br />
  16. 16. Recognize this?<br />
  17. 17. 3 guidelines<br /><ul><li> Make things smaller
  18. 18. Move them closer
  19. 19. Load them smarter</li></li></ul><li>Make things smaller<br />
  20. 20. Gzip<br /><ul><li> Reduces size by ~70%!
  21. 21. ~90% of traffic claims support
  22. 22. Ignore the Accept-encoding header and use a white-list of supporting browsers instead
  23. 23. Gzipped JS in an iframe to test</li></li></ul><li>Strip white space and comments<br /><ul><li>YUICompressor
  24. 24. JS min
  25. 25. CSS min
  26. 26. HTML (watch out for textareas)</li></li></ul><li>Optimize images<br /><ul><li> Lossless vs. lossy
  27. 27. Strip hidden EXIF data
  28. 28. Use jpegtran & pngcrush / smush.it
  29. 29. Resize for mobile devices
  30. 30. WebP for Chrome & Opera</li></li></ul><li>WebP<br />
  31. 31. Move things closer<br />
  32. 32.
  33. 33. Use a CDN for your static resources<br /><ul><li> You can’t change the speed of light
  34. 34. Popular CDN’s:
  35. 35. Akamai
  36. 36. Level3
  37. 37. Limelight
  38. 38. Cloudfront is the most startup friendly
  39. 39. Use Google’s CDN to host your JS libraries
  40. 40. Likely local browser cache hit
  41. 41. Fast & free CDN
  42. 42. Lots of popular libraries available</li></li></ul><li>Load things smarter<br />
  43. 43. The fastest request is the <br />one that never happens<br />
  44. 44. Add cache-control headers<br /><ul><li> Set your expires headers to never expire / expire in a year
  45. 45. Rename files when you change them
  46. 46. Add GET variables to your static resources to tell browser to download new version </li></ul> Ex: style.css?ts=1311496509<br />
  47. 47. Reduce HTTP requests<br />
  48. 48. Setup<br />Downloading<br />
  49. 49. Reduce HTTP requests<br /><ul><li> Combine CSS & JS files
  50. 50. Use image sprites
  51. 51. Use data URI’s for images
  52. 52. Only for small images
  53. 53. Not supported in all browsers
  54. 54. Keep an eye on 3rd party scripts</li></li></ul><li>Help the browser render faster<br /><ul><li> Add width / height attr to IMG tags
  55. 55. Put CSS at the top (inside <head>)
  56. 56. Allows for progressive rendering
  57. 57. Put JS at the bottom (before </body)
  58. 58. Script tags block parallel downloads
  59. 59. Improves the perceived performance</li></li></ul><li>Avoid web fonts<br />
  60. 60. Avoid web fonts<br />
  61. 61. Other tricks<br /><ul><li> Use multiple domains for parallel downloads
  62. 62. Minimize use of iframes & cookies
  63. 63. Keep an eye on 3rd party scripts
  64. 64. Defer JavaScript
  65. 65. Avoid 404’s and redirects</li></li></ul><li>
  66. 66. Using localStorage on Mobile<br /><ul><li> Used by Google & Facebook
  67. 67. Gives you dedicated cache space
  68. 68. Get 5MB dedicated space per domain
  69. 69. Reduce HTTP requests
  70. 70. Include static resources w/ initial HTML
  71. 71. Use cookies to track which resources you have in local cache</li></li></ul><li>Using localStorage on Mobile<br />
  72. 72. Using localStorage on Mobile<br />2.2x faster<br />
  73. 73. Resources<br /><ul><li>WebPageTest
  74. 74. YSlow and PageSpeed
  75. 75. stevesouders.com
  76. 76. torbit.com</li></li></ul><li>torbit.com<br />Invite code: 500startups <br />Coupon: 500fastwebsites <br />for 50% off for life!<br />
  77. 77. @joshfraser<br />josh@torbit.com<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×