speedlify2

Lighthouse lab metrics, Axe, and Chrome UX Report field data for a list of sites recorded and compared over time. Follow us on Mastodon or Bluesky.

Charts Compare Measurement runs Embed a score Open to Work

clhenrick.github.io/color-legend-element

https://clhenrick.github.io/color-legend-element

98PERF 77A11Y 100BEST 90SEO ✗AXE –CWV

Ranks Overall #1,433 Built Awesome #969

Data from Oct 3, 2026, 1:52 AM UTC old Measured once a week · 7 runs since Aug 20, 2026

Elsewhere: PageSpeed Insights · Calibre · Treo · CrUX Vis · Tame the Bots · Scoring Calculator · Wayback Machine

This URL redirects to https://clhenrick.github.io/color-legend-element/.

The same URL in a different form — a trailing slash — so both are treated as one site rather than two: one history, measured once. Lighthouse follows the redirect, so the numbers below describe the page actually served; the only cost is an extra hop on each run.

Lab data is measured using Lighthouse, Mobile mode unless otherwise specified. Field data is reported from Chrome UX Report (using p75 measurements).

Stack

Eleventy Built with Eleventy
Uses Lit 3.1.2Lit 3.1.2
GitHub Pages Hosted by GitHub Pages

Lighthouse Scores LAB Simulated

98
Performance
no change
77
Accessibility
no change
100
Best Practices
↑ +4 (+4.2%)
90
SEO
no change

Metrics LAB

No field data: the Chrome UX Report is not being collected for this project, so every figure below is from the Lighthouse run.

Metric Lab Simulated
Value Change / range Trend
LCP CWV (estimate) Largest Contentful Paint 1.97 s good ↓ -59 ms (-2.9%) 1.97 s – 2.04 s
INP CWV Interaction to Next Paint — field only, no lab run can measure it n/a —
CLS CWV (estimate) Cumulative Layout Shift 0.083 good → no change 0.083 – 0.083
TBT Total Blocking Time 24 ms good ↓ -38 ms (-61.3%) significant 10 ms – 62 ms
FCP First Contentful Paint 909 ms good ↓ -22 ms (-2.4%) 903 ms – 931 ms
Speed Index 909 ms good ↓ -22 ms (-2.4%) 903 ms – 931 ms
TTFB Time to First Byte 609 ms good ↓ -22 ms (-3.5%) 603 ms – 631 ms

LCP Subparts LAB Unthrottled

The subparts attribute LCP to your server, resource discovery, download, or rendering. Note that the Lab LCP shown above is a simulated throttled estimate.

element render delay 55 ms
time to first byte 21 ms

Page weight

Metric Value Change / range Trend
Page Weight 113 kB ↓ -5.8 kB (-5%) significant 113 kB – 119 kB
Requests 13 ↓ -1 (-7.1%) significant 13 – 14
Third-party Weight 90.4 kB ↓ -404 B (-0.4%) 90.4 kB – 90.8 kB
Third-party CPU 9 ms ↓ -2 ms (-16.5%) significant 6 ms – 12 ms
Unused JS 70.7 kB → no change 70.7 kB – 70.7 kB
Unused CSS 0 B → no change 0 B – 0 B

By resource type

Type Transfer Share Size Requests
script 92.6% 104 kB 4
document 5.5% 6.2 kB 1
stylesheet 1.7% 1.9 kB 2
other 0.2% 187 B 1
Total 113 kB 13

Third parties 1 entities

Entity Transfer Size Main thread Simulated
JSDelivr CDN script 90.4 kB 9 ms
Total 90.4 kB 9 ms

Page health

Metric Value Change / range Trend
Main Thread Work 346 ms ↓ -131 ms (-27.4%) significant 292 ms – 477 ms
Long Tasks 1 ↓ -1 (-50%) significant 1 – 2
DOM Elements 1,110 → no change 1,110 – 1,110
Axe Violations Violating nodes from a full Axe CLI run (more than Lighthouse reports) 79 → no change 71 – 79
A11y Failures 3 → no change 3 – 3
A11y Failing Nodes 61 → no change 61 – 61

Main thread work

Task Time Share Duration Simulated
style layout 33% 113 ms
script evaluation 30% 103 ms
other 22% 77 ms
script parse compile 7% 24 ms
paint composite render 5% 17 ms
parse HTML 4% 12 ms
Total 346 ms

Axe violations axe-core 4.13.0, full rule set

