Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 14, 2020 12:54 pm GMT

How to Improve Lighthouse Score - Performance

Lighthouse performance score

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.

Low Contrast

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>
Enter fullscreen mode Exit fullscreen mode

With async, the file gets downloaded asynchronously and then executed as soon as its 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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 for images 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 4080% 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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Get started with Purge CSS

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.


Original Link: https://dev.to/lindaojo/how-to-improve-lighthouse-score-performance-57cb

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To