Introduction to Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. It can be run against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. This guide introduces Lighthouse and provides numerous API examples to help you leverage its full potential.

Setting Up Lighthouse

You can install Lighthouse as a Node module for programmatic access:

npm install -g lighthouse

Basic Usage

Run Lighthouse from the command line to generate a report for a given URL:

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

Using Lighthouse Programmatically

To run Lighthouse programmatically, you can use the Node API:

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

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {output: 'json', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log(`Report is done for ${runnerResult.lhr.finalUrl}`);
  console.log(`Performance score: ${runnerResult.lhr.categories.performance.score * 100}`);

  await chrome.kill();
})();

Customizing the Lighthouse configuration

You can customize the Lighthouse configuration to suit your needs:

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

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance']
  }
};

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {output: 'json', port: chrome.port, config};
  const runnerResult = await lighthouse('https://example.com', options);

  console.log(`Report is done for ${runnerResult.lhr.finalUrl}`);
  console.log(`Performance score: ${runnerResult.lhr.categories.performance.score * 100}`);

  await chrome.kill();
})();

Extracting Specific Details from Reports

You can extract detailed information from the Lighthouse report:

// Extract information about opportunities
const opportunities = runnerResult.lhr.audits['first-meaningful-paint'].details;

console.log('Opportunities:', opportunities);

Integrating Lighthouse with a CI/CD Pipeline

Integrating Lighthouse into your CI/CD pipeline ensures ongoing performance monitoring:

steps:
  - uses: actions/checkout@v2
  - name: Run Lighthouse
    run: |
      npm install -g lighthouse
      lighthouse https://example.com --output json --output-path report.json

Creating a Web App with Lighthouse

Below is an example of a simple web application that leverages the Lighthouse API for performance auditing:

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

const app = express();

app.get('/audit', async (req, res) => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {output: 'json', port: chrome.port};
  const runnerResult = await lighthouse('https://example.com', options);

  await chrome.kill();

  res.json({performance: runnerResult.lhr.categories.performance.score * 100});
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

By leveraging Lighthouse, you can significantly enhance the quality and performance of your web applications. Keep optimizing and stay ahead!

Hash: b370de14e94142d4a108a79df6d0e265a0ba3fa2e10f57c4b3a892b74c9f84aa