DEV Community

Cover image for The Ultimate Guide to Web Performance 🚀
ender minyard
ender minyard

Posted on • Updated on

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

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




Did I miss something? Comment any potential additions to the list!

Oldest comments (37)

Collapse
 
dmahely profile image
Doaa Mahely

Collapse
 
yogionbioinformatics profile image
Yogindra Raghav

THIS IS A GODSEND!!!!!!!!
How long did this take you to prepare?

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Collapse
 
z2lai profile image
z2lai

Just dope?

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

What can I say, it's just what I needed to do that 😆

Thread Thread
 
z2lai profile image
z2lai

Yo that's dope.

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

Just dope?

Thread Thread
 
sajeelhassan profile image
Sajeel Hassan

Recursion

Collapse
 
oscarrodar profile image
Oscar Rodriguez Arroyo

Nice!!! Thanks

Collapse
 
qainsights profile image
NaveenKumar Namachivayam ⚡

Excellent list. Please add JMeter under testing tools.

Collapse
 
ninetails profile image
Nina Kitsu

Also a follow up: add AVIF format to images

reachlightspeed.com/blog/using-the...

Collapse
 
ender_minyard profile image
ender minyard

done!

Collapse
 
machineno15 profile image
Tanvir Shaikh

This deserves a github repository .
like Awesome web performance..

Collapse
 
mjcoder profile image
Mohammad Javed

That's just awesome. 👏💯

Collapse
 
mketlinger profile image
Mike Etlinger

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.

Collapse
 
ender_minyard profile image
ender minyard

Done!

Collapse
 
mketlinger profile image
Mike Etlinger

Nice thanks! I didn’t know about that Library.

Collapse
 
juliomoreyra profile image
JulioMoreyra

Impressive list, very complete!

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

Thanks a ton for collating them.

Collapse
 
edwardinchains profile image
edwardinchains

content-visibility - limited browser support right now.

web.dev/content-visibility/

caniuse.com/css-content-visibility

Collapse
 
rowemore profile image
Rowe Morehouse

You could add a critical-path sections, there may be some tools / techniques here for you to add to yours:

github.com/addyosmani/critical-pat...

:)

Collapse
 
ender_minyard profile image
ender minyard

The article already links to Addy Osmani's Critical library.

Collapse
 
mezmo profile image
Mike

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?

Collapse
 
ender_minyard profile image
ender minyard • Edited

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.

Collapse
 
ashvin777 profile image
Ashvin Kumar Suthar

This is very useful list

Some comments have been hidden by the post's author - find out more