DEV Community

Cover image for The Ultimate Guide to Web Performance ๐Ÿš€
ender minyard
ender minyard

Posted on • Edited 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!

Top comments (37)

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

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

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

Collapse
 
qainsights profile image
NaveenKumar Namachivayam โšก

Excellent list. Please add JMeter under testing tools.

Collapse
 
edwardinchains profile image
edwardinchains

content-visibility - limited browser support right now.

web.dev/content-visibility/

caniuse.com/css-content-visibility

Collapse
 
yogionbioinformatics profile image
Yogindra Raghav

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

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.

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