A website isn’t something that you can set and forget. To attract visitors, you’ll need to update your website with new pages of high-quality content. Creating new pages, however, may result in performance issues.
Pages with images saved in an old-generation format will load slower than those saved in a next-generation format. Alternatively, pages with minimal contrast between the background and foreground will suffer from poor accessibility. You can identify problems such as these, however, by using Google’s Lighthouse tool.
What Is Lighthouse?
Lighthouse is an open-source performance auditing tool. Originally developed by Google, it’s designed to help website owners analyze and improve their pages’ performance.
Lighthouse will test the performance of pages by analyzing dozens of different factors.
You can use Lighthouse to audit the performance of any page. It will run a variety of tests on the page. After completing the tests, Lighthouse will display a set of scores along with detailed information about the page.
Lighthouse leverages five categories of tests, including performance, accessibility, best practices, search engine optimization (SEO), and progressive web app. Performance tests focus on speed. Accessibility tests focus on the ease at which visitors can see and use the page. Best practices tests focus on trust, safety, and overall security. SEO tests focus on optimization for search engine crawlers. And progressive web app tests focus on whether or not the page functions as a progressive web app.
Ways to Access Lighthouse
There are several ways to access Lighthouse. As a Google-developed tool, it’s built into the Chrome web browser. You can access Lighthouse in Chrome by clicking the menu icon on the toolbar, followed by “More tools” and then “Developer tools.” Another way to access it in Chrome is to right-click anywhere on a page and select “Inspect.”
Assuming you’ve never used this Chrome feature before, you may need to navigate to Lighthouse. Clicking “Developer tools” or “Inspect” will generate a new sidebar next to the open page. Within this sidebar is the page’s source code along with a row of buttons at the top. To access Lighthouse, click the forward-facing arrow icon to the right of these buttons and choose “Lighthouse.”
There are web browser extensions for Lighthouse as well. Both Chrome and Firefox have a Lighthouse extension. You can download a Lighthouse extension, and after activating it, you should be able to access Lighthouse by clicking a button in your web browser’s toolbar.
Accessing Lighthouse will prompt it to run tests on the open page. In other words, Lighthouse will test whichever page you are viewing when you open it. To audit the performance of your homepage, access Lighthouse while viewing your homepage. To audit the performance of any other page, just access Lighthouse with the page open in your web browser.
Tips for Using Lighthouse
You’ll see a set of scores when using Lighthouse. With the exception of progressive web app pages, Lighthouse will display four scores for any given page. It will display a zero to 100 score for each category – performance tests, accessibility tests, best practices tests, and SEO tests. High scores indicate a high-performing, properly optimized page.
While they feature a specific number, Lighthouse scores are color-coded. Scores ranging from zero to 49 are red, indicating poor performance. Scores ranging from 50 to 89 are orange, indicating the page needs improvement. Scores ranging from 90 to 100 are green, indicating the page is good to go.
Below the color-coded scores in Lighthouse are details about the tests used to generate those scores. You can see how Lighthouse calculated the page’s scores in this area. Performance scores, for instance, are based on First Contentful Paint (FCP), Largest Contentful Paint (LCP), time to interactive, Speed Index, total blocking metric time, and Cumulative Layout Shift (CLS).
There are sections for each category of tests. You can scroll to a particular section to determine how Lighthouse calculated that score. More importantly, Lighthouse will reveal problems attributed to low scores and solutions to fix them. Failure to use Hypertext Transfer Protocol Secure (HTTPS), for example, may result in a low best practices score, whereas an invalid robots.txt file may result in a low SEO score.
Lighthouse tests pages from a mobile perspective. It will run the tests while viewing the page in the same viewports as smartphones and tablets. Therefore, optimizing the desktop version of a page may not improve its Lighthouse scores. Only changes made to the mobile version of a page will affect its Lighthouse scores.
Keep in mind that web browser extensions can negatively affect your Lighthouse scores. You can use the Lighthouse extension without any ill effect. If you have other extensions installed, though, you may want to disable them. Disabling extensions will allow Lighthouse to produce more accurate scores.
Lighthouse won’t directly improve the performance of a given page. It’s simply a performance auditing tool that provides insight into the strengths and weaknesses of pages. You’ll need to take action after using Lighthouse. If a page has one or more low scores, fix it.
Lighthouse vs. PageSpeed Insights
Lighthouse isn’t the same as PageSpeed Insights. While they are both Google-developed tools that are used for performance auditing, Lighthouse is more comprehensive.
PageSpeed Insights only runs speed-related tests. It uses the same formula as Lighthouse’s performance tests, and it displays a similar color-coded number based on that formula. PageSpeed Insights goes deeper into page performance.
When using Lighthouse, you’ll see other sections for other test categories. It still has a section for speed-based performance, but Lighthouse offers other sections that aren’t available in PageSpeed Insights. The SEO section details the page’s SEO, whereas the accessibility section details the page’s accessibility to visitors. PageSpeed Insights, conversely, only runs speed-based performance tests.
Lighthouse offers an easy way to audit the performance of pages. You can access it in Chrome or by downloading an extension. When you visit a page on your website and then launch Lighthouse, it will run a series of tests on the page. You can then fix any weaknesses that adversely affected the page’s scores.