• 5 min Reading
  • 1.1K Views
  • 0 Sharings
Table of contents

LightHouse 2.4.0 is an open-source project written in Javascript and began in January 2016 under Apache 2,0 License. On GitHub, it is a project of the Organisation Google Chrome knows a huge success and counts roughly 10,000 stars and 100 contributors. It is already stable, see latest release. It is an automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Logo of Lighthouse
Logo of Lighthouse

You can run Lighthouse as a Chrome Extension, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

The rapport is divided into 4 categories:

  1. Progressive Web App: tests if your app is corect progressive web app.
  2. Performance: measures if the page is loaded quickly.
  3. Accessibility: checks if the content of your page is accessible.
  4. Best Practices: checks if good practices are applied.

The goal is to have a score of 100 for each category and for each web page of your website:

Lighthouse scores by report category
Lighthouse scores by report category

You can export report under HTML or JSON format, then import these format or see directly report due to LightHouse Viewer (online version). You can install on-premises version directly from the Git repository if LightHouse Viewer .

Export, import and view LightHouse report
Export, import and view LightHouse report

The work flow of LightHouse core is described by the following chart:

Architecture of Lighthouse Core
Architecture of Lighthouse Core

See details of the architecture.

The project Lighthouse has 5 main components:

  1. lighthouse-cli: allows to call lighthouse services from command line.
  2. lighthouse-core: allows to generate report to measure the quality of your app at some urls.
  3. lighthouse-extension: allows to call lighthouse services from an Google Chrome extension.
  4. lighthouse-logger: allows common logs.
  5. lighthouse-viewer: allows to see report in your web browser or to import reports under JSON or HTML format.

Before installing LightHouse 2.4.0, we must have:

As lighthouse is a very recent project, you can use Canary version for Google Chrome.

Google Chrome, Chromium and Canary version
Google Chrome, Chromium and Canary version

I reminder in a nutshell that Google Chrome is the Chromium open source project built, packaged, and distributed by Google. You can see a few differences . It has 4 versions Stable, Beta, Dev, Canary for MAC, Windows and Linux for desktops and Android, iOS for smart phones and tablets.

For example, I can test LightHouse on this blog. Suppose that I have this file urls.txt containing one URL per line:

txt
https://glegoux.com/
https://glegoux.com/blog/
https://glegoux.com/articles/
https://glegoux.com/projects/
https://glegoux.com/snippets/
https://glegoux.com/about/

You can run this bash script to get one report by url:

i=0
for url in $(cat urls.txt); do
  echo -n "--"
  echo "$i ${url}" | tee -a matching_url_report.txt
  echo -n "--"
  lighthouse "${url}" --output=json --output-path="report-$i.json"
  $((i++))
done

I can run the python script lighthouse.py:

python3 lighthouse.py urls.txt reports.csv

See more details.

I get this csv file reports.csv. Visualize with matplotlib library:

Charts of scores for a set of URLs
Charts of scores for a set of URLs
matrix
urldatepwaperformanceaccessibilitybest-practices
https://www.glegoux.com/projects/2017-08-1745.4546.1291.4369.23
https://www.glegoux.com/blog/2017-08-1745.4548.7191.4369.23
https://www.glegoux.com/home/2017-08-1736.3636.5388.5769.23
https://www.glegoux.com/snippets/2017-08-1745.4540.8891.4361.54
https://www.glegoux.com/articles/2017-08-1745.4546.1288.5769.23
https://www.glegoux.com/about/2017-08-1736.3640.1888.5769.23

Reference

[2] https://github.com/GoogleChrome/lighthouse - LightHouse Open Source Code
[4] https://www.npmjs.com/package/lighthouse - LightHouse as NPM Javascript module

Written by Gilles Legoux (glegoux) - Software Engineer.