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

performance-leaderboard

v11.6.1

Published

A plugin to run Lighthouse against a set of urls to see which site is the fastest.

Downloads

1,022

Readme

performance-leaderboard

A plugin to run Lighthouse against a set of urls to see which site is the fastest.

Installation

npm install performance-leaderboard

Features

  • Median Run Selection: performance-leaderboard will run Lighthouse on the same site multiple times and select the Median run. It factors in First Contentful Paint, Largest Contentful Paint, and Time to Interactive when selecting the median run.

Usage

  1. Create a test file, say sample.js:
const PerfLeaderboard = require("performance-leaderboard");

(async function() {

	let urls = [
		"https://www.gatsbyjs.org/",
		"https://nextjs.org/",
		"https://www.11ty.dev/",
		"https://vuejs.org/",
		"https://reactjs.org/",
		"https://jekyllrb.com/",
		"https://nuxtjs.org/",
		"https://gohugo.io/",
	];

	// Create the options object (not required)
	const options = {
		axePuppeteerTimeout: 30000, // 30 seconds
		writeLogs: true, // Store audit data
		logDirectory: '.log', // Default audit data files stored at `.log`
		readFromLogDirectory: false, // Skip tests with existing logs
		// onlyCategories: ["performance", "accessibility"],
		chromeFlags: ['--headless'],
		freshChrome: "site", // or "run"
		launchOptions: {}, // Puppeteer launch options
	}

	// Run each site 3 times with default options
	console.log( await PerfLeaderboard(urls) );

	// Or run each site 5 times with default options
	console.log( await PerfLeaderboard(urls, 5) );

	// Or run each site 5 times with custom options
	console.log( await PerfLeaderboard(urls, 5, options) );
})();
  1. Run node sample.js.
[
	{
		url: 'https://www.11ty.dev/',
		requestedUrl: 'https://www.11ty.dev/',
		timestamp: 1623525988492,
		ranks: { hundos: 1, performance: 1, accessibility: 1, cumulative: 1 },
		lighthouse: {
			version: '8.0.0',
			performance: 1,
			accessibility: 1,
			bestPractices: 1,
			seo: 1,
			total: 400
		},
		firstContentfulPaint: 1152.3029999999999,
		firstMeaningfulPaint: 1152.3029999999999,
		speedIndex: 1152.3029999999999,
		largestContentfulPaint: 1152.3029999999999,
		totalBlockingTime: 36,
		cumulativeLayoutShift: 0.02153049045138889,
		timeToInteractive: 1238.3029999999999,
		maxPotentialFirstInputDelay: 97,
		timeToFirstByte: 54.63900000000001,
		weight: {
			summary: '14 requests • 178 KiB',
			total: 182145,
			image: 124327,
			imageCount: 10,
			script: 7824,
			scriptCount: 1,
			document: 30431,
			font: 15649,
			fontCount: 1,
			stylesheet: 3914,
			stylesheetCount: 1,
			thirdParty: 15649,
			thirdPartyCount: 1
		},
		run: { number: 2, total: 3 },
		axe: { passes: 850, violations: 0 },
	}
]

Rankings

In the return object you’ll see a ranks object listing how this site compares to the other sites in the set. There are a bunch of different scoring algorithms you can choose from:

  • ranks.performance
    • The highest Lighthouse performance score.
    • Tiebreaker given to the lower SpeedIndex score.
  • ranks.accessibility
    • The highest Lighthouse accessibility score.
    • Tiebreaker given to lower Axe violations.
    • Second tiebreaker given to highest Axe passes (warning: each instance of an Axe rule passing is treated separately so this will weigh heavily in favor of larger pages)
  • ranks.hundos
    • The sum of all four Lighthouse scores.
    • Tiebreaker given to the lower Speed Index / Total Page Weight ratio.
  • ranks.cumulative (the same as hundos but with an Axe tiebreaker)
    • The sum of all four Lighthouse scores.
    • Tiebreaker given to the lower Axe violations.
    • Second tiebreaker given to the lower Speed Index / Total Page Weight ratio.

Changelog

  • v11.0.0 Update lighthouse to v11, requires Node >= 18.16.
  • v10.0.0 Update lighthouse to v10, requires Node 16.
  • v9.0.0 Update lighthouse to v9.0. Removes carbonAudit, upstream API was removed.
  • v5.3.0 Update lighthouse from v8.2 to v8.5
  • v5.2.0 Update lighthouse from v8.0 to v8.2
  • v5.1.0 Adds axePuppeteerTimeout option. Adds carbonAudit option.
  • v5.0.0 Update lighthouse to v8.0
  • v4.1.0 Update lighthouse to v7.3
  • v4.0.0 Major version upgrade of lighthouse dependency from v6.5 to v7.2