Menu

Lighthouse: Analyze your Web App or Web Page

May 30, 2017 - HTML, javascript, Progressive Web Aps, Tools

Lighthouse is Google’s tool for analysis of web apps and web pages. It is available as a Chrome Extension, in Chrome’s Dev Tools and as a Node.js plugin.

Logo

I am using it while developing progressive web apps because it tells me exactly what my pain points are and what I need to focus on. In this post, we will look into more advanced use case – primerely targeted at developers who know their way around console, however also web designers might gain some insight from it as the tool is really easy to use.

Lighthouse CLI Installation

For installation you will need Node.js and the following code:

sudo npm install -g lighthouse

Usage – Simple Analysis

As the first example let’s take webpage https://airhorner.com/ and analyze it. I have no doubts you will quickly memorize this command

lighthouse <URL>

CLI

At the end of analysis the URL with results will be displayed. For example:

file:///home/XXX/airhorner.com_2017-05-30_20-18-16.report.dom.html

And when you open the page you will get an overview of performance, accessibility, best practices and clear checklist of all issues the tool has encountered and opportunities to speed up your application. Make sure you review all of them and fix as many as possible.
Lighthouse Results

to open the web page with results automatically use:

lighthouse <URL> --view

Analysis with Node.js script

Finally, let’s run it as a script and save the output data in json format for later usage.

First install plugin in your project folder.

sudo npm install --save lighthouse

Next, save the script below in file checkPage.js and run it with

node checkPage.js
// checkPage.js

'use strict';

const lighthouse = require( 'lighthouse' );
const chromeLauncher = require( 'lighthouse/chrome-launcher/chrome-launcher' );
const fs = require( 'fs' );

function launchChromeAndRunLighthouse( url, flags, config = null ) {
  return chromeLauncher.launch()
    .then( chrome => {
      flags.port = chrome.port;
      return lighthouse( url, flags, config )
        .then( results =>
          chrome.kill()
          .then( () => results )
        );
    } );
}

const flags = {
  output: 'json'
};
const url = 'https://airhorner.com';

launchChromeAndRunLighthouse( url, flags )
  .then( results => {
      fs.writeFile( './result.json', JSON.stringify(results), function ( err ) {
        if ( err ) {
          return console.log( err );
        }
        console.log( 'The file was saved!' );
      } );
});

Check all the options on the official page and contribute to the development of the tool – it’s open source!

Extra resource

When you start thinking about all nuances of web app development this Progressive Web App Checklist will help you tremendously as it focuses on providing your users the best possible experiences.