Google Lighthouse is a tool to easily audit the fundamental properties of a modern website: performance, PWA integration, accessibility, SEO, and other Best Practices. Performance is the focus of most attention because the display speed is still the Achille’s heel of numerous websites.
Terminology in Lighthouse:
Performance: How fast a page downloads and displays.
Progressive Web Apps: Website and app integration. Pages using progressive web apps (PWA) can work offline, you can launch them by clicking a desktop icon, they can run in the background, they may not have the address line in the window, and so on.
Accessibility: Usability for the disabled (most frequently the visually impaired).
SEO: Search engine optimisation.
Lighthouse is coded in JavaScript and can, therefore, run as part of the Google Chrome Web Inspector, as a hosted service, or as a CLI tool. It can be easily integrated into many other services and tools. Last year, Lighthouse started powering Google Pagespeed Insights, which had been the most frequently used tool to check web speeds.
So how do you do it?
The easiest way to get a report from Google Lighthouse is through the Audits tab in the Google Chrome Web Inspector:
Here you choose what to audit and how much to choke the performance of your computer and your internet connection.
If you want to use a command line instead of clicking on tabs, all you need to do is install the right NPM bundle and call Lighthouse with the selected parameters:
$ npm install -g lighthouse
$ lighthouse https://www.kurzor.co.uk/The report from CLI can be saved as CSV or JSON.
A report showing the results pops up after the audit is finished. Each section starts with the total score and an overview of shortcomings. The performance section is then amended with a table listing the KPIs (key performance indicators), and a film roll visualizing the progress of page display.
It’s no good dealing with the score and the KPIs right now – we’ll tell you why later on.
Let’s now move on to the overview of the shortcomings. Each item on the list usually shows the estimated time savings and a link to documentation dealing with the given issues.
In this example, Lighthouse gives you a tip on how to save 0.65s by removing unused portions of CSS and even tells you which ones they are.
Lighthouse pinpoints the problematic elements of a website and invites you to check manually where even Lighthouse is unsure. It’s up to you to fix the errors identified :-)
If you stick to all the recommendations, you can be sure to see the rewards coming soon. The download speed and page display progression drive the ranking of the search results and ads on Google, having a great impact on the conversion rate of the entire website.
Evaluation
After fixing all the shortcomings found, now is finally time to come back to the score and the KPIs.
If you run the audit again, you get notably better numbers. This is the moment the numbers finally start making sense. The trend of your score over time or a comparison to your competition is much more important than the absolute value.
It’s easy to develop/modify pages using the best practices but keeping the website in a good shape all the time is much more difficult. There is always a threat of performance going down with each website update for a zillion reasons:
- someone has inserted a bandwidth consuming carousel in the page;
- you forgot about minification when you updated stylesheets;
- a new typeface has been added;
- the new team photo is too big;
- and much more...
The only way to avoid this is a regular KPIs check-up. Each time the numbers get worse, you need to ask yourself: Is this modification worth the drop in performance? Is there any better way to do it?
This is what Google Lighthouse helps you with. As we said in the beginning, Lighthouse integrates into other services easily. For example, you can integrate it in your own tool for automatic project assembly and launch (CI / CD), being sure that the website you’ve worked on so hard to finetune does not deteriorate step by step.
Conclusion
Slow speed is a problem like any other, which is why you need to test speed just as consistently as you do other aspects of your website. Google Lighthouse can be extremely helpful as a natural part of your development process.
