Lighthouse is a useful tool that is unfortunately tucked away within depths of the Chrome browser devtools. It performs an audit of a URL that you supply and provides a report based on scoring across five categories; Performance, Progressive Web App (PWA), Accessibility, Best Practices and Search Engine Optimisation (SEO).

The easiest method of taking it for a spin is to start Chrome, go to a page of interest, press F12 then the >> button and choose Audits

20180618_1.png

which that will bring up the Lighthouse home page.

20180618_2.png

Pressing “Perform an audit” will present you with options to include or exclude one of the five categories.

20180618_3.png

You invoke Lighthouse by selecting “Run audit”.  After an interval the report will be displayed. The Lighthouse report for google.co.uk is shown below.

20180618_4.png

The top bar gives information about the URL used and the emulation options used. Immediately underneath are the five categories with a score between 0 and 100, where 0 is the lowest possible score. This page explains the Lighthouse v3 Scoring Guide.

Selecting a category will take you to the relevant section of the report.

20180618_5.png

It is also possible to invoke Lighthouse using the Node command line tool. First install it using the Node Package Manager. I have used the -g option to install it as a global module.

npm install -g lighthouse

Once installed you can then use a command such as the following to run Lighthouse. The view option automatically opens Chrome and displays the HTML report.

lighthouse https://www.google.co.uk --view

If you prefer the output in JSON the following will create a file in the directory the command was run from

lighthouse https://www.google.co.uk --output=json --output-path=./google.json

Acknowledgements

Lighthouse home page

The Building Web Applications for the next Billion Users with Ire Aderinokun episode of Hanselminutes first made me aware of Lighthouse.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: