Embed · speedlify2

Embed a score

A standalone custom element that shows one site's Lighthouse scores and links to its full report. Drop it on any page — it needs nothing but the script and this instance's URL.

Live preview

Pick any measured site, or type a URL, to see the component as it renders against this instance. Hover or tab to the scores to see its summary.

<speedlify2-score speedlify-url="https://www.speedlify.dev/" url="https://arielsalminen.com/"></speedlify2-score>

Usage

Install it from npm — this is the version you want, pinned and served from your own site:

npm install speedlify2-score

Import it once, anywhere in your bundle. The element registers itself:

import "speedlify2-score";

Zero dependencies, one file, and a standard ES module, so no build step is required. speedlify2-score on npm · source

Or skip the install and download the file manually: https://www.speedlify.dev/js/speedlify2-score.js

It would be unwise to hotlink the speedlify2-score component script.

Third party JavaScript is a big no-no! Hotlinking this copy also carries no versioning, no deprecation policy and no uptime commitment: the file can change shape, move or stop being served at any time, and a page embedding it directly would break with it and with no notice. Installing from npm gives you a version you control.

However you load it, the markup is the same:

<!-- If you are not bundling, point this at your own copy -->
<script type="module" src="speedlify2-score.js"></script>

<!-- Scores for the page it sits on -->
<speedlify2-score speedlify-url="https://www.speedlify.dev/"></speedlify2-score>

<!-- Or a specific URL -->
<speedlify2-score speedlify-url="https://www.speedlify.dev/" url="https://example.com/"></speedlify2-score>

Attributes

Two, and one of them is optional. There is nothing to configure about the output: every instance renders the same six circles — the four Lighthouse categories, Core Web Vitals, and axe violations — so a page carrying several reads as one table rather than a row of different shapes. Everything else is one click away in the full report.

Attribute Effect

speedlify-url Required. This instance's URL.

url Which site to show. Defaults to the current page.

Attribute	Effect
`speedlify-url`	Required. This instance's URL.
`url`	Which site to show. Defaults to the current page.

How it finds the data

There is no index to download. The component slugifies the URL in the browser with the same rules the generator uses and fetches /api/site/<slug>.json directly. One request, under a kilobyte, for exactly the site being shown.

Several components on one page share a single fetch per URL. Normalization matches the generator's, so https://Example.com and https://example.com/ resolve to the same record.

Working out the filename is string manipulation, not cryptography, so the component needs no secure context and runs on a page served over plain http. If two sites ever claim one slug, both are published under a hash instead and read here as unmeasured — a miss rather than another site's numbers.

See arielsalminen.com's data file

Embed a filmstrip

Every site has an animated copy of its filmstrip at /site/<slug>/filmstrip/, sized for an iframe, or an empty strip where none was captured. It needs no script on your page, and plays once it scrolls into view. Add ?theme=light or ?theme=dark to override the reader's system theme.

<iframe src="https://www.speedlify.dev/site/arielsalminen-com/filmstrip/" title="arielsalminen.com filmstrip" width="100%" height="420" style="border: 0" loading="lazy"></iframe>