Skip to content

zachleat/speedlify-score

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

speedlify-score Web Component

Demo

Usage

Installation

npm install speedlify-score

Include Sources

Include speedlify-score.js and speedlify-score.css in your page (preferably concatenated in via a build script).

Use Markup

Use <speedlify-score> in your markup.

Required attributes:

  • speedlify-url: Required. The URL to your Speedlify instance.
  • hash: Preferred but technically optional. A hash representing the active URL.
  • url: Optional. Not used if hash is supplied. This is the raw URL of the page you’d like to see the score for. Defaults to the current page.

Examples

<!-- Preferred -->
<speedlify-score speedlify-url="https://www.speedlify.dev/" hash="bbfa43c1">
<!-- Slower method, but doesn’t require hash -->
<speedlify-score speedlify-url="https://www.speedlify.dev/" url="https://www.11ty.dev/">

Use Attributes to customize output

  • If no attributes are used, it score is implicit and default.
  • If some attributes are in play, you must explicitly add score.
  • requests
  • weight
  • rank
  • rank-change (difference between old and new rank)

Changelog

  • v1.0.0: First release
  • v2.0.0: Changes default render behavior (only shows Lighthouse scores by default, summary and weight are not). Adds feature to use attributes to customize output if you want to opt-in to more.

About

A web component that shows Lighthouse scores via Speedlify.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published