Google Lighthouse – enhance your website's quality
Google Lighthouse is a tool for measuring the quality of websites. Read more about how site health assessment using Google Lighthouse can be useful for your business.
2023-06-29 by Sebastian Pikand
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:
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.
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.
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.
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.
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
Figure 3. The result of Selver homepage according to Google Lighthouse test
Figure 4. Google Lighthouse report recommendations to improve Selver's homepage
Figure 5. The result of Photopoint website according to the Google Lighthouse test
Figure 6. Google Lighthouse report recommendations to improve Photopoint website
Figure 7. Postimees’ site results according to Google Lighthouse test
Figure 8. Recommendations from the Google Lighthouse report to improve Postimees’ site
© 2023 Bitropia, All Rights Reserved
RD Field Holding OÜ (14117556)