How to make your website blazing fast
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,172
On Slideshare
1,167
From Embeds
5
Number of Embeds
1

Actions

Shares
Downloads
16
Comments
0
Likes
1

Embeds 5

http://www.scoop.it 5

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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