npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@foo-software/lighthouse-persist

v8.1.0

Published

A tool for persisting Lighthouse audit results used for website performance monitoring and analysis.

Downloads

907

Readme

@foo-software/lighthouse-persist

A tool for persisting Lighthouse audit results for website monitoring and analysis. Performance, SEO, progressive web app, best practices are exposed in a results object and included in an HTML report. Save reports locally or upload to your AWS S3 bucket.

See a full example report here. This HTML report is generated by lighthouse.

What it Does

  • Defines the output option as html.
  • Runs all Lighthouse audits - Performance, SEO, progressive web app, best practices. Parameters support custom Lighthouse options and configuration.
  • Extracts content of the HTML report, populates it in a file and saves locally and / or uploads to the AWS S3 bucket specified by parameters.
  • Exposes the result similar to that of using lighthouse directly.
  • Uses the latest major version of Lighthouse under the hood.

Install

npm install @foo-software/lighthouse-persist

Usage

Below are a few standard ways of using this module. See parametes and response payload for more details.

Note: to import in an ES Module enabled environment, you'll need to do something like this until we export an ES Module distribution:

import lighthousePersistPackage from '@foo-software/lighthouse-persist';
const { lighthousePersist } = lighthousePersistPackage;

Save Report to Local Directory.

const path = require('path');
const { lighthousePersist } = require('@foo-software/lighthouse-persist');

(async () => {
  const { localReport, result } = await lighthousePersist({
    url: 'https://www.foo.software',

    // example if you have an "artifacts" directory in your root directory
    outputDirectory: path.resolve('./artifacts')
  });

  console.log({ localReport, result });
})();

Upload Report to S3

const { lighthousePersist } = require('@foo-software/lighthouse-persist');

(async () => {
  const { report, result } = await lighthousePersist({
    url: 'https://www.foo.software',
    awsAccessKeyId: 'abc123',
    awsBucket: 'myBucket',
    awsRegion: 'us-east-1',
    awsSecretAccessKey: 'def456'
  });

  console.log({ report, result });
})();

Run Lighthouse with PageSpeed Insights API

There are a few benefits of running Lighthouse via PageSpeed Insights API.

  1. Offload resource consumption to Google 🙌! If you haven't noticed Lighthouse memory and CPU consumption is expensive.
  2. Get consistent results by running Lighthouse in a stable, consistent environment.
  3. Get additional data like loadingExperience and originLoadingExperience from the CrUX API (under the hood).

The downside is that you won't have all the configuration options by not using Lighthouse directly, like specific network settings and extraHeaders. But in most cases, the default settings are all you need. You can still target mobile or desktop via strategy. If using @foo-software/lighthouse-persist strategy will be derived from config.settings.emulatedFormFactor and defaults to mobile.

This module will get results from PageSpeed Insights API, and generate an HTML report (optionally), and provide the result consistently with the other examples. The only mandatory parameter to run with PageSpeed Insights API is psiKey.

const lighthousePersist = require('@foo-software/lighthouse-persist').default;

(async () => {
  const { loadingExperience, report, result } = await lighthousePersist({
    url: 'https://www.foo.software',
    awsAccessKeyId: 'abc123',
    awsBucket: 'myBucket',
    awsRegion: 'us-east-1',
    awsSecretAccessKey: 'def456',
    psiKey: 'ghi789',
  });

  console.log({ loadingExperience, report, result });
})();

Parameters

There are two different ways to persist reports. Both ways have required params. Using both is also supported. The url param is required always.

  1. Saving reports in a local directory requires the outputDirectory param.
  2. Uploading reports to S3 requires awsAccessKeyId, awsBucket, awsRegion, and awsSecretAccessKey params.

Response Payload

The result of calling the default function with the parameters above is an object with the below properties.

Taking it to Another Level

If you're interested running Lighthouse audits on your web pages automatically - check out www.foo.software. Foo runs audits automatically, stores results and provides charts in a timeline view. You can also trigger runs via Foo's public REST API and tag (with a build number for example).

Credits

This package was brought to you by Foo - a website quality monitoring tool. Automatically test and monitor website performance, SEO and accessibility with Lighthouse. Analyze historical records of Lighthouse tests with automated monitoring. Report with confidence about SEO and performance improvements to stay on top of changes when they happen!