This is the final article of the lighthouse series, I hope you enjoyed this series as much as I did. You can check out other Lighthouse articles below:
How to Improve Lighthouse Score - Search Engine Optimization (SEO)
How to Improve Lighthouse Score -Accessibility
How to Improve Lighthouse Score - Best Practices
Don't know how to check your website's Lighthouse score? No problem, use this article How to Check Lighthouse Scores using Chrome or Firefox as a guide.
Eliminate render-blocking resources
Render-blocking resources are either scripts or stylesheets.
Use the Coverage tab in Chrome DevTools to identify non-critical CSS and JavaScript. When you load or run a page, the tab tells you how much code was used.
Press Control+Shift+P or Command+Shift+P (Mac) and search "Show Coverage" to open the Coverage Tab shown below.
Coverage measures the code used to render the present page, not the whole website. So just because a set of code is unused on your page does not mean it is totally useless.
- Remove render blocking scripts
Avoid importing scripts in the head section of your HTML.
Place scripts that impact the render of the page at the end of the body (before the body closure).
If a script is critical (marked partially or totally red) and must be placed in the head section, mark the script with async or defer attributes as shown below
<head>
<script defer></script>
<script async></script>
</head>
With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded.
With defer, the file gets downloaded asynchronously but executed only when the document parsing is completed. Deferred scripts will execute in the same order as they are called.
- Remove render blocking stylesheets
Remove render-blocking stylesheets by preloading them. Suppose your page loads in the order below
index.html
|--main.js
|--styles.css
|--animation.js
Main.js runs then styles.css and animation.js are downloaded. The page doesn't appear complete until those last 2 resources are downloaded, parsed, and executed. The order can be changed by preloading links in your HTML. This instructs the browser to download key resources as soon as possible.
<head>
...
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="animation.js" as="script">
...
</head>
Avoid importing large 3rd party libraries within head tag
For instance instead of setting up font-awesome icons in the head of your html as shown below
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
You could use SVG icons instead, they are light and you don't have to install a library containing thousands of icons when you are just using 25. Font Awesome also lets you download the SVG versions of icons. It's a win-win situation.
Use CDNs to optimize images
CDN stands for Content Delivery Network. Using an image CDN, such as Cloudinary can significantly reduce the latency of your image delivery. Switching to an image CDN can yield a 40–80% savings in image file size.
An image URL indicates not only which image to load, but also parameters like size, format, and quality. The code snippet below displays an image using a Cloudinary image link
<img src="https://res.cloudinary.com/lindaojo/image/upload/v1607603313/Performance_f1zvh8.png" alt="lighthouse performance report">
Use improved image formats such as Webp
New image formats such as Webp are lightweight yet of great quality. Even though it is not supported by all browsers yet. You could use Webp images along with a fallback image as shown below.
<picture>
<source alt="Angela's cat, Bandit" srcset="images/cat.webp" type="image/webp">
<img alt="Angela's cat, Bandit" src="images/team/cat.jpg">
</picture>
Remove unused CSS
Removing unused CSS from your production builds for maximum performance.
When you are building a website, you might decide to use a CSS framework like TailwindCSS, Bootstrap, MaterializeCSS, etc... But you will only use a small set of the framework, and a lot of unused CSS styles will be included.
You could use a tool like PurgeCSS to remove the excesses. PurgeCSS analyzes your content and your CSS files. Then it matches the selectors used in your files with the ones in your content files. It removes unused selectors from your CSS, resulting in smaller CSS files.
Minify CSS
Your CSS files usually contain unnecessary characters, such as whitespaces, comments, and indentation. In production, these characters can be removed to reduce CSS file size without changing how the browser processes the styles. This ensures that you are sending the smallest possible bundle to your users.
You can minimise your CSS using optimize-css-assets-webpack-plugin
The tips above will definitely give your lighthouse performance score the boost that it deserves.
Top comments (3)
Thanks a lot for these guides! I'm always striving to improve my lighthouse scores. I have a perfect 100 on my Watery project, but there are others sites that I need to work on.
Really great article! I am going to start using the suggestions on font-awesome and purge css today; I also love cloudinary too! I may be off, but I was wondering if Cloudinary switched the image type for you between jpg and webp? Thanks so much for the helpful article; it’s just in time for something I’m working on today
Hey Kenny, I switched between image formats within the picture tag as shown below.