If you’re not a developer/designer, you may not be familiar with the Chrome DevTools and the extremely powerful Google Lighthouse Audits that can be found inside. However, you have likely used the Web UI that Google uses to allow you to test websites for speed – Google PageSpeed Insights. We’ve covered PageSpeed Insights in-depth, but there are some key differences between the two.
Lighthouse is a completely open-source tool that allows users to test any website in a multitude of ways. You can use it through the Chrome Dev tools, through the command line, or as a Node module if you really want to get your hands dirty.
While PageSpeed Insights focuses solely on speed/performance, Lighthouse offers even more. It offers audits for best practices, accessibility, progressive web apps, SEO and of course, performance. Let’s take a look at how to get the most out of this powerful tool.
Getting Started with Google Lighthouse
To use Lighthouse through the Chome Dev tools, simply open the DevTools and navigate to the Audits tab. You can do this on Windows by hitting F12 or Ctrl + Shift + I. On a Mac, you can hit Command+Option+I. On either platform, you can also right-click on the page, and click ‘Inspect’.
Intimidated by the DevTools area? Good news! You can also use Lighthouse through a very simple-to-install Chrome extension. After installing that extension, you’ll see a small Lighthouse icon next to your address bar. Upon clicking that, you’ll be able to run audits as well by clicking the ‘Generate Report’ button.
Regardless of the method you used to navigate to Lighthouse, once inside, the UI makes it very easy to set everything up. Simply select the audits that you would like to run. Finally, decide if you want to throttle your test to a certain speed, and run the audit. Within a minute, Lighthouse will create a full report across the various tests that you had it perform. It will also suggest improvements and point you in the direction of helpful documentation
What Does Google Lighthouse Test?
Here you’ll find the usual page speed metrics such as Speed Index, First Contentful Paint, Time to Interactive, etc. We’ve covered those in-depth before, so feel free to view that article to see more information on those.
In addition, you’ll see a filmstrip of your site loading, as well as some additional diagnostics. These are typically a measure of how fast the site gets content up on the screen. This is especially helpful in measuring how your visitors are perceiving the site’s speed.
One of the greatest advantages of using a tool created by Google is the insights it gives into SEO optimizations. Note: the current audit is fairly basic, and won’t replace some of the more robust SEO tools out there. However, Google has said that it plans to bring more features to this test.
Even in its current form, this test is great when used to make sure nothing is critically wrong with your SEO. For example:
- The page isn’t blocked from indexing
- All images have alt tags
- robots.txt is valid
- The document has a meta description
These checks ensure that your website or web app is accessible to all visitors. They offer suggestions on the legibility of your content, such as the contrast and how easy it is to read the text. Essentially, if a visitor with a visual impairment was to come to your site, how accessible is your site?
Similar to the SEO test, your site will be checked for tags that make a screen reader’s job easier. Alt tags, title tags, and accessible button names are all checked, to name a few.
Progressive Web App
For the most part, if you’re testing a regular website, this particular test won’t have a ton of applications. However, if you’re auditing a Web App, it offers some great insight. Specifically, does the page load within an acceptable speed on mobile devices? Does the PWA use HTTPs? Is the app served from a secure location? These checks ensure that you’re able to deliver a great PWA with an application-like feel to your consumers.
Getting The Most Out of Google Lighthouse
As we mentioned, you can run Lighthouse audits on any web page. Because of this, you can gain an incredible amount of insight into how other sites are optimized. This includes any similar website that operates in the same niche as you.
It’s incredibly valuable to see how you stack up to your competition and see what areas your competitors are lacking. If you can beat them out in performance, SEO, accessibility and best practices, you’re giving your website (and your business) a huge leg up.
After all, ranking in Google’s search results is an ever-evolving competition. Lucky for you, one of the best cheat codes is free and open-source.
It can feel overwhelming to try and stay informed of all of the areas that your site needs to perform well. SEO, page speed optimization, and web accessibility are all somewhat intricate topics to cover. Thankfully, Google offers us the use of this incredible tool that gives anyone an audit into each of these areas.
The best part is that their documentation is incredible. For each audit, whether your site passes or fails, you can click through to learn how to fix that specific issue. What kind of results do you get when you run your site through this tool? Are you ahead of your competitors or do you have some catching up to do? Let us know below!
Are you using Speedy Site?
Website speed optimization with speedy.site ensures your WordPress site is loading fast throughout the day, around the world, and on various devices as well as passing Google's code web vitals.