Introduction to Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. It provides audits for performance, accessibility, progressive web apps, SEO, and more. Using Lighthouse can significantly enhance a website’s visibility and usability.

How to Use Lighthouse

To get started with Lighthouse, you can run it in Chrome DevTools, from the command line, or as a Node module. Below are some examples demonstrating how to use these various options.

Running Lighthouse in Chrome DevTools

  1. Open Chrome DevTools (F12 or right-click on the page and select "Inspect").
  2. Go to the "Lighthouse" tab.
  3. Click "Generate report" to perform an audit on the current page.

Running Lighthouse from the Command Line

First, install Lighthouse via npm:

  npm install -g lighthouse

Then, you can run it on a URL:

  lighthouse https://example.com --output html --output-path ./report.html

Using Lighthouse as a Node Module

To integrate Lighthouse into your build process or CI/CD pipeline, you can use it as a Node module. Here is an example:

  const lighthouse = require('lighthouse');
  const chromeLauncher = require('chrome-launcher');
  
  (async () => {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance']};
    const runnerResult = await lighthouse('https://example.com', options);
    
    // `.report` is the HTML report as a string
    const reportHtml = runnerResult.report;
    console.log(reportHtml);
    
    await chrome.kill();
  })();

Useful APIs Provided by Lighthouse

Here are some useful APIs that Lighthouse provides to analyze and improve your web applications:

Audit API

  const {Audit} = require('lighthouse');
  
  class CustomAudit extends Audit {
    static get meta() {
      return {
        id: 'custom-audit',
        title: 'Custom Performance Audit',
        failureTitle: 'Custom audit failed',
        description: 'A custom audit for better performance.'
      };
    }
    
    static audit(artifacts) {
      const loadMetrics = artifacts.metrics;
      const score = (loadMetrics.speedIndex <= 3000) ? 1 : 0;
      return {
        score
      };
    }
  }

Logger API

  const log = require('lighthouse-logger');
  
  log.setLevel('info');
  
  log.info('Starting Lighthouse audit...');

User Flow API

  const {UserFlow} = require('lighthouse');
  
  const flow = new UserFlow({
    config: {
      extends: 'lighthouse:default'
    },
    root: 'https://example.com'
  });
  
  await flow.startTimespan();
  await page.click('button#start');
  await flow.endTimespan();

Application Example Using Lighthouse APIs

Here is an example of a small Node.js application that uses various Lighthouse APIs to run performance audits on a specified URL and log the results in a custom format.

  const lighthouse = require('lighthouse');
  const chromeLauncher = require('chrome-launcher');
  const log = require('lighthouse-logger');
  
  log.setLevel('info');
  
  (async () => {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'json', onlyCategories: ['performance']};
    const runnerResult = await lighthouse('https://example.com', options);
    
    log.info('Lighthouse audit completed.');
    
    const reportJson = runnerResult.report;
    console.log('Report:', JSON.parse(reportJson));
    
    await chrome.kill();
  })();

By using the API and examples mentioned above, you can integrate Lighthouse into your project, automate auditing processes, and enhance your web application's performance and SEO.

Hash: b370de14e94142d4a108a79df6d0e265a0ba3fa2e10f57c4b3a892b74c9f84aa