The Ultimate Guide to Web Performance

There's so many ways to speed up your site. Don't you wish every web performance tip was in one place? That's what I thought too, so I put them all in one place: this post.

Use this guide as a reference.

Table Of Contents

• HTML
• CSS
• Images
• Fonts
• JavaScript
• Server
• Testing Tools
• Frameworks

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
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 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 preconnect 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