How to make your website blazing fast
Download as PPTX, PDF1 like936 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 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 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 URI’s 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 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 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!