DEV Community

loading...
Cover image for The Ultimate Guide to Web Performance πŸš€

The Ultimate Guide to Web Performance πŸš€

ender_minyard profile image ender minyard ・Updated on ・5 min read

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!

Discussion (36)

Collapse
dmahely profile image
Collapse
machineno15 profile image
Tanvir Shaikh

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

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
Collapse
mketlinger profile image
Mike Etlinger

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

Collapse
joelbonetr profile image
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?

Collapse
miqueasgutierrez profile image
miqueasgutierrez

Hello, very good advice, it is also important to integrate Push Notifications in your website or online store for greater performance in the communication area, to carry out Ad campaigns, promotions, events, etc., I invite you to use the Indigital Service, you can carry out Marketing Campaigns Free for 30,000 devices, it is excellent and very easy to install, here is the Documentation: docs.indigitall.com/es/

Collapse
woodjessica profile image
Jessica Wood

Great job buddy, Thanks for sharing it, You may also visit to testingxperts.com/services/perform... to grab more knowledge about performance testing.

Collapse
charistheo profile image
Charis Theo

Amazing list you put there!! πŸŽ‰πŸŽ‰ Thank you!

I have a few additions there you might want to include:

Collapse
yogionbioinformatics profile image
Yogindra Raghav

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

Collapse
uploadcare profile image
Uploadcare

Impressive, thank you! We've also published a guide to responsive images and adaptive delivery technology, an easier way to serve responsive images: dev.to/uploadcare_/a-practical-gui...

Btw, if you're looking for a CDN for a media-heavy platform, here's a comparison of the 10 best solutions: bit.ly/3oYxr5E

Collapse
edwardinchains profile image
edwardinchains

content-visibility - limited browser support right now.

web.dev/content-visibility/

caniuse.com/css-content-visibility

Collapse
rahulh123 profile image
Rahul

How many of these amazing posts do you make? πŸ˜€ I guess I just got to go read all of them.

Collapse
ender_minyard profile image
Collapse
jurjin profile image
Giorgio Tempesta • Edited

I would add this one: Serve Modern Code to Modern Browsers for Faster Page Loads web.dev/serve-modern-code-to-moder...

Collapse
ender_minyard profile image
ender minyard Author

That's already in the article :-)

Collapse
jurjin profile image
Giorgio Tempesta

Sorry I completely missed it! πŸ™ƒ

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 Author

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

Collapse
juliomoreyra profile image
JulioMoreyra

Impressive list, very complete!

Collapse
qainsights profile image
NaveenKumar Namachivayam ⚑

Excellent list. Please add JMeter under testing tools.

Collapse
oscarrodar profile image
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 Author • 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
miteshkamat27 profile image
Mitesh Kamat

Thanks a ton for collating them.

Collapse
ikushlianski profile image
Ilya Kushlianski

To lazy loading, I'd also add the browser implementation described at web.dev/browser-level-image-lazy-l...

Collapse
mjcoder profile image
Mohammad Javed

That's just awesome. πŸ‘πŸ’―

Collapse
ninetails profile image
Carlos Kazuo

Also a follow up: add AVIF format to images

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

Collapse
ender_minyard profile image
Collapse
keefdrive profile image
Keerthi

Thanks I can create my own checklist now

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

Forem Open with the Forem app