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.

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>

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.

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.

• Site is served over HTTPS
• Pages are responsive on tablets & mobile devices
• The start URL (at least) loads while offline
• Metadata provided for Add to Home screen
• First load fast even on 3G
• Site works cross-browser
• Page transitions don’t feel like they block on the network
• Each page has a URL
• Indexability & social
• Site’s content is indexed by Google
• Schema.org metadata is provided where appropriate
• Social metadata is provided where appropriate
• Canonical URLs are provided when necessary
• Pages use the History API
• User experience
• Content doesn’t jump as the page loads
• Pressing back from a detail page retains scroll position on the previous list page
• When tapped, inputs aren’t obscured by the on screen keyboard
• Content is easily sharable from standalone or full screen mode
• Site is responsive across phone, tablet and desktop screen sizes
• Any app install prompts are not used excessively
• The Add to Home Screen prompt is intercepted
• Performance
• First load very fast even on 3G
• Caching
• Site uses cache-first networking
• Site appropriately informs the user when they’re offline
• Push notifications
• Provide context to the user about how notifications will be used
• UI encouraging users to turn on Push Notifications must not be overly aggressive.
• Site dims the screen when permission request is showing
• Push notifications must be timely, precise and relevant
• Provides controls to enable and disable notifications
• Additional features
• User is logged in across devices via Credential Management API
• User can pay easily via native UI from Payment Request API.