For those who do not (yet) know Google Lighthouse, this content is for you! In addition, it is free just like the tool. And more interesting and attractive: it offers the possibility of filtering test conditions. Details on this Google tool, its use and all its features.
What is Google Lighthouse?
Google Lighthouse, or simply Lighthouse, is a measurement and analysis tool. It takes into account several criteria and gives areas for improving performance. Thanks to its filters and accessible test conditions, the analysis is even more relevant and realistic. Lighthouse tells you how fast your site is loading and helps you determine if your code is slowing down your web performance.
It offers detailed and precise information on each element analyzed and always offers recommendations to follow.
The tool is able to analyze key indicators to improve the user experience (UX), namely:
- site performance
- the usual good practices of excellence
- SEO (natural referencing)
- as well as the performance of progressive web applications (Progressive Web APP, abbreviated PWA)
The provision of the tool is a real way to help site administrators to comply with Google standards and have the best possible performance.
How to use Lighthouse on a daily basis?
Lighthouse is a Google tool with three alternatives for using it:
Use the Chrome browser and install the Lighthouse extension, then test the websites you visit.
By going to the extension icon (an orange lighthouse) in the taskbar, you just have to click on “generate report”: you then have access to the performance of the site after the analysis made by the tool.
Use Google DevTools, but how? Nothing’s easier !
Take for example, the AntheDesign site:
- I entered the url of the site is https://www.anthedesign.fr/ in my Google Chrome search bar
- I click at the top right on the bullet list then on ”More tools” then ”Development tools” and you get to this:
If not, that’s okay. I’ll give you a “shortcut” tip: just do Ctrl + Shift + I. Are you in the right place? There’s just !
Use PageSpeed Insights. Enter the url to analyze on this tool and simply click on “Analyze”. You will have access to data collected by Lighthouse from PSI.
The performance and analysis performed by Google Lighthouse
Lighthouse analyzes several elements and performances. Each criterion has a score between 1 and 100; depending on the score, a color is associated with it:
- from 0 to 49, the color is red
- from 50 to 89, the color is orange
- and from 90 to 100, the color is green
To access a particular section, click directly (example below) on the score at the top of the page to go to the part that interests you.
It is also possible to consult the audits carried out by the tool and to know what is working, or not, on your website.
Google Lighthouse sifts through 5 criteria; a little like “We have the means to make you speak! “. Do you have the ref?
1 | Site performance
This section is the most important and detailed of the tool. Lighthouse analyzes site speed and controls the display of loaded items.
It is based on 6 criteria, the last 2 of which are decisive Core Web Vitals:
- the First Contentful Paint. It indicates the loading time of a page or an image …
- the Speed Index. The speed rating determines how long it takes for content to fully load. It is expressed in seconds and the faster it is the better
- the Time to Interactive. This is the time it takes for the page to be fully interactive, it is expressed in seconds and is considered fast between 0 and 3.8 seconds
- the Total Blocking Time. It measures the time that a page remains blocked before reacting to the interaction of the Internet user. This time must be very low, between 0 and 200 milliseconds
- the Largest Contentful Paint (LCP). This is page performance, it measures loading performance and should be less than 2.5 seconds
- the Cumulative Layout Shift (CLS). This is the stability of the page, or visual stability, it quantifies the layout changes undergone by the Internet user and must be less than 0.1
Beyond these criteria, the tool gives suggestions for improvement to reduce the loading time of its site, compress images, reduce the JS or to modify too heavy resources that block the site.
2 | The performance of progressive web applications
Known in English as the Progressive Web APP or PWA, these applications are analyzed by Lighthouse. For webmasters, this PWA analysis is the most popular asset.
The tool checks that:
- the dynamic contents are displayed correctly according to the size of the window,
- the offline function is accessible,
- a personalized start screen is well configured to improve the user experience,
- a theme color is present in the address bar of the browser,
- a service agent (script that allows access to information on the site even when offline) is well connected.
3 | Accessibility
In terms of accessibility, Google Lighthouse does not disappoint. This is because the tool determines whether the site or the PWA can be used by a person with a disability. The tool will thus analyze in depth whether the important and essential elements for the good navigation of a disabled person are present. It can be:
- correctly described buttons,
- well-detailed links,
- images, graphics and infographics with a voiceover to allow them to be fully understood.
After analysis, the level of accessibility is scored: the higher the score, the better the accessibility.
4 | Best practices of excellence
In this area, the tool also excels. Lighthouse analyzes aspects relating to site security. It examines whether the site:
- uses encryption and security technologies (HTTPS),
- secures the resources integrated into the site,
- uses well-secured and non-vulnerable JS libraries,
- provides good resolution images,
- avoids obsolete and too old APIs …
There are other elements considered in these best practices: everything is indicated during the site analysis.
5 | SEO
The quality of natural referencing (SEO) also goes through the mill. Lighthouse analyzes how well the site is taken into consideration by search engines (specifically, by Google). It displays a score of 0 to 100 points: if the score is not equal to 100, the site editor must act on his domain to optimize his website as well as possible.
The elements examined in this section concern:
- the presence of a title tag and a meta description,
- the presence of descriptive text on the links,
- the absence of blocked indexing,
- the validity of the robots.txt, the hreflang tag or the rel = canonical tag,
- the readability of the font sizes used …
By knowing this performance, you can take action on your site and improve it before relaunching an analysis with Lighthouse.
ANTHEDESIGN SITE LIGHTHOUSE REPORT
What are the advantages of using Lighthouse?
Google’s tool provides a great deal of information, analysis, figures and issues raised. So take advantage of a better ranking on Google by following the axes of optimization.
Some interesting advantages:
- ease of use. The tool is simple, a plugin and a single click are enough to launch a web page analysis
- areas for improvement. It offers optimizations for any issue raised, reports even indicate specific pieces of code to modify
- constant updating is very much appreciated. The developers of the search engine are working on the tool and improving the version regularly. You don’t risk having wrong analyzes.
As mentioned above, this tool was designed by Google: who better to help you respect this search engine’s own rules?
To conclude on Google Lighthouse
Web developers, SEOs and even website administrators can easily use Google Lighthouse.
The tool allows you to collect:
- a wealth of information,
- reviews and analyzes relevant to its website,
- but also essential axes of optimization.
With this tool, you improve the loading speed of your site, accessibility, mobile compatibility or even the optimization of images and resources. It is an essential tool for web professionals who want to meet Google standards as well as possible.