Google Lighthouse – enhance your website's quality

What is Google Lighthouse and why use it?

Google Lighthouse is an open source automated tool for evaluating the quality of web pages. It provides information about page performance, accessibility and SEO. It also helps developers, website owners and businesses improve the quality, performance and user experience of their websites. A website that performs better also has a good effect on the user experience. A good user experience helps the visitors get a better image of the company and thus they are more likely to make a purchase or get in touch.

Where to use Google Lighthouse to assess the health of a website?

The Google Lighthouse tool can be added to extensions in the Google Chrome browser, for example. 

In addition, Google Web Vitals offers an extension that also allows you to evaluate the quality of a web page.

You can also test the speed of the web page at https://pagespeed.web.dev/. Google PageSpeed ​​Insights combines user data and data measured in lab conditions to provide a comprehensive and easy-to-understand overview of page speed. Lighthouse is a more developer-centric tool and collects data from audits that include information from page load speed to security.

To test mobile friendliness, there is a page https://search.google.com/test/mobile-friendly, which gives a quick overview of whether a website is mobile friendly.

Areas to improve with Google Lighthouse

With the help of the Google Lighthouse test, you can determine the areas in which you can improve your website. Improving the quality of your website so that your Google Lighthouse score increases over time will contribute to your website's better performance and ranking in search engine results. The areas that Google Lighthouse evaluates include:

Performance

Lighthouse measures various performance-related metrics such as page load time, time to become interactive, and rendering speed. If you solve the problems highlighted in test results, you can imrpove the user experience and conversion rates of the website.

Accessibility

Google Lighthouse evaluates the accessibility of a website to ensure that it is suitable for all users, including people with disabilities. Following accessibility recommendations can make web pages more inclusive and reach a wider audience.

SEO

Lighthouse analyzes on-page SEO elements such as meta tags, titles, and mobile-friendliness. By optimizing these aspects, businesses can improve their search engine rankings, increase organic traffic, and improve online visibility.

Progressive Web Applications

Lighthouse verifies that if the website is based on a PWA application, best PWA practices are used. In short, a PWA is an application that allows you to use the benefits of both a website and a native app at the same time. Implementing PWA features can lead to a better user experience, more visitors, and higher conversion rates.

Best practices

Lighthouse evaluates a website based on web development best practices, such as using HTTPS, avoiding outdated APIs, and properly optimizing images. By following these guidelines, it is possible to ensure that web pages are secure and of high quality.

Technical score is measured by Google Lighthouse according to six parameters

Google Lighthouse takes into account several web page parameters in the evaluation to give a web page a comprehensive score. We describe these parameters below.

Speed ​​index  – how soon did the page look usable? 

Speed ​​index of a web page shows how quickly the content of the page is loaded in the visible part of the screen. Some elements are less bulky and others more bulky, so it is natural that different elements appear to visitors at different rates. As a rule, a good speed index is also related to good first contentful paint (FCP) and largest contentful paint (LCP). For mobile, 3.4 seconds or less is considered good. On a desktop or laptop, 1.2–1.3 seconds or less is good.

First contentful paint – how soon did text and images start to appear? 

First contentful paint (FCP) is an indicator used by Google that characterizes, from the visitor's point of view, how quickly such visual content appears, which requires it to be rendered in advance in the browser. The browser must first read the information from the code on how exactly to display a specific image. Multimedia can be bulky and take a long time to load, so it is important that the loading speed of the content is optimal. FCP below 1 second is very good, 1–3 seconds is average and more than 3 seconds is poor.

Time to interactive – when did the page become interactive?

Time to interactive (TTI) shows the speed at which the web page becomes interactive. If the web page is interactive, the page reacts to the user's actions – for example, a mouse click – and the event handlers of the code mostly work for the visible elements of the page. Event handlers are functions that are necessary to process various hardware-related actions – for example, when the user moves the mouse, makes a click or presses a button on the keyboard. A page that becomes interactive in 3.8 seconds or faster has a good TTI.

