Testing web applications in an effective way can be super-simple nowadays, thanks to many available tools. When it comes to examining basic issues, Google Lighthouse is one of the best and most popular instruments to do it, so every web developer and website owner should be familiar with it. Especially if it’s available for free, built in WebPageTest, PageSpeed Insights, Chromium based browsers (such as Chrome and Edge) and as an extension for Firefox. So why don’t you try it out on your own? This guide is the quickest way to start!
One tool for many uses
Lighthouse is a very versatile, open-source tool that lets any web developer improve the quality of what they work on. Moreover, it’s automated and as simple to use as possible, so even if you’re not a developer, but a developer’s client, you can use it to verify whether what you’re paying for meets the standards.
So, what exactly can you test with Lighthouse?
- Performance – reaction times, optimization. Lighthouse focuses on practical aspects of performance testing by checking Web Vitals metrics such as:First Contentful Paint, Speed Index, Time to Interactive, First Meaningful Paint, First CPU Idle, and Max Potential First Input Delay. Note that these metrics are subject to change over time, so tests performed in long intervals should not be compared one-to-one. You can see how crucial performance can be in Lucas Korol’s article about the meaning of performance in FinTech apps if you’re interested.
- SEO – meta information, structure, compatibility with mobile devices. In this case, the tests are rather basic and Lighthouse SEO tool should not be your go-to solution. However, the dev team is working hard to make it more powerful, so maybe in a year or two it’s going to become a major means of SEO optimization.
- Best practices – most common vulnerabilities, image optimization, use of HTTPS. Basically, ensuring that the tested website meets the standards of the web.
- Accessibility – language, page elements, ARIA attributes. This part of the test verifies whether a website can be freely accessed and used by literally everybody, including users of devices other than personal computers (such as smartphones, smart TVs and tablets) and those physically disabled (e.g. those suffering from visual impairment or paralyzed). Lighthouse checks if all elements have alt attributes, if the lang attribute in the <html> tag is correct, if the <title> tag is present. It even makes sure that the contrast between the site’s background and foreground is not too low, so the content is easily readable or if the interface is easy to use.
- PWA (Progressive Web Application) – loading times and response times on slower networks, eg. 3G, browser compatibility. A PWA is an app that works on any web browser, but can also be installed and, at least partially, run offline, too (e.g. by displaying a custom offline page). In order to be considered a progressive web app, your site needs to meet a certain set of requirements and Lighthouse can tell you if you meet these criteria or not. Note that PWA conformity is not rated in points and the tool tells you straight out if you pass or fail.
Overall, there are more than 75 different metrics that the Lighthouse tool tests to come up with the overall score!
Many ways to improve your website with Lighthouse
There are a few basic ways to use the Lighthouse tool to run tests (the easiest ones seem to be just entering the website’s address in services such as Web.dev), but we’ve prepared a quick overview of those you can run directly in your browser for you. You’ll be able to test your website on your own after reading the rest of this post!
Before you try, though, remember that in order to get the most consistent results, you’ll need to disable other web browser extensions or just use the incognito mode. It’s vital that your browser is as stock as possible, because you need to replicate what an average internaut is using.
Lighthouse Chrome tool – the easiest way to test
First one is just by clicking the Generate report button that is accessible after installing the Lighthouse Chrome extension (you can choose what you want to test by clicking the cog button).
Lighthouse Chrome tool will then run the audit and automatically generate a report in just a few seconds. It will be available for you in a newly opened tab, just like like this:
What is very helpful, besides raw information, you get a report that provides you with useful tips (including performance budgets if only you configure this feature properly), so you can start working on upgrades. In this case, we can see that the tested website could load faster if it used more current formats for image files.
Interestingly, the tool identified the website as a WordPress based one and suggested using a plugin that can automatically optimize the images. Smart!
Lighthouse with DevTools
Another way to run an audit is by accessing the tool via Lighthouse dev tools (shortcut: F12 or Control+Shift+I on Windows or Command+Option+I on Mac ).
It’s not more complicated than the method discussed above. Again, you can select which metrics you want to test from the list. Moreover, accessing Lighthouse via DevTools lets you use the Community Plugins. One of them available in the stock version of Lighthouse is Publisher Ads which tells you whether your website is optimized for ad speed and quality (pretty nifty for AdSense users).
Another cool feature available from this level is a quick preview of how your website looks on a mobile device. You can choose from a list of the most popular smartphones and tablets by toggling the Device toolbar (Ctrl+Shift+M).
Running Lighthouse from the command line
If you wish to use the Lighthouse tool in a more advanced way, for example integrating it with other processes (for instance using Lighthouse CI), it is available as a Node module. Just download the tool from nodejs.org (remember to pick the version appropriate for your system).
Then, install it using a command:
npm install -g lighthouse
After that, it becomes available globally and you can run it by simply typing lighthouse + a http address of a website you want to test, for example:
In order to see the full variety of flags and options available in the command line version of Lighthouse, type:
Get the best score you can!
There is a quirky easter egg built in Lighthouse. When your website gets top grades in all categories, you’re rewarded with a fireworks display! Jacek Kościesza of Code & Pepper challenged himself to achieve the max score and see these fireworks himself, and as a result, he created the site visible in the screenshot below.
Jacek decided to code in Golang which is a simple, yet powerful programming language created by Google. Finally, the C&P team built their own, experimental open-source web application based on microservices and containers, all with Golang’s standard library.
Is Lighthouse the ultimate testing tool?
It’s definitely one of the best automated and simple ways of performing basic tests of the non-functional requirements. It lets you optimize your website quickly and avoid the most common problems. However, Lighthouse is not a source of absolute knowledge and you should not consider everything you see in the reports your ultimate goals. At some point, you may need to turn to more specialized and advanced tools (such as Cypress for functional requirements or Security Headers for HTTP security) but they can be costly and not as simple to use. While it’s good to monitor a website with Lighthouse on your own, especially at the beginning of your journey, turning to professional software testing experts is the best option after you’ve exhausted what was available for free.