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
Top comments (37)
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?
Recursion
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/
Amazing list you put there!! ๐๐ Thank you!
I have a few additions there you might want to include:
Excellent list. Please add JMeter under testing tools.
content-visibility - limited browser support right now.
web.dev/content-visibility/
caniuse.com/css-content-visibility
THIS IS A GODSEND!!!!!!!!
How long did this take you to prepare?
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...
:)
The article already links to Addy Osmani's Critical library.
Some comments have been hidden by the post's author - find out more