79 violating nodes across 4 rules, 1498 passing. This is a standalone Axe CLI run and is stricter than the subset Lighthouse already includes.

  • serious color-contrast — Elements must meet minimum color contrast ratio thresholds 42 nodes
    Offending elements (5 of 42)
    1. pre:nth-child(11) > .language-html > .tag.token:nth-child(1) > .tag.token 
      <span class="token tag"><span class="token punctuation">&lt;</span>script</span>
    2. pre:nth-child(11) > .language-html > .tag.token:nth-child(3) > .tag.token 
      <span class="token tag"><span class="token punctuation">&lt;/</span>script</span>
    3. pre:nth-child(13) > .language-html > .tag.token:nth-child(1) > .tag.token 
      <span class="token tag"><span class="token punctuation">&lt;</span>script</span>
    4. pre:nth-child(13) > .language-html > .tag.token:nth-child(3) > .tag.token 
      <span class="token tag"><span class="token punctuation">&lt;/</span>script</span>
    5. .example:nth-child(23) > pre > .language-html > .tag.token:nth-child(1) > .tag.token 
      <span class="token tag"><span class="token punctuation">&lt;</span>color-legend</span>
  • serious aria-hidden-focus — ARIA hidden element must not be focusable or contain focusable elements 18 nodes
    Offending elements (5 of 18)
    1. #install 
      <a class="anchor" id="install" href="#install" aria-hidden="true">#</a>
    2. #dependencies 
      <a class="anchor" id="dependencies" href="#dependencies" aria-hidden="true">#</a>
    3. #install-npm 
      <a class="anchor" id="install-npm" href="#install-npm" aria-hidden="true">#</a>
    4. #install-script 
      <a class="anchor" id="install-script" href="#install-script" aria-hidden="true">#</a>
    5. #windows-os-install 
      <a class="anchor" id="windows-os-install" href="#usage" aria-hidden="true">#</a>
  • serious scrollable-region-focusable — Scrollable region must have keyboard access 18 nodes
    Offending elements (5 of 18)
    1. pre:nth-child(11) 
      <pre class="language-html">
    2. pre:nth-child(13) 
      <pre class="language-html">
    3. .language-js:nth-child(16) 
      <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token string">"color-legend-element/build/color-legend-element.js"</span><span class="token p…
    4. .example:nth-child(25) > pre 
      <pre class="language-html">
    5. .example:nth-child(29) > pre:nth-child(3) 
      <pre class="language-html">
  • serious html-has-lang — <html> element must have a lang attribute 1 node
    Offending element
    1. html 
      <html>

Accessibility failures 3 of 13 audits

  • color-contrast — Background and foreground colors do not have a sufficient contrast ratio. 42 nodes
  • aria-hidden-focus — `[aria-hidden="true"]` elements contain focusable descendents 18 nodes
  • html-has-lang — `<html>` element does not have a `[lang]` attribute 1 node

SEO failures 1 of 7 audits

  • meta-description — Document does not have a meta description

Hygiene

HTTPS HSTS CSP Clickjacking protection Origin isolation Trusted Types bfcache h2

Measurement log

Every stored run for this URL, newest first.

When Scores PerfLCPCLSTBTWeight RunsSpreadBenchTook Archive
Oct 3, 2026, 1:52 AM UTC 98 1.97 s 0.083 24 ms 113 kB 3/3 ±2 3,263 +31% 23.1s Wayback
Sep 25, 2026, 11:58 PM UTC 98 2.03 s 0.083 62 ms 119 kB 3/3 ±0 2,490 0% 23.4s Wayback
Sep 18, 2026, 8:35 PM UTC 98 2.02 s 0.083 46 ms 113 kB 3/3 ±1 2,733 +10% 24.6s Wayback
Sep 11, 2026, 5:41 PM UTC 98 2.04 s 0.083 51 ms 113 kB 3/3 ±1 2,521 +1% 24.6s Wayback
Sep 4, 2026, 2:58 PM UTC 98 2.00 s 0.083 54 ms 113 kB 3/3 ±1 2,491 0% 25.1s Wayback
Aug 28, 2026, 1:58 PM UTC 98 2.00 s 0.083 48 ms 113 kB 3/3 ±2 2,470 -1% 25s Wayback
Aug 20, 2026, 7:38 PM UTC 98 1.97 s 0.083 10 ms 113 kB 3/3 ±0 4,491 +81% 21.4s Wayback

Embed this score

Use this web component to show clhenrick.github.io/color-legend-element's scores on any website, updated whenever this instance re-measures. Don’t forget to bundle the speedlify2-score.js component code into your site! 

<speedlify2-score speedlify-url="https://www.speedlify.dev/" url="https://clhenrick.github.io/color-legend-element"></speedlify2-score>