A new tool by Google is to test and give you the recommendation to improve performance, SEO, security, best practices, and accessibility.
Google recently launched Lighthouse, an open-source tool to audit your website manually and automatically.
What metrics are tested by Google Lighthouse?
There are more than 75 metrics it tests and gives you overall scoring. You might be interested in some of the following popular ones as a site owner, SEO analyst, and webmaster.
- Performance – time to interactive, latency, speed index, resources optimization, TTFB, asset delivery, scripts execution time, DOM size, etc.
- SEO – Mobile friendly, meta, crawling, canonical, structure, etc.
- Best Practices – Image optimization, JS libraries, browser error logging, accessible over HTTPS, known JS vulnerabilities, etc
- Accessibility – Page elements, language, ARIA attributes, etc.
- PWA (Progressive Web Application) – redirect HTTP to HTTPS, response code ok, fast loading on 3G, splash screen, viewport, etc.
It’s a fantastic tool, and you can use it in multiple ways.
That’s right – so many ways. If you are a developer, you can use Node.js to run a test programmatically. There are already a few tools in the market powered by Lighthouse that offer continuous site performance monitoring.
Let’s find out how you run the lighthouse test against your site.
Start from the easiest one.
Measure by web.dev
Google released web.dev a few months back and gained good popularity. Testing online is easy.
Go to Measure page and enter the URL to run the audit. It will take a few seconds, and you should see the detailed reporting with the overall scoring.
Results also show the success metrics test for the passed audits and work on those needs attention.
Don’t spend too much time getting 100. Even Google’s sites don’t score that.
Consider them as guidelines and try to improve as much you can.
Note: web.dev emulates a test using a Mobile device, and while writing, I don’t see an option to test using Desktop.
Do you know Lighthouse is available in your Chrome browser? And, the great news is, you can choose to test using Mobile or Desktop, and it’s available in Developer tools.
- Open Chrome browser
- Access your site to test
- Open Developer tools (Press F12 if using Windows) or right-click on the page and click Inspect.
- Go to the audits tab.
As you can see above, you have an option to choose what you want to test. This is great to focus on your goal and get the audit results faster.
Results look and feel from Chome and web.dev is almost similar.
But if you look at it carefully, there is one additional metrics group here – Progressive Web App. So another reason to audit using Chrome.
Lighthouse is available as a Node module. You can install it on your server and use it programmatically or command line. Let’s quickly check out how to install Lighthouse to run some tests.
Installing Lighthouse on Ubuntu 18.x
You will also require a chromium browser to be installed on the server. I covered the installation instruction here.
Installing Lighthouse is straightforward, as you do other modules.
- Login to your server
- Run the following command to install
npm install -g lighthouse
I am using
-g here, so it gets installed as a global module.
[email protected]:~# npm install -g lighthouse /usr/bin/lighthouse -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js /usr/bin/chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js > [email protected] postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core > node build/utils/postinstall.js + [email protected] added 179 packages from 119 contributors in 10.094s [email protected]:~#
Once installed, run
lighthouse command to ensure it has been installed correctly.
[email protected]:~# lighthouse Please provide a url Specify --help for available options [email protected]:~#
Good, the lighthouse is ready to run the audit. Let’s try some test options.
To run a test using a headless browser
lighthouse URL --chrome-flags="--headless"
You need to provide an absolute URL, including HTTP or HTTPS.
In the second last line, you can see it has printed the path to find the report. By default, it will generate a report in HTML format, which you can view either by downloading on your PC or serving it through some web server.
But, what if you have to generate a report in JSON format?
It’s doable as the following.
lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json
By using Lighthouse CLI, you are in full control to use it the way you want it. I would strongly recommend checking out the GitHub repository to learn more about using CLI or programmatically.
Google Lighthouse looks like a promising tool to perform a continuity test to improve site performance and usability. If you are using WordPress and looking to make your site load faster, check out Rocket.