Lighthouse - What it is and what it measures - VitalFrog.

Among the many tools available for testing the speed of a webpage, and other web metrics, Lighthouse is one that seems to be commonly used by almost everyone, and this is because it is a tool from Google, the largest search engine we have.

But what is Lighthouse? And how can you get to make use of it?

Read on because I will be providing answers to these questions and many more.

What is Lighthouse?‌

Lighthouse is a free web testing tool used for testing the performance and quality of a webpage and then provides suggestions on how to improve the quality of the page.

According to Google, here is what Lighthouse is:

“Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, either public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.”

PageSpeed Insight Lab data section report is powered by Lighthouse technology, and this means that Lighthouse can be accessed through PageSpeed Insight.

But the report you get from accessing Lighthouse through PageSpeed Insight is less than what you get when accessing Lighthouse locally.

Lighthouse 1.0 was first developed as an audit tool for Progressive Web Apps (PWAs). Then version 2.0 included a performance and SEO analysis for standard websites.

Lighthouse 3.0 was released in the year 2018, and it provided a new layout and direct integration into the developer tools of Google’s Chrome browser, and now we currently have Lighthouse 8.0.

Like PageSpeed Insight, Lighthouse is open-source software, and anybody, including you, can access it locally with ease and can test any webpage of their choice.

Lighthouse is a performance auditing tool written in Javascript and is run in Node.js developed by Google and is made available on GitHub. This makes it possible for you to run audits on the performance of a website or web app.

But before I show you the various ways through which you can access Lighthouse locally, let us go through what precisely a Lighthouse report is like and what Lighthouse measures.

What does Lighthouse measure?

When Lighthouse is used to audit a webpage, it provides a report on five different categories of the webpage, which include:

Performance.
Accessibility.
Best Practices.
Search Engine Optimisation (SEO).
Progressive Web App.

1. Performance:

This is the very first category measured by the lighthouse, and this is the category where the speed of a webpage is measured. It is the only category you can access through PageSpeed Insight but with different metrics.

Lighthouse analyses how quickly webpage loads and how long it takes before a user can view and access content on the page or web app.

Lighthouse can measure the performance of a webpage using six web metrics which include the following:

1. First Contentful Paint (FCP):

The First Contentful Paint is the metric that measures the time to when the browser renders the first piece of content in the DOM, which is a non-white canvas, providing feedback to the user that the page is loading.

The first piece of content here could be an image or blocks of text rendered by the browser, but this excludes any content of iframes.

2. First Meaningful Paint:

First Meaningful Paint is a measure of the time taken for the primary content on a webpage to load and become visible above the fold. This is when users can view what they want to get from the page they open.

3. Speed Index (SI):

The speed index is the measure of how quickly contents load and becomes visible while the webpage is loading. It measures how fast contents are visually displayed to the user over time during page load.

4. Time To Interactive (TTI):

Time to interactive is a metric that measures the total time it takes for a webpage to be completely interactive and respond to user input readily.

5. First CPU Idle:

First CPU Idle measure how long it takes before the activities on the browser’s main thread is less enough for the main thread to respond to any input made by a user, I.e. when the webpage is minimally interactive.

6. Estimated Input Latency:

Estimated Input Latency is an estimate of how long it takes a webpage or web app to respond to any input from a user during the busiest 5-second window of page load, which is measured for the First Meaningful Paint to the end of page load time.

An Estimated Input Latency of a webpage should be kept below 50ms to prevent a user from perceiving such webpage as laggy.

Aside from measuring these six metrics in the Performance Category, Lighthouse audit also provides three sections under the Performance Category. These sections are:

1. Opportunities section:

Here in this section, you can find helpful suggestions on how to improve the performance of your webpage by improving the score of the various metrics discussed above.

Lighthouse helps you locate part of your webpage that needs improvements and gives suggestions on how these issues can be fixed.

Some of the suggestions you can find in the opportunities section are listed below.

Reduce the payload of the main thread.
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.
Optimise images.
Enable server pre-connect.
Keep server response times low.
Preload key requests and so on.

2. Diagnostics Section:

This section gives additional information on how a page reacts to some of the best practices in web development.

This section draws your attention to some best practices that you have not implemented in your webpage and lets you know what to implement on the page.

3. Passed Audit:

The Passed Audits section contains a list of the many audits that a web page has passed.

2. Accessibility:

This category measures how accessible a webpage’s content is and how easily users can navigate the page.

The accessibility test also scores how accessible a webpage is to assistive technology (i.e. technologies or software program that increases and improve the functional capabilities of persons with disabilities).

Among all the categories in Lighthouse audit, Accessibility has the highest number of audits which is over 35 in number.

In the Performance audit, a page that partially passes an audit still gets some points for that. But when it comes to the Accessibility audits, the page either passes or fails the audits in this category and gets no point for partially passing an accessibility audit.

A good example is when you have buttons on a webpage with accessible names assigned to each of them. If, for any reason, some of the buttons end up not having any accessible name, that webpage gets 0 points for Buttons do not have an accessible name audit.

The Lighthouse accessibility score is a weighted average of each of the audits under this category, and some of the audits include:

