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. Some of the following popular one you might be interested in as a site owner, SEO analyst, webmasters.
- 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.
Its fantastic tool and you can use in multiple ways.
That’s right – so many ways. If you are a developer, you can use it with Node.js to run a test programmatically. There are already few tools in the market powered by Lighthouse who offer continuous site performance monitoring.
Let’s find out how you run 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 so well done 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 emulate 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. 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 audits tab
As you can see above, you have an option to choose what you want to test. This is great as you can 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 carefully, there is one extra metrics group here – Progressive Web App. So another reason to audit using Chrome.
Lighthouse is available as a Node module. You can get it installed on your server and use it programmatically or command line. Let’s quickly check out how to install Lighthouse to run some test.
Installing Lighthouse on Ubuntu 18.x
You will also require 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 get installed as 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 installed correctly.
[email protected]:~# lighthouse Please provide a url Specify --help for available options ro[email protected]:~#
Good, 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 where I can find the report. By default, it will generate a report in HTML format which you can view either by downloading on your PC or serve it through some web server.
But, what if you have to generate a report in JSON format?
It’s doable as the following.
lighthouse <span style="color: #ff0000;">URL</span> --chrome-flags="--headless" --output json --output-path <span style="color: #ff0000;">URL</span>.json
By using Lighthouse CLI, you are in full control to use the way you want it. I would strongly recommend to check out the GitHub repository to learn more about using CLI or programmatically.
Google Lighthouse looks promising tool to perform a continuity test to improve site performance and usability. If you are using WordPress and looking to make your site loads faster then check out Rocket.