How to make your website blazing fast
Download as PPTX, PDF
1 like934 views
This document provides tips for making websites load faster, which can improve user experience and business metrics like conversion rates and revenue. It discusses how front-end performance impacts load times more than back-end performance. Specific recommendations include gzipping files, stripping unnecessary content from files, optimizing images, using a content delivery network, reducing HTTP requests by combining files, and leveraging browser caching with far future expires headers and cache-busting filenames. Mobile performance can also be improved by leveraging the browser localStorage API to cache static resources.
How to make your website blazing fast
- 1. How to make your website blazing fast@joshfraser
- 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 salesfor 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
- 15. Initial connectionTime to 1st ByteContent downloadDNS lookup
- 16. Recognize this?
- 17. 3 guidelines Make things smaller
- 18. Move them closer
- 19. Load them smarterMake 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 testStrip white space and commentsYUICompressor
- 24. JS min
- 25. CSS min
- 26. HTML (watch out for textareas)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 & OperaWebP
- 33. Use a CDN for your static resources You cant change the speed of light
- 34. Popular CDNs:
- 35. Akamai
- 36. Level3
- 37. Limelight
- 38. Cloudfront is the most startup friendly
- 39. Use Googles CDN to host your JS libraries
- 40. Likely local browser cache hit
- 41. Fast & free CDN
- 42. Lots of popular libraries availableLoad 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
- 48. SetupDownloading
- 49. Reduce HTTP requests Combine CSS & JS files
- 50. Use image sprites
- 51. Use data URIs for images
- 52. Only for small images
- 53. Not supported in all browsers
- 54. Keep an eye on 3rd party scriptsHelp 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 performanceAvoid 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 404s 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 cacheUsing localStorage on Mobile
- 72. Using localStorage on Mobile2.2x faster
- 75. stevesouders.com
- 76. torbit.comtorbit.comInvite code: 500startups Coupon: 500fastwebsites for 50% off for life!