Embed a score
A standalone custom element that shows one site's Lighthouse scores, with a summary on hover or focus. Drop it on any page — it needs nothing but the script and this instance's URL.
Live examples
Hover or tab to a set of scores to see its summary. Each example is a real lookup against this instance. At least one emits a generator tag, so its summary carries a "Built with" row — most sites here emit none, and the row is simply absent for those.
Usage
The current version of <speedlify-score> on npm is compatible with speedlify2. The version shown here is not yet published to npm.
Download the zero dependency JavaScript file manually: https://zachleat.github.io/speedlify2/js/speedlify-score.js
Third party JavaScript is a big no-no! It 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.
<!-- You need to fix this URL to point to your speedlify-score.js -->
<script type="module" src="speedlify-score.js"></script>
<!-- Scores for the page it sits on -->
<speedlify-score speedlify-url="https://zachleat.github.io/speedlify2/"></speedlify-score>
<!-- Or a specific URL -->
<speedlify-score speedlify-url="https://zachleat.github.io/speedlify2/" url="https://example.com/"></speedlify-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 in the tooltip.
| 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.