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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to make your website blazing fast

862
views

Published on

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

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

×