Introduction to Lighthouse

Lighthouse is an open-source tool used for improving the quality of web pages. It provides audits for performance, accessibility, progressive web apps, SEO, and more. This guide will introduce you to the basics of Lighthouse and dive into some of its useful APIs with code snippets.

Getting Started with Lighthouse

To get started with Lighthouse, you can install it via npm:

 
  npm install -g lighthouse
 

Once installed, you can run Lighthouse from the command line:

 
  lighthouse <url>
 

Using Lighthouse Programmatically

Lighthouse can be used programmatically via Node.js. Here’s an example of using Lighthouse in a Node.js script:

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

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

  const opts = {
    chromeFlags: ['--headless']
  };

  launchChromeAndRunLighthouse('https://example.com', opts).then(results => {
    console.log(`Lighthouse score: ${results.lhr.score}`);
  });
 

Lighthouse Configuration

Lighthouse allows you to customize the audits it runs through configuration files. Here’s an example of a custom Lighthouse configuration:

 
  const customConfig = {
    extends: 'lighthouse:default',
    settings: {
      onlyAudits: [
        'first-meaningful-paint',
        'speed-index'
      ],
    },
  };

  launchChromeAndRunLighthouse('https://example.com', opts, customConfig).then(results => {
    console.log(`Lighthouse score: ${results.lhr.score}`);
  });
 

Integrating Lighthouse with CI/CD

You can integrate Lighthouse into your CI/CD pipeline to ensure continuous performance monitoring. Here’s a basic example using GitHub Actions:

 
  name: Lighthouse CI

  on: [push]

  jobs:
    lighthouse:
      runs-on: ubuntu-latest
      steps:
        - name: Checkout repository
          uses: actions/checkout@v2

        - name: Install Node.js
          uses: actions/setup-node@v2
          with:
            node-version: '14'

        - name: Install Lighthouse
          run: npm install -g lighthouse

        - name: Run Lighthouse
          run: lighthouse https://example.com --output html --output-path ./lhreport.html

        - name: Upload Lighthouse report
          uses: actions/upload-artifact@v2
          with:
            name: lhreport
            path: ./lhreport.html
 

Creating a Web App with Lighthouse APIs

Here’s a simple example of a Node.js application that uses Lighthouse APIs to audit a website and display the results:

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

  const app = express();

  app.get('/audit', async (req, res) => {
    const url = req.query.url || 'https://example.com';
    const opts = {chromeFlags: ['--headless']};

    try {
      const chrome = await chromeLauncher.launch({chromeFlags: opts.chromeFlags});
      opts.port = chrome.port;
      const results = await lighthouse(url, opts).then(results => {
        return chrome.kill().then(() => results);
      });

      res.json({score: results.lhr.score});
    } catch (error) {
      res.status(500).json({error: error.message});
    }
  });

  app.listen(3000, () => {
    console.log('Server is running on port 3000');
  });
 

This app provides an endpoint /audit which accepts a URL as a query parameter and returns the Lighthouse score for that URL.

Conclusion

Lighthouse is a powerful tool for auditing and improving the quality of web pages. By leveraging its APIs, you can automate the auditing process and integrate Lighthouse into your workflow. This guide has shown you how to install Lighthouse, use it programmatically, customize configurations, integrate it into CI/CD pipelines, and create a simple web app with it.

Happy auditing!

Hash: b370de14e94142d4a108a79df6d0e265a0ba3fa2e10f57c4b3a892b74c9f84aa