DEV Community

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

The Ultimate Guide to Web Performance πŸš€

ender minyard on September 22, 2020

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...
Collapse
 
dmahely profile image
Doaa Mahely

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
ender minyard

Done!

Collapse
 
mketlinger profile image
Mike Etlinger

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

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
 
harrytheo profile image
Harry Theo

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

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

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
 
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
ender minyard

:-) thanks!

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

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

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
Oscar Rodriguez

Nice!!! Thanks

Collapse
 
vuongtran profile image
Vuong Tran

Awesome list for web perf

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
 
miteshkamat27 profile image
Mitesh Kamat

Thanks a ton for collating them.

Collapse
 
adilvelizade0 profile image
Info Comment hidden by post author - thread only accessible via permalink
Adil Velizade

Please follow instagram : @master_javascript

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