[accesskey] values are not unique.
The page does not contain a heading, skip link or landmark region.
[id] attributes on active, focusable elements are not unique.
Headings skip levels.
Some elements have a [tabindex] value greater than 0.
[aria-*] attributes do not match their roles.
[aria-hidden=\”true\”] is present on the document <body.>.
[aria-hidden=\"true\"] elements contain focusable descendants.
Not all ARIA input fields have accessible names.
[role]s do not have all required [aria-*] attributes.
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
[role]s are not contained by their required parent element.
[role] values are not valid.Not all ARIA toggle fields have accessible names.
[aria-*] attributes do not have valid values.
[aria-*] attributes are not valid or misspelled.
ARIA IDs are not all unique.
Buttons do not have an accessible name and so on.

Under this category, there is also a section for the Passed audit where all the accessibility audit that webpages pass are displayed.

Learn more about the accessibility audits.

3. Best Practices:

This category mainly concentrates on the security aspect of the website and goes further into checking the modern standard of web development.

Google has a lot of rules, and this category of the Lighthouse report helps Google know if the web developers are following these rules. This element ensures that web developers implement best practices when it comes to designing webpage making sure that everything is secure.

This aspect of Lighthouse audit helps users to avoid pitfalls and improve the overall code health If the webpage or web app.

The general best practices provided in this category include the following:

The page lacks the HTML doctype, thus triggering quirks mode.
Browser errors were logged to the console.
Displays images with incorrect aspect ratio.

There is also a section for the Passed Audit under this category, so you get to know which audit was passed and which needs improvement for optimum security.

For further details on the various best practices provided in this section, click here.

4. Search Engine Optimisation (SEO):

This category measure how well a search engine can understand the content on a webpage by reflecting the SEO basics that every site should get right.

Detailed guidance is provided in this category to assist developers and SEO practitioners in ensuring that a page is optimised for search engine ranking.

Lighthouse checks if the webpage can be crawled and indexed by search engines and checks if the page is mobile-friendly since a significant percentage of searches made on a search engine like Google are done with mobile phones.

Like other categories, there is also a section for the passed audit. For more information on this category Click here.

5. Progressive Web App:

This category scores a webpage based on the progressive web app checklist provided by Google, which gives you a view of the capacity, reliability and installability of your web app.

One thing this category checks is whether a web app can be accessed using different browsers, and what this means is that your web app should be able to work across all browsers.

This can be achieved by identifying the core functionality of the web app and making it available using the simplest technology with an enhanced experience. An example is starting the web app with HTML for the core functionalities and then improving the user experience with other languages like CSS and Javascript.

This category also checks if the web app has a custom offline page and does not make use of the browser’s offline page because a user will always expect the web app to work like a native app that has its own offline page.

More information on the Progressive Web App category can be found here.

How to access Lighthouse locally.

Lighthouse can be accessed through various ways, and as I said earlier, one of them is through PageSpeed Insight, but the information provided when using PageSpeed Insight is less compared to that provided when Lighthouse is accessed locally.

But how can Lighthouse be accessed locally?

Using Chrome DevTools.

Install and run the Node command-line tool.

Run Lighthouse as a Chrome Extension.

1. Using Chrome DevTools:

Lighthouse house is the technology that powers the Audit panel of Chrome DevTools and can be accessed by following the steps below.

Download Google Chrome for Desktop.
In Google Chrome, go to the URL you want to audit. You can audit any URL on the web because no authorisation is needed.
Open Chrome DevTools.
Click the Audits tab found in the dropdown.
Click Perform an audit, and then Chrome DevTools displays a list of audit categories*(see image below)*. Leave them all enabled.

Click Run audit, and the report on the page is made available in about 30 to 60 seconds.

2. Install and run the Node command-line tool:

To install the Node module, follow these steps:

Download Google Chrome for Desktop.
Install the current version of Node, which is v17 as of the time of writing this article.
Install Lighthouse. The -g flag installs it as a global module.‌

npm install -g lighthouse

To run the Lighthouse audit, use:‌

lighthouse <url>

To see all the options available:‌

lighthouse --help

You can also run Lighthouse programmatically as a Node module. To do that, check out the example here.

3. Run Lighthouse as a Chrome Extension:

Among the ways of accessing Lighthouse locally, the Chrome Extension is the easiest way you can make use of it when accessing Lighthouse.

But first, you have to install the Lighthouse Chrome extension on your device. To do that, follows these step:

Download Google Chrome for Desktop.
Install the Lighthouse Chrome Extension from the Chrome Webstore.

\nAfter following the above steps to install the Lighthouse Chome Extension, you can now run an audit by:

Go to the page you want to audit in Chrome.
Click on the Lighthouse icon next to the Chrome address bar, as shown in the image below. If you can not find it there, then open Chrome’s main menu and access it at the top of the menu. After clicking, the Lighthouse menu expands.

Click Generate report. Lighthouse runs its audits against the currently-focused page, then opens up a new tab with a report of the results.

And that’s it. You now have an understanding of how to make use of Lighthouse and what exactly Lighthouse audits in a webpagee.

Running an audit on any webpage shouldn’t be a problem for you any longer, so Good luck in auditing your webpage or web app.

From us all at VitalFrog, we say thank you for staying with us till the end.