Skip to content

Add Core Web Vitals distribution histogram to tech report#1241

Draft
alonkochba wants to merge 2 commits intoHTTPArchive:mainfrom
alonkochba:feat/dev3-cwv-distribution-histogram
Draft

Add Core Web Vitals distribution histogram to tech report#1241
alonkochba wants to merge 2 commits intoHTTPArchive:mainfrom
alonkochba:feat/dev3-cwv-distribution-histogram

Conversation

@alonkochba
Copy link
Copy Markdown
Member

@alonkochba alonkochba commented Apr 7, 2026

Summary

  • Adds a collapsible histogram chart to the CWV section of the tech report drilldown page
  • Shows how origins are distributed across performance buckets for LCP, CLS, INP, FCP, and TTFB
  • Bars are color-coded green/orange/red by good/needs-improvement/poor thresholds
  • Dashed plotlines mark threshold boundaries
  • Tail buckets are aggregated into an overflow "X+" bar so all origins are visualized
  • Supports light and dark mode
  • Collapsed by default via native <details>/<summary> element
  • Fetches data from /v1/cwv-distribution API (Add /v1/cwv-distribution endpoint tech-report-apis#105), falls back to bundled sample data until the endpoint is deployed

Depends on

Pending

  • Remove bundled cwvDistributionData.json fallback once the API endpoint is live

Test plan

  • Navigate to /reports/techreport/tech?tech=Wix
  • Expand "Core Web Vitals distribution" in the CWV section
  • Verify histogram renders with colored bars and threshold lines
  • Switch between LCP, CLS, INP, FCP, TTFB metrics
  • Toggle desktop/mobile client
  • Switch to dark mode and verify colors/contrast
  • Verify the overflow "X+" bucket appears at the tail
  • Verify existing timeseries charts still render correctly
  • Verify histogram does not appear on the comparison page

Closes #1147

Adds a collapsible histogram chart to the CWV section showing how origins
are distributed across performance buckets for LCP, CLS, INP, FCP, and TTFB.
Bars are color-coded by good/needs-improvement/poor thresholds with dashed
plotlines marking the boundaries. Supports light and dark mode.

Uses hardcoded sample data for now (Wix, Feb 2026). The data will be replaced
by a live API fetch once the cwv-distribution endpoint is finalized.

Closes HTTPArchive#1147
Fetches from /v1/cwv-distribution (tech-report-apis#105) when the endpoint
is available. Falls back to bundled sample data on fetch failure until the
API is deployed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Tech Report: Histograms per KPI

1 participant