Lighthouse is an open-source Google tool that analyzes the performance of web pages. While its focus is web applications and mobile sites, it still provides a lot of useful information and recommendations that can make any website better.
When you optimize a website with mobile in mind, you’re almost always improving its general performance in a desktop web browser as well. And mobile optimization can benefit every website developer.
Google and Website Optimization
While Google’s primary focus has always been searching, for many years they have also been building tools to help website owners increase the performance and indexability of their sites.
You may have used their Mobile-Friendly Test application or Test My Site. Or my favorite of the Google SEO tools, the Structured Data Testing Tool.
If you haven’t taken advantage of any of those resources, do yourself a favor and take a look at them. But be prepared to be presented with a lot of recommendations for improvements.
The amount of information that you can get from the tools can be overwhelming. But if you address one issue at a time, eventually you’ll scale the website performance mountain.
Every time I load up a Google developers tool I end up spending an hour (or two, or three) making website changes. I may not want to spend that time on things that most of my site visitors will never see, but I always feel better knowing that my site’s performance has been improved.
And it helps to know that I’m gaining a competitive advantage over sites that aren’t working to increase performance.
Another tool I’ve mentioned in a previous article is PageSpeed Insights. Today we’re going to focus on the tool that powers PageSpeed Insights: Lighthouse.
What Is Google Lighthouse?
Lighthouse is an application that runs a number of tests called an “audit.” This analyzes information on a web application or website page. It then creates a report on how well the app or page performed.
The audit involves loading the page over a simulated, weak 3G connection while viewing it on a slow device. It also simulates packet or data loss, network and CPU throttling.
Basically, it looks at the page the way it might appear to someone on an older phone with a less-than-awesome connection.
That might seem like stacking the deck against the page. Even the greatest, fastest, most optimized page in the world would suffer under such conditions.
The idea is to improve speed. And if you can improve the speed under conditions that stress the page, performance is going to really improve on a fast device connected to a fast network.
When viewing the results of a page audit, good results are a score of 90-100. The average is 50-89, and poor is 0-49. According to Google, any score above 90 ranks you in the top 5% of well-functioning websites.
What Does Lighthouse Test?
Performance
The perception of speed is as important as actual speed. For that reason, the Lighthouse report focuses on a number of things related to displaying content on the screen as quickly as possible. It also tests the ability of users to interact with the content.
The Performance section of the report includes:
- First Contentful Paint is a measure of how long it takes for the content of any kind to appear onscreen.
- First Meaningful Paint is how long it takes for the first meaningful content to appear onscreen. The lower the score, the faster that page appears.
- Speed Index is a site speed test that shows how quickly the contents of a page are viewable. The index is based on a load time under 1.25 seconds.
- First CPU Idle is the time when the device is no longer working to render the page.
- Time to Interactive measures when a page is interactive. This means most of the user interface elements are interactive and the screen responds to user input.
- Estimated Input Latency measures how long it takes for a page to respond to user input. The lower the latency, the faster the page will feel. The target for input latency is less than 50 milliseconds.
Accessibility
The Accessibility section of the report includes checks for a page heading. It also includes whether background and foreground colors have enough contrast, a document title tag, link names, and whether the viewport is viewer-scalable.
The Lighthouse Accessibility section also provides a list of “Additional items to manually check.” This is because it isn’t possible to automate a check of all of the relevant benchmarks.
Best Practices
The Best Practices section of the report checks for HTTPS, application cache and the safety of cross-origin links. It also looks at requests for geolocation permission, vulnerable JavaScript libraries, deprecated APIs and whether users can paste into password fields. Something else to consider is how images are displayed with the correct aspect ratio.
SEO
Lighthouse comes from Google, so you know it’s going to include some SEO information and recommendations.
It’s a pretty basic test, though. It looks for page tags and status codes, so don’t rely on Lighthouse as a strict SEO tool. However, Google has indicated that they intend to expand the SEO checks that Lighthouse performs.
The Lighthouse SEO section also provides a list of “Additional items to manually check.” At the time of this post, the check only includes a link to the Structured Data Testing Tool.
Progressive Web App
When you run a lighthouse audit on a regular web page most of the results here are not applicable.
But there are a few helpful checks.
- Whether the page load is fast enough on mobile networks.
- A check that the content is sized correctly for the viewport.
- Whether the page has a meta name=”viewport” tag with width or initial-scale.
- A check for content when JavaScript is not available.
Using Lighthouse
Now that you know what it can do, you’re probably anxious to give Lighthouse a try.
If you use the Google Chrome browser you already have access to Lighthouse (look for the Audits tab in DevTools). If you find the Chrome DevTools to be a bit of a maze (because they are!), you can install the Lighthouse Chrome extension.
If you don’t want to install the Chrome browser, you can still use Lighthouse. There’s a Node command line version if you’re into that kind of thing or you can access most of the Lighthouse tools by visiting the PageSpeed Insights site.
I mentioned that Lighthouse audits a page, meaning a single page at a time. It doesn’t crawl a site and audit multiple pages. But many parts of the Lighthouse report deal with issues that are likely site-wide. This includes things like render-blocking javascript.
So a single page audit can tell you a lot.
But if you have distinctly different sections on your site, like a blog or forum along with static pages, you should test each of the sections individually. In those cases, there will almost always be optimization steps that apply to one part of the site but not another.
Analyzing a Page
Performing a page audit with Lighthouse couldn’t be easier.
Using the Chrome Extension
- Install the Lighthouse Chrome Extension.
- Load the page you want to audit in the Chrome browser.
- Click the Lighthouse icon next to the Chrome address bar.
- Click the “Generate report” button.
Lighthouse will run its audits and open a new tab with the report.
Opening Lighthouse in Chrome DevTools
- Load the page you want to audit in the Chrome browser.
- Open Chrome DevTools.
- Windows: F12 key, or Control+Shift+I
- Mac: Command+Option+I
- From Chrome’s main menu: Click “Customize and control Google Chrome” in the upper right corner, then select More Tools > Developer Tools.
- Click the Audits tab.
- Click the “Run audits” button.
Lighthouse will run its audits and display the report in the DevTools pane or window.
Caring About Performance is an Automatic Competitive Advantage
As you may have realized by now, you can run Lighthouse on any page on the web. Which means you can go beyond your own pages.
Not long ago, I ran Lighthouse on a number of high-profile sites thinking I could learn a thing or two from the way the “big guys” do things. I was surprised instead to see how many things most of the big guys are doing wrong.
High-profile sites have other advantages over the rest of us. And most of us are not in direct competition with them. But it’s fun to see how your site or sites stack up against multi-million dollar corporations.
It’s also valuable to see how you stack up against sites that are direct competitors. If you can make your site perform better than theirs, you can gain a technical advantage.
If you’re not selling a product or you’re just not the competitive type, you may not believe that there is any such thing as competition with another website. But Google’s search results are a kind of competition. If you want your site to be found in those results, you’re competing with thousands of similar sites to be seen.
Use Lighthouse to Improve Performance
When you care about performance and actively work to improve it, you already have an advantage. Luckily Google gives us access to a lot of tools that can make that job a lot easier.
Lighthouse is one of those tools.
If you’re willing to put in the time and the effort necessary to keep improving your websites, the sky is the limit.