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
âš 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 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
Discussion
This deserves a github repository .
like Awesome web performance..
Nice! Lots of goodies in here and this is a great checklist.
The CSS section should have something like:
âInline Your Critical CSSâ which reduces the number of requests and helps with render blocking.
Done!
Nice thanks! I didnât know about that Library.
Just dope?
What can I say, it's just what I needed to do that ð
Yo that's dope.
Just dope?
Amazing list you put there!! ðð Thank you!
I have a few additions there you might want to include:
Great job buddy, Thanks for sharing it, You may also visit to testingxperts.com/services/perform... to grab more knowledge about performance testing.
THIS IS A GODSEND!!!!!!!!
How long did this take you to prepare?
content-visibility - limited browser support right now.
web.dev/content-visibility/
caniuse.com/css-content-visibility
How many of these amazing posts do you make? ð I guess I just got to go read all of them.
:-) thanks!
I would add this one: Serve Modern Code to Modern Browsers for Faster Page Loads web.dev/serve-modern-code-to-moder...
That's already in the article :-)
Sorry I completely missed it! ð
You could add a
critical-pathsections, there may be some tools / techniques here for you to add to yours:github.com/addyosmani/critical-pat...
:)
The article already links to Addy Osmani's Critical library.
Impressive list, very complete!
Excellent list. Please add JMeter under testing tools.
Nice!!! Thanks
The suggestion to combine CSS and other types of files, is that still true in the age of http2 and the probably soon coming of http3?
HTTP requests are still expensive. I personally make an exception to bundling for very large JS files (which you should avoid in the first place). In the past, with benchmarking, I found that bundling small files = performance gains but bundling large JS files = more execution time.
There are limitations to bundling due to file size, but also, HTTP/2 adoption isn't universal. You may be interested in this other article about bundling.
There is definitely a way to bundle correctly. For example, if you generate different bundles on every build, you have to consider that the user never gets to cache your assets.
Thanks a ton for collating them.
To lazy loading, I'd also add the browser implementation described at web.dev/browser-level-image-lazy-l...
That's just awesome. ðð¯
Also a follow up: add AVIF format to images
reachlightspeed.com/blog/using-the...
done!
This is very useful list
Thanks I can create my own checklist now
Some comments have been hidden by the post's author - find out more