The Ultimate Guide to Web Performance 🚀
Tags: html, css, javascript, react
Published: 2020-09-22 14:52:14

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. 

<p><br><strong>Table Of Contents</strong></p>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#fonts">Fonts</a></li>
<li><a href="#js">JavaScript</a></li>
<li><a href="#server">Server</a></li>
<li><a href="#test">Testing Tools</a></li>
<li><a href="#frame">Frameworks</a></li>
</ul>

<h2 id="html"> HTML </h2>
✨ [Minify HTML](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype)
☄️ [Order your styles and scripts for pagespeed](https://varvy.com/pagespeed/style-script-order.html)
⚡️ [Eliminate render-blocking resources](https://web.dev/render-blocking-resources/)
🌟 [Minimize layout thrashing](https://medium.com/better-programming/web-performance-dom-reflow-76ac7c4d2d4f)
🎉 [Prioritize resources](https://web.dev/prioritize-resources/)
✨ [Preload critical assets to improve loading speed](https://web.dev/preload-critical-assets/)
💥 [Establish network connections early](https://web.dev/preconnect-and-dns-prefetch/)
⚡️ [Prefetch resources](https://web.dev/link-prefetch/)
🌟 [Implement adaptive serving](https://addyosmani.com/blog/adaptive-serving/)



<h2 id="css"> CSS </h2>

⭐️ [Minify CSS](https://web.dev/minify-css/)
✨ [Remove unused CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/)
💥 [Defer non-critical CSS](https://web.dev/defer-non-critical-css/)
⚡️ [Minimize CSS requests by combining external CSS](https://varvy.com/pagespeed/combine-external-css.html)
🚀 [Optimize CSS background images with media queries](https://web.dev/optimize-css-background-images-with-media-queries/)
⭐️ [Avoid CSS inside the body tag](https://www.lifewire.com/avoid-inline-styles-for-css-3466846)
☄️ [Inline critical CSS](https://web.dev/codelab-extract-and-inline-critical-css/)
✨ [Avoid expensive styles](https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/)
💫 [Optimize CSS length](https://hackernoon.com/optimize-your-css-length-with-css-variables-mz2i3aqy)

<h2 id="images"> Images</h2>

✨ [Choose the right image format](https://web.dev/choose-the-right-image-format/)
💫 [Choose the correct level of compression](https://web.dev/compress-images/)
⭐️ [Use Imagemin to compress images](https://web.dev/use-imagemin-to-compress-images/)
💥 [Defer offscreen images](https://web.dev/offscreen-images/)
⚡️ [Properly size images](https://web.dev/uses-responsive-images/)
✨ [Replace animated gifs with video](https://web.dev/fast/)
🎉 [Serve responsive images](https://web.dev/serve-responsive-images/)
⚡️ [Serve images with correct dimensions](https://web.dev/serve-images-with-correct-dimensions/)
🌟 [Use WebP images](https://css-tricks.com/using-webp-images/)
⚡️ [Use AVIF images](https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/)
🎊 [Use image CDNs to optimize images ](https://web.dev/image-cdns/)
✨ [Use lazy-loading](https://web.dev/lazy-loading/)
🚀 [Lazy-loading video](https://web.dev/lazy-loading-video/)
⚡️ [Use lazysizes to lazy-load images](https://web.dev/use-lazysizes-to-lazyload-images/)
⭐️ [Compress JPEG images](https://tinyjpg.com/)
🔥 [Optimize PNG images](https://compressor.io/compress)
✨ [Optimize SVG vector files](https://jakearchibald.github.io/svgomg/)


<h2 id="fonts"> Fonts </h2>
💫 [Avoid invisible text during font loading](https://web.dev/avoid-invisible-text/)
💥 [Use preconnect to load fonts faster](https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/)
⚡️ [Optimize Webfont loading and rendering](https://web.dev/optimize-webfont-loading/)
☄️ [Reduce Webfont Size](https://web.dev/reduce-webfont-size/)
✨ [Keep Webfont size under 300kb](https://httparchive.org/reports/page-weight#bytesFont)



<h2 id="js"> JavaScript </h2>

💫 [Apply the PRPL pattern](https://dev.to/sadiqful/how-to-achieve-performance-using-the-prpl-pattern-1g68)
⭐️ [Limit the size of NPM dependencies](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter)
⚡️ [Use code splitting](https://web.dev/reduce-javascript-payloads-with-code-splitting/)
🌟 [Combine external JavaScript](https://varvy.com/pagespeed/combine-external-javascript.html)
💥 [Remove unused code](https://web.dev/remove-unused-code/)
🎉 [Use tree-shaking in Webpack](http://www.2ality.com/2015/12/webpack-tree-shaking.html)
✨ [Minify JavaScript](https://web.dev/reduce-network-payloads-using-text-compression/)
💫 [Serve modern code to modern browsers](https://web.dev/serve-modern-code-to-modern-browsers/)
🌟 [See how CommonJS makes your bundles larger](https://web.dev/commonjs-larger-bundles/)
⚡️ [Defer loading JavaScript](https://varvy.com/pagespeed/defer-loading-javascript.html)
⭐️ [Prefer Vanilla JavaScript](https://plainjs.com/)🎊 
💡 [Use service workers to cache data](https://www.keycdn.com/blog/service-workers/)
🎊 [Use web workers](https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them-a547c0757f6a)
💥 [Write optimized code for V8](https://blog.sessionstack.com/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e)
🎉 [Compile your JavaScript to faster JavaScript with Prepack](https://gist.github.com/gaearon/d85dccba72b809f56a9553972e5c33c4)
✨ [Compile your JavaScript to faster JavaScript with Closure Compiler](https://github.com/google/closure-compiler)

<h2 id="server"> Server </h2>
☀️ [Use HTTPS](https://wp-rocket.me/blog/https-affects-website-performance/)
☄️ [Keep the size of cookies low as possible](http://www.monitis.com/blog/website-performance-cookies-dont-taste-so-good/)
🔥 [Avoid bad requests](https://varvy.com/pagespeed/avoid-bad-requests.html)
💫 [Set HTTP cache headers](https://varvy.com/pagespeed/cache-control.html)
⭐️ [Enable gzip and brotli compression](https://www.pingdom.com/blog/can-gzip-compression-really-improve-web-performance/)
⚡️ [Self-host your static asssets](https://csswizardry.com/2019/05/self-host-your-static-assets/)
🌟 [Enable OCSP stapling](https://www.digicert.com/enabling-ocsp-stapling.htm)
💥 [Adopt IPv6](https://www.cloudflare.com/ipv6/)
💡 [Serve assets over HTTP/2](https://www.youtube.com/watch?v=yURLTwZ3ehk)
🎉 [Implement HPACK compression](https://blog.cloudflare.com/hpack-the-silent-killer-feature-of-http-2/)
✨ [Set proper security headers](https://securityheaders.io/)

<h2 id="test"> Testing Tools </h2>

💫 [Measure site speed with Pingdom](https://tools.pingdom.com/)
🌟 [Measure site speed with WebPageTest](https://www.webpagetest.org/)
🎊 [Measure performance with the RAIL model](https://web.dev/rail/)
⚡️ [Configure Webpack performance hints](https://webpack.js.org/configuration/performance/)
⭐️ [Use bundlesize](https://github.com/siddharthkp/bundlesize)
💥 [Measure JavaScript execution time](https://github.com/ai/size-limit)
🎉 [Use lighthouse-ci](https://github.com/GoogleChrome/lighthouse-ci)
☄️ [Use Lighthouse Bot to set a performance budget](https://web.dev/using-lighthouse-bot-to-set-a-performance-budget/)
☀️ [Test on remote real devices](https://www.browserstack.com/)
🔥 [Use Sitespeed](https://www.sitespeed.io/)
✨ [Use Calibre](https://calibreapp.com/)
💫 [Use SpeedCurve](https://speedcurve.com/)
🎊 [Use k6](https://github.com/loadimpact/k6)
⚡️ [Use SpeedTracker](https://speedtracker.org/)



<h2 id="frame"> Frameworks </h2>

⭐️ [Use an ahead of time compiler](https://www.lucidchart.com/techblog/2016/09/26/improving-angular-2-load-times/)
💥 [Improve Angular performance](https://www.youtube.com/watch?v=p9vT0W31ym8)
☀️ [Debug React perfomance](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad)
🔥 [Eliminate common React issues](https://blog.logrocket.com/death-by-a-thousand-cuts-a-checklist-for-eliminating-common-react-performance-issues/)
✨ [Make components connection aware](https://mxb.at/blog/connection-aware-components/)
💫 [Implement adaptive serving](https://www.youtube.com/watch?v=puUPpVrIRkc&t=488s)
🎉 [Serve Adaptive Components Using the Network Information API](https://dev.to/vorillaz/serving-adaptive-components-using-the-network-information-api-lbo)

<hr>
<center>Did I miss something? Comment any potential additions to the list!</center>