How to Improve Your Website Lighthouse Performance

What is Google Lighthouse?

Lighthouse is an open-source tool, designed by Google for the purpose of checking the performance and user experience delivered by web pages. So we have to improve our lighthouse website performance as much as we can.

Lighthouse runs automated audit scans that check how the site performs against five main categories—performance, accessibility, search engine optimization (SEO), progressive web app (PWA), and best practices. 

Additionally, Lighthouse uses Core Web Vitals to check the speed, visual stability, and responsiveness of the page. During the scan, Lighthouse runs a simulation to check the experience of users with poor connections and an underpowered device.  

Once Lighthouse completes an audit, it combines the information with other data and compiles a report, including the overall score of the page and actionable recommendations. 

Here are several methods you can use to run a Lighthouse scan:

• A web UI—this tool lets you run Lighthouse and generate reports online. There is no need to install anything locally.
• Chrome DevTools—you can run Lighthouse directly in Chrome. This option lets you audit pages that need authentication. You can also easily generate and read reports.
• A Node.js module—this option lets you integrate Lighthouse into your DevOps pipelines.
• Command-line—you can use the command-line to write shell scripts that automate Lighthouse scans.

Google Lighthouse Categories

Google Lighthouse analyzes web pages and divides its findings into several categories: progressive web apps, performance, accessibility, best practices, and SEO. Let’s review each of these.

Progressive Web Apps

Google Lighthouse is able to check core functionality of progressive web apps (PWA), which are cross-platform web applications that work similarly to native apps on mobile devices. Google Lighthouse can analyze the correct display of all elements and dynamic content. It also checks service worker registration—service workers facilitate offline functionality for desktop and mobile users.

Performance

Lighthouse analyzes the speed of your website or web application, and also makes sure that loaded elements are displayed correctly to the user. The analysis includes:

• Mobile and desktop speed score—a score between 0-100, showing how fast the page loads on mobile and desktop devices (a separate score for each)
• First Contentful Paint (FCP)—the time it takes to fully display the first image or text shown on your website.
• First Meaningful Paint (FMP)—the time it takes for the main content of your page to be fully displayed.
• Time to interactive—time required until the page is fully loaded and ready for the user to interact with it.
• First CPU idle—time required until the website’s main thread CPU usage decreases enough to enable processing of user requests.
• Estimated input latency—looks at the 5-second window with the highest CPU utilization, and measures how long it takes the server to respond to user requests within that window. A value higher than 50 ms can cause the page to be perceived as slow.

In addition to these scores, companion tools such as Google PageSpeed Insights provide detailed recommendations showing how to improve page load time and Lighthouse score. These recommendations indicate how much time each fix can shave off the load time of the page.

It is important to realize that because Lighthouse scores are based on real user data, they can change every time you run them, even for the same page. To make the best use of Lighthouse, select a sample of pages from each site section, and run Lighthouse regularly to see performance trends over time.

Accessibility

Google Lighthouse evaluates how well a website or PWA can serve people with disabilities. It checks whether important elements such as buttons and links are well explained using text attributes, and whether there is a voice-over function that outputs content as audio for the visually impaired.

Best Practices

In the best practices category, Lighthouse primarily analyzes security aspects of your web application. It evaluates which cryptographic techniques (e.g. TLS) are used, whether the website's resources come from a secure source, and whether JavaScript libraries you are using are considered secure. It also checks whether the database to the application is connected is secure, and points out use of unsafe commands or old APIs.

SEO

Google Lighthouse runs a variety of tests to analyze how search engines handle applications and websites, focusing on SEO for mobile applications. Lighthouse provides a score between 0-100. It primarily checks mobile usability and whether tags and metadata have been optimized for search engine crawling. 

How to Improve Your Lighthouse Score

Here are a few ways you can improve your Lighthouse performance score, which should directly contribute to user engagement and satisfaction, and better search engine rankings.

You can also calculate how different variables of Google like LCP, CLS etc have their weight in the total lighthouse score here: Lighthouse Scoring Calculator

Lazy Load Visual Assets

Including images and videos in your pages can significantly reduce the time required to draw the “first meaningful paint”. Of course images and video should be used because they contribute to your content, but recognize their impact on page load. 

To minimize the impact of visual assets, identify rendering blocks that are not initially visible to users, because they are under the fold. Lazy load these assets, or in other words, only load them when the user actually needs them. Two common approaches are:

• Hiding videos or other dynamic assets until users interact with them. In the interim, you can display a placeholder or “poster image” with a play button.
• When lazy loading using JavaScript, using the Intersection Observer API to determine when an image or other element enters the user’s viewport, and only then load it.

For images you cannot lazy load, try to optimize them. You can do this manually or use image optimization solutions: 

• Use responsive web design to deliver images of appropriate size to users with different screen sizes
• Use the srcset attribute to provide a set of images, each suitable for a different screen resolution
• Use the decoding attribute delay image decoding, which can act to reduce “paint time”

Defer Unused Scripts

For any content that doesn't immediately appear on the user’s screen, Google recommends not only lazy loading images, but also CSS and JavaScript. This can be challenging for several reasons:

• Many CSS directives and script affect all page content, or can have unpredictable effects if loading is deferred
• On different devices and screen sizes, different content is below the fold, making it difficult to tell which scripts to defer
• Deferring scripts may require heavily customizing your CMS, and these customizations will require heavy website maintenance each time the website’s design changes

However, if there are scripts you can safely defer without impacting the user experience, it is definitely important to preload them and inject them using JavaScript after the initial content loads. 

Minimize Use of Third-Party Scripts and Reduce JavaScript execution time

Any third party script executing on your page will reduce page performance, and is typically outside your control as a web developer. Limit scripts to the minimum absolutely necessary. Examples of scripts commonly found on web pages are social sharing buttons, embedded videos, analytics tags, and platforms used for A/B testing.

Only keep these tools and services on your site if their value outweighs their cost in terms of performance. Minify third party scripts, and ensure they use attributes like async, defer, preconnect, and dns-prefetch to minimize their impact on page load time.

Serve Images in Next-Gen Formats

Google PageSpeed Insights recommends using next-generation file formats to improve Lighthouse scores. These next-gen formats include WebP, JPEG XR and JPEG2000, and provide vastly improved compression and smaller file sizes with the same image quality.

The challenge is that browser and application support for these new formats is still limited. This has two implications:

• You will find it difficult to generate these formats from tools used by your graphic designers, such as Adobe InDesign or Photoshop
• Users with older browsers will not be able to view next-gen image formats, meaning you need to provide fallback images using traditional formats like JPG or PNG

Serving next-generation image formats is not easy, but will help you push the envelope of page performance, especially for visually-rich web content.

You can find here, on how to convert images to the next generation format for any CMS: Serve images in next-gen formats

Conclusion

In this article I introduced Google Lighthouse, a benchmark that can help you measure the performance of your web pages and improve user experience. In addition, because Lighthouse is a ranking factor in the Google search algorithm, improving your Lighthouse score will also have an impact on search rankings and traffic.

I covered three main ways you can improve Lighthouse score on your web pages:

• Lazy load visual assets to improve the speed of initial content load
• Defer scripts to prevent them from blocking the main thread
• Minimize the use of third-party libraries and plugins, which can have significant performance implications and are outside the control of web developers

Also if you gonna use WordPress as CMS we recommend you to use fast WordPress themes and the best WordPress hosting providers to make your work easier.

I hope this will help you better understand the Lighthouse metric and align your website to the new generation of web performance guidelines.