In early 2018, Google released an SEO tool called Lighthouse that offers insight into how to improve the quality of your pages. The Google Lighthouse audit is an open-source automated tool that checks a page’s performance, accessibility, and more. Learn how to use Google Lighthouse in this usage guide to improve your site performance by testing and optimizing the site speed.
2 words you often hear together are mobile and site speed. And that’s not without reason because these two go hand in hand. Mobile-friendliness and site speed are some of the most pressing matters we have to deal with as SEOs, developers, and site owners.
Measuring page speed has always been something of a dark art. Today’s site speed tools are reasonably adequate, but another device is trying to come at it from a different, more realistic angle: Google Lighthouse. Here, I’ll look closely at how to check your mobile site speed and SEO with Google Lighthouse.
Google Lighthouse?
Lighthouse is a tool built by Google and was initially meant to audit Progressive Web Apps (PWA). The device executes four audits for accessibility, performance, Progressive Web Apps, and an extended list of best practices. Recently, Google even added a basic SEO check. Together, these give you an excellent overview of the quality and performance of your website or web app.
Site speed is all about perception and user experience. Speed in numbers means nothing if your site still feels slow. Loads of users worldwide are on rather crappy mobile connections of 3G or less.
Even with lightning-fast 4G connections, a place can feel laggy and slow. And we all know what a devastating effect a slow site can have on your conversion. Shaving milliseconds of the time needed to load your site could make a difference.
While testing, Google Lighthouse simulates visiting your mobile site via a flaky 3G connection on a slightly underpowered device. Packets are lost in an attempt to simulate real-world conditions as authentically as possible.
After running the test, you’ll get a report with a score and actionable advice with issues to tackle. Granted, the recently updated and redesigned Test My Site by Google is infinitely more beautiful but a lot less comprehensive.
PageSpeed Insights vs. Google Lighthouse
PageSpeed Insights is probably the most used site speed analysis tool out there. While it gives you a nice score and a list of possible improvements, it also gives you an idea of the perceived loading speed of your site. Also, PageSpeed Insights provides recommendations, but these are hard, if not impossible to implement – getting a 100/100 is a pipe dream for most sites.
The two most essential things PageSpeed Insights looks at:
- First Contentful Paint: This is the time it takes before a user sees a visual response from the page.
- DOM Content Loaded: This is the time it takes to parse and render an HTML document fully, ie. the requested page.
Lighthouse takes a much more practical approach and puts the user experience front and center. It visits your site over a throttled 3G connection to emulate what a real visitor in the real world would experience.
Instead of just loading your site as PageSpeed Insights does, Lighthouse checks how and when it responds to input. It finds the exact moment when your content is ready to use, so you can try and optimize that when it feels too slow. Follow this Google Lighthouse usage guide to testing your site performance and improve speed.
How to use Google Lighthouse?
You can run Google Lighthouse using the Chrome browser (in Devtools) or as a Chrome extension.
After running a website audit, Lighthouse generates a report on five different areas:
- Performance includes elements that slow down your page, including images and resources.
- Accessibility checks the accessibility of your content to users, including using assistive technologies.
- Best Practices identify any elements of web development that do not comply with current guidelines and best practices.
- SEO highlights a website’s major SEO issues, but it’s not comprehensive.
- Progressive Web App shows the performance and implementation issues of your web application.
Results
Speeding up your mobile site is two-pronged; your site must be fast and feel fast. You, therefore, need to get your content on screen as fast as possible. Don’t let people wait. Also, users must be able to interact with your content as soon as possible. Since Google announced that page speed is a ranking factor for SEO, you need to fix these issues.
What should your priority be? Load your content first. Excellent graphics and killer animations can wait. Your message – and what people are looking for. It is most likely in the range. You can load the rest of the content in the background and ease it on the screen later on. So, a good way to run performance testing in Google Lighthouse and improve site speed is by following this usage guide.
Metrics used
While measuring the performance of your mobile site, Lighthouse uses the following metrics:
- First meaningful paint: This determines how long it takes for the first significant content to appear onscreen. The lower the score, the faster that page appears.
- First interactive: This measures when a page is minimally interactive. This determines if most UI elements are interactive and if the screen responds reasonably to user input.
- Consistently interactive: This measures when a page is fully interactive.
- Perceptual speed index: This speed index shows how quickly the contents of a page are visibly populated. It also comes with a target loading time of <1,250 ms.
- Estimated latency input: This measures how long it takes for your page to respond to user input. A high latency will result in a carrier that feels sluggish or laggy. The target here is <50 ms.
- Critical requests chain: This network waterfall shows what resources are needed to render this page initially. Prioritize asset loading in the critical rendering path to speed up the page.
The Lighthouse report also features some opportunities to improve the site speed of your mobile site, including how much loading time they will save. These include reducing render-blocking stylesheets and render-blocking scripts, properly sizing images, and fixing offscreen images.
All in all, Google Lighthouse and this usage guide for performance testing give you a tremendous amount of insight into the performance of your page. Use these insights to your advantage.
The Lighthouse SEO check
The latest addition to Lighthouse is an essential SEO check. With this check, you can run a simple SEO audit to uncover a site’s fundamental SEO issues. It gives you suggestions to fix them as well. Since Lighthouse runs locally in your browser, you can also run the checks on your staging environment.
Google says the SEO check is a work in progress and currently supports only the most essential SEO checks. They actively listen to users’ feedback to improve it and add reviews to add value to SEOs.
Currently, Lighthouse checks:
- Does it have a
<meta name="viewport">tag withwidthorinitial-scale - Does the document have an
<title>Element? - Is there a meta description?
- Does the page have a successful HTTP status code?
- Do links have descriptive text?
- Does the document use legible font sizes?
- Is the page not blocked from indexing?
- Does the document have a valid
hreflang - Does the document have a valid
rel=canonical - Are there any unwanted plugins?
Also, it suggests some extra checks run manually. These include the Google Mobile-friendly Test and the Structured Data Testing tool.
How to install Google Lighthouse
Getting started with Google Lighthouse is easy as it is built into Chrome’s Developer Tools Audit panel (Mac: Shift+Cmd+I. Win: Ctrl+Shift+J or F12). From there, you can run the test and get the full report. In addition, a separate Chrome add-on for Lighthouse adds a button to your toolbar, though using it stays the same.
You can also run Lighthouse as a Node package. This way, you can incorporate the test into your build process. When using the Node package, you will also see that a couple of audits only work in a Node environment and not in the Audits panel of the DevTools.
To install Lighthouse globally from the command line use:
npm install -g lighthouse
If you want to run a test for https://example.com use:
lighthouse https://example.com
The full results of the audit will be available in the terminal and a separate HTML file.
Testing Sites
It’s time to put Lighthouse through its paces. Let’s see what happens when I shine the spotlight of the lighthouse on yoast.com. Some of the audits are most useful for Progressive Web Apps. Yoast.com isn’t available as a web app yet, so we’re only focussing on the Performance tab here. This tab shows how your site or app currently performs and shows you ways to improve it.
In the screenshot below, you can see the results for yoast.com. The initial loading of the site is visualized by a bar showing when the content first appears onscreen. It shows how many milliseconds it takes for the content to become visible. The faster, the better.
Below that graphic, you’ll find the most essential information, with a green, orange or red bar to show how well the performance is. When you want to optimize the performance of your mobile site, you need to watch the figures for the first meaningful paint, first interactive, and consistently interactive, as mentioned earlier. Also, try to lower the perceptual speed index and the estimated latency.
From the grades, you can see that visualmodo.com does OK with a 75 overall score. The first meaningful paint could be a bit better, but the first interactive and consistently interactive are good at 4,360ms. They even happen at the same time.
That’s good news, as the site is entirely useable now and appears interactive. There isn’t too much time between the first meaningful painting and the first interactive one. While these scores are reasonable, the perceptual speed could be higher. In other words, the site appears to be relatively fast but still could be speeding up in the appearance part.
Implementing site speed fixes
There’s a lot you can do to improve your site speed. While explaining all the fixes is beyond the scope of this post, most optimizations can be found in the critical rendering path. The critical rendering path is formed by objects – like CSS and JavaScript – that must load before the content can appear on the screen.
If this content is blocked, your page will render slowly or not at all. Pay attention to this and keep the path free of obstacles. Google’s Ilya Grigorik wrote a great guide on understanding and improving the critical rendering path. And please, don’t forget to optimize your images!
Test
Google Lighthouse isn’t the one site speed tool to rule them all, but it is a valuable addition to your toolkit. The SEO checks are basic but welcome nonetheless. PageSpeed Insights is a reasonably static tool that gives you a high-level overview of your site’s performance. Lighthouse is more fine-grained and gives you immediate feedback based on real-world usage. It would help if you used it along with your other page speed test tools, like WebPageTest and GTmetrix.
Are you using Google Lighthouse to testing site performance and improve speed, did this usage guide help? How do you find it? Please share your experiences and tips in the comments. I would love to hear from you!
