Ultimate Guide to Website Performance

There are so many ways to speed up your site. Don’t you wish every web performance tip was in one place? That’s what we thought too, so we put them all in one place. Use this Ultimate Guide to Website Performance as a reference.

HTML

✨ Minify HTML
☄️ Order your styles and scripts for pagespeed
⚡️ Eliminate render-blocking resources
🌟 Minimize layout thrashing
🎉 Prioritize resources
✨ Preload critical assets to improve loading speed
💥 Establish network connections early
⚡️ Prefetch resources
🌟 Implement adaptive serving

CSS

⭐️ Minify CSS
✨ Remove unused CSS
💥 Defer non-critical CSS
⚡️ Minimize CSS requests by combining external CSS
🚀 Optimize CSS background images with media queries
⭐️ Avoid CSS inside the body tag
☄️ Inline critical CSS
✨ Avoid expensive styles
💫 Optimize CSS length

Images

✨ Choose the right image format
💫 Choose the correct level of compression
⭐️ Use Imagemin to compress images
💥 Defer offscreen images
⚡️ Properly size images
✨ Replace animated gifs with video
🎉 Serve responsive images
⚡️ Serve images with correct dimensions
🌟 Use WebP images
⚡️ Use AVIF images
🎊 Use image CDNs to optimize images
✨ Use lazy-loading
🚀 Lazy-loading video
⚡️ Use lazysizes to lazy-load images
⭐️ Compress JPEG images
🔥 Optimize PNG images
✨ Optimize SVG vector files

Fonts

💫 Avoid invisible text during font loading
💥 Use pre-connect to load fonts faster
⚡️ Optimize Webfont loading and rendering
☄️ Reduce Webfont Size
✨ Keep Webfont size under 300kb

JavaScript

💫 Apply the PRPL pattern
⭐️ Limit the size of NPM dependencies
⚡️ Use code splitting
🌟 Combine external JavaScript
💥 Remove unused code
🎉 Use tree-shaking in Webpack
✨ Minify JavaScript
💫 Serve modern code to modern browsers
🌟 See how CommonJS makes your bundles larger
⚡️ Defer loading JavaScript
⭐️ Prefer Vanilla JavaScript🎊
💡 Use service workers to cache data
🎊 Use web workers
💥 Write optimized code for V8
🎉 Compile your JavaScript to faster JavaScript with Prepack
✨ Compile your JavaScript to faster JavaScript with Closure Compiler

Server

☀️ Use HTTPS
☄️ Keep the size of cookies low as possible
🔥 Avoid bad requests
💫 Set HTTP cache headers
⭐️ Enable gzip and brotli compression
⚡️ Self-host your static asssets
🌟 Enable OCSP stapling
💥 Adopt IPv6
💡 Serve assets over HTTP/2
🎉 Implement HPACK compression
✨ Set proper security headers

Testing Tools

💫 Measure site speed with Pingdom
🌟 Measure site speed with WebPageTest
🎊 Measure performance with the RAIL model
⚡️ Configure Webpack performance hints
⭐️ Use bundlesize
💥 Measure JavaScript execution time
🎉 Use lighthouse-ci
☄️ Use Lighthouse Bot to set a performance budget
☀️ Test on remote real devices
🔥 Use Sitespeed
✨ Use Calibre
💫 Use SpeedCurve
🎊 Use k6
⚡️ Use SpeedTracker

Frameworks

⭐️ Use an ahead of time compiler
💥 Improve Angular performance
☀️ Debug React perfomance
🔥 Eliminate common React issues
✨ Make components connection aware
💫 Implement adaptive serving
🎉 Serve Adaptive Components Using the Network Information API