Google Lighthouse

Lighthouse is an open source tool for running technical website audits. The tool was developed by Google, and it analyzes the following aspects of a URL: Performance, Progressive Web App, Accessibility, Best Practices and SEO.

The Lighthouse framework has already been integrated into Google’s other performance analysis tools, such as the analysis for PageSpeed Insights and the browser-based audits via the Chrome browser’s developer tools.

What is Google Lighthouse?

Lighthouse makes it possible to audit the performance of websites. Lighthouse 1.0 was first developed as an audit tool for Progressive Web Apps (PWAs). Version 2.0 then also included a performance and SEO analysis for normal websites. The third iteration, Lighthouse Version 3.0, was released in early 2018, and provided a new layout and direct integration into the developer tools of Google’s Chrome browser. Lighthouse remains an open source analysis framework that runs at URL level.

Which audits can Google Lighthouse run?

The audits offered by Lighthouse are grouped into five optimization categories: Performance, Best Practices, Accessibility, SEO and Progressive Web Apps.

Users can select one, more or all five categories, depending on which aspects of their website they wish to analyze.

Performance

In this category, Lighthouse analyzes how quickly a website or app loads and how quickly users can access or view the content. Here, Lighthouse analyzes six speed metrics:

• First Contentful Paint: This indicates the time before the first text or image becomes visible to users.
• First Meaningful Paint : This indicates the time when the main content of a page becomes visible to users.
• Speed Index: The speed index provides a uniform metric to express how quickly the content of a page is loaded.
• Time to Interactive: This indicates the time before the user is able to fully interact with the page and its content.
• First CPU Idle: The value in this category returns the time when the page’s main thread activity is low enough to enable inputs to be processed.
• Estimated Input Latency: The previous result is an estimate (in milliseconds) of how long an app needs to be react to user inputs during the 5-second window of maximum computation during page load. If the latency is over 50ms, users may perceive an app or website to be too slow.

Lighthouse’s performance analysis also includes recommendations for improvements. These show many opportunities for reducing load times – such as by compressing images, by cleaning up JavaScript or CSS, or by reducing render-blocking resources, such as JavaScripts, external requests or CSS commands. Correctly implemented caching, server response times and avoiding (or limiting) redirects are also recommended ways of improving site performance.

The performance recommendations from Lighthouse are the following:

• Reduce render-blocking resources
• Serve images in next-gen formats
• Enable text compression
• Defer unused CSS
• Ensure text remains visible during webfont loading
• Use efficient cache policy on static assets
• Improve the Critical Rendering Path (CRP)
• Avoid oversized images
• Delay load of offscreen images
• Minify/compress CSS
• Minify/compress JavaScript
• Optimize images
• Enable server pre-connect
• Keep server response times low (Time To First Byte, TTFB)
• Avoid redirects
• Preload key requests
• Use video formats for animated content
• Reduce the total byte weight
• Avoid an excessive DOM size
• Measure performance with user timing marks and measures
• Reduce JavaScript bootup time
• Reduce the payload of the main thread

Best Practices

The 16 Best Practices tested by Lighthouse mainly concentrate on security aspects of websites and modern standards of web development. Lighthouse analyzes whether HTTPS and HTTP/2 are used, checks to see whether resources come from secure sources and assesses the vulnerability of JavaScript libraries. Other best practices look at secure database connections and avoiding the use of non-secure commands, such as document.write(), or incorporating antiquated APIs.

SEO

Lighthouse runs various tests to establish how well a website or app can be crawled by search engines and displayed in the search results. These Lighthouse tests that Google describes as “SEO” are extremely limited; anyone with a website or app that does not achieve a maximum score should make the required fixes. Once these changes have been made, search engine optimization offers huge potential for other improvements, which should certainly be explored.

Lighthouse currently runs 13 audits within the search engine optimization category. These mainly look at mobile-friendliness or PWA, the correct application of structured data and tags like canonicals, hreflang, titles and meta descriptions, and whether a page can be crawled by search engine bots.

Accessibility

Lighthouse’s accessibility audits examine how well a website or app can be used by people with disabilities. This includes tests on important elements like buttons or links, to see whether they are sufficiently well described, or whether images have been assigned an alt-attribute so that the visual content can also be described by screen readers for visually impaired users.

Progressive Web Apps

This section was originally the core of Google Lighthouse – the analysis of Progressive Web Apps, or PWAs. Does the website register a service worker? Does it work offline with internet access? Does it return a 200 error? These audits were how Lighthouse began, but they are now just one of the five audit categories and one which is only of real importance for providers of Progressive Web Apps.

How can Google Lighthouse be accessed?

• PageSpeed Insights: Google’s PageSpeed Insights used to just return a single score, but now this tool draws on the analysis functions in Lighthouse. Any URL can be tested for an analysis of six performance values and the results of numerous additional audits and recommendations. An overall Speed Score is also compiled from the six performance metrics. You can access PageSpeed Insights here .
• Developer Tools in the Chrome browser: Since April 2018, Google Lighthouse has also been available via the developer tools in Google’s Chrome browser. Here, users can select which of the five main categories they would like to run audits in. There are also device options, with users able to choose mobile or desktop, and a range of simulated internet speeds to be used for the analysis. Here’s how you can find the Lighthouse audits in Chrome DevTools.
• Chrome Plugin: Complete Lighthouse audits can also be run using the Chrome Plugin. You can find Lighthouse Chrome Plugin here (if you are using the Chrome browser).
• Lighthouse’s Performance Audits can also be run via Google’s web.dev portal. Here you can find the most important audits with all results and recommendations.

How can I audit a complete website?

Lighthouse is a powerful tool for analyzing the performance of websites and PWAs. However, the tool does have one major disadvantage – it can only be run at URL level.

With its Lighthouse Audits, Conductor Website Monitoring has developed a way of analyzing complete domains and their relevant online markets, to establish the optimization level of an industry and the performance of a domain compared with its competitors.