Largest contentful paint – when did the largest visible content finish loading? 

Largest contentful paint (LCP) characterizes how quickly the page loads the main content. More precisely, LCP indicates how quickly the largest visual element (image, video or texts) loads in the visible part of the screen. A good result for LCP is 2.5 seconds or less.

Cumulative layout shift – how much did the design shift while loading? 

Cumulative layout shift (CLS) shows the visual stability of the page. Surely everyone has seen how elements on the page move at different speeds, and if, for example, you want to click somewhere, the right place or button "jumps out" to make room for some element that just appeared instead of that place or button. CLS characterizes how quickly different elements become visible. A good CLS figure is less than 0.1 units.

CLS score is calculated by multiplying the Impact Fraction by the Distance Fraction. Impact Fraction is the amount of space an unstable element takes up in a viewport area between two frames. Distance Fraction is the measure of the space that the page element has moved from the original position to the final position.

Total blocking time – was the main thread blocked? 

Total blocking time (TBT) characterizes how long the page blocks actions such as user mouse clicks and keyboard button presses. If the page doesn’t react to, for example, mouse clicks, it means that the page is blocking these activities. Blocking is caused by the fact that when going to a new website, various tasks will be performed based on the code, as a result of which the content of the website will be displayed to the user. As long as the most important tasks are not completed, the visitor's activity is also blocked.

Both largest contentful paint (LCP) and cumulative layout shift (CLS) are Core Web Vitals metrics. Core Web Vitals metrics are the metrics Google uses to rank sites. In addition to LCP and CLS, there is also first input delay (FID) and it is similar to total blocking time (TBT). Total blocking time simply characterizes the time when the web page is unable to respond to any user activity, while the user does not even have to do anything. First input delay measures the time that is counted from the user's action (for example, a mouse click) to the moment when the page reacts to the activity. A good FID indicator is up to 0.3 seconds.

Google Lighthouse scores of well-known company websites

Do well-known companies pay attention to Google Lighthouse scores? We used Google Lighthouse test to measure the homepages of various well-known companies in Estonia. The results are presented below. In addition, we describe what are the main problems with specific sites.

Telia

It can be seen from Figure 1 that there are images with a long loading time, which also affects the speed index of the page. Total Blocking Time is also high. According to the recommendations in Figure 2, reducing unused JavaScript, CSS, and render-blocking resources would help improve page speed, as well as preloading large images 

Figure 1. The result of Telia's website according to the Google Lighthouse test


Figure 2. Google Lighthouse report recommendations to improve Telia's website

Selver

Figure 3 shows that the speed metrics of Selver's homepage are all in the red – meaning there is a lot that can be done to improve the speed. Reducing unused JavaScript would improve page speed by more than 5 seconds. Compressing the text would also help a bit. This is a process where the size of the text is reduced in order to reduce the loading time of the web page and the load on the server. Avoiding outdated JavaScript in modern browsers would also improve the overall score.

Figure 3. The result of Selver homepage according to Google Lighthouse test

Figure 4. Google Lighthouse report recommendations to improve Selver's homepage

Photopoint

Figure 5 shows that Photpoint's speed could also be significantly improved. The Total Blocking Time result is orange, while all others are red. Optimizing image properties, reducing unused JavaScript and rendering-blocking resources, as well as compressing text would help improve speed.

Figure 5. The result of Photopoint website according to the Google Lighthouse test


Figure 6. Google Lighthouse report recommendations to improve Photopoint website

Postimees

Figure 7 shows that the Google Lighthouse test could not provide complete results for Postimees’ site – the page took too long to load. An overall score of 5 indicates that there is a lot of room for improvement. Also note the speed index result, which is close to 30 seconds. Reducing various unused resources and duplicates, optimizing images and eliminating outdated JavaScript would help improve speed.

Figure 7. Postimees’ site results according to Google Lighthouse test

Figure 8. Recommendations from the Google Lighthouse report to improve Postimees’ site