Showcase

Each example shows real output produced by astro-webvitals itself, from files in the project repository. Input on the left, output on the right.

Default component output

examples/output/default.htmlDetail →

---
import { WebVitals } from "@casoon/astro-webvitals";
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Default</title>
	</head>
	<body>
		<h1>Default</h1>
		<WebVitals />
	</body>
</html>

<script>(function(){const config = {
  "debug": false,
  "consoleDock": false,
  "position": "bottom-right",
  "desktopPositions": {
    "top-right": "top: 16px; right: 16px;",
    "top-left": "top: 16px; left: 16px;",
    "bottom-right": "bottom: 16px; right: 16px;",
    "bottom-left": "bottom: 16px; left: 16px;"
  },
  "mobilePosition": "bottom: 0; left: 0; right: 0;",
  "batchReporting": true,
  "batchInterval": 5000,
  "checkAccessibility": false,
  "highlightAccessibility": false,
  "extendedMetrics": false,
  "smartDetection": false,
  "performanceBudget": {
    "LCP": 2500,
    "CLS": 0.1,
    "FCP": 1800,
    "TTFB": 800,
    "INP": 200
  },
  "headers": {},
  "sampleRate": 1,
  "trackSoftNavigations": false,
  "attribution": false,
  "trackLongTasks": false,
  "maxBatchSize": 10,
  "retryFailedMetrics": false,
  "respectDnt": false,
  "consent": true,
  "dashboard": false
};
window.__WEBVITALS_CONFIG__ = config;
})();</script>
<script type="module" src="/_astro/WebVitals.astro_astro_type_script_index_0_lang.KhS4lISl.js"></script>

WebVitals
defaults
static build

Production configuration

examples/output/production.htmlDetail →

---
import { WebVitals } from "@casoon/astro-webvitals";

// Your consent state, e.g. from a consent manager.
const hasAnalyticsConsent = true;
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Production</title>
	</head>
	<body>
		<h1>Production</h1>
		<WebVitals
			endpoint="/api/analytics/vitals"
			sampleRate={0.1}
			consent={hasAnalyticsConsent}
			respectDnt={true}
		/>
	</body>
</html>

<script>(function(){const config = {
  "debug": false,
  "consoleDock": false,
  "endpoint": "/api/analytics/vitals",
  "position": "bottom-right",
  "desktopPositions": {
    "top-right": "top: 16px; right: 16px;",
    "top-left": "top: 16px; left: 16px;",
    "bottom-right": "bottom: 16px; right: 16px;",
    "bottom-left": "bottom: 16px; left: 16px;"
  },
  "mobilePosition": "bottom: 0; left: 0; right: 0;",
  "batchReporting": true,
  "batchInterval": 5000,
  "checkAccessibility": false,
  "highlightAccessibility": false,
  "extendedMetrics": false,
  "smartDetection": false,
  "performanceBudget": {
    "LCP": 2500,
    "CLS": 0.1,
    "FCP": 1800,
    "TTFB": 800,
    "INP": 200
  },
  "headers": {},
  "sampleRate": 0.1,
  "trackSoftNavigations": false,
  "attribution": false,
  "trackLongTasks": false,
  "maxBatchSize": 10,
  "retryFailedMetrics": false,
  "respectDnt": true,
  "consent": true,
  "dashboard": false
};
window.__WEBVITALS_CONFIG__ = config;
})();</script>
<script type="module" src="/_astro/WebVitals.astro_astro_type_script_index_0_lang.KhS4lISl.js"></script>

endpoint
sampleRate
consent
respectDnt

Dashboard route

examples/output/routes.txtDetail →

import { webVitalsDashboard } from "@casoon/astro-webvitals/integration";
import { defineConfig } from "astro/config";

// Demo project for the website showcase. `node examples/capture.mjs` builds it and
// writes what the component and the integration generate to examples/output/.
export default defineConfig({
	integrations: [webVitalsDashboard()],
});

$ astro build   # examples/demo

Pages in dist/:
  __web-vitals/index.html   <- injected by webVitalsDashboard()
  index.html
  local/index.html
  production/index.html

__web-vitals/index.html:
  <meta name="robots" content="noindex, nofollow">
  <script type="module" src="/_astro/dashboard.astro_astro_type_script_index_0_lang.YQl8rvJm.js">

webVitalsDashboard
integration
localStorage

Client chunks

examples/output/bundle.jsonDetail →

pnpm install
node examples/capture.mjs

Chunks in dist/_astro of the demo build
File	Loaded	Bytes	Gzip
dashboard.astro_astro_type_script_index_0_lang.YQl8rvJm.js	dashboard route	4422	1655
debug-overlay.BMYmqzAH.js	dynamic import()	49664	11634
web-vitals.attribution.DHzNuYO-.js	dynamic import()	15130	5359
web-vitals.aFU_-Wi7.js	dynamic import()	8616	3205
console-dock.C_jCKOEr.js	dynamic import()	5655	1932
console-capture.fPyKKS8J.js	dynamic import()	925	526
long-tasks.CCFuVN4E.js	dynamic import()	415	306
responsive.YxQJ-aBJ.js	dynamic import()	354	274
seo.iuA1j6xm.js	dynamic import()	180	158
accessibility.bS3TTF_Z.js	dynamic import()	107	118
WebVitals.astro_astro_type_script_index_0_lang.KhS4lISl.js	with the page	10595	3981
sitemap-pass.D1sv_KO0.js	with the page	1776	672

bundle
gzip
web-vitals

Dashboard page checks

examples/output/page-checks.jsonDetail →

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Spring sale – Example shop</title>
		<link rel="canonical" href="https://example.com/sale/" />
		<meta property="og:title" content="Spring sale" />
		<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage"}</script>
	</head>
	<body>
		<a href="#main">Skip to content</a>
		<main id="main">
			<h1>Spring sale</h1>
			<h3>Shoes</h3>
			<img src="/shoes.jpg" />
			<a href="/cart"><svg aria-hidden="true" width="16" height="16"></svg></a>
			<form>
				<label for="email">Email</label>
				<input id="email" type="email" />
				<input type="search" placeholder="Search" />
				<button type="submit"></button>
			</form>
		</main>
	</body>
</html>

Page checks for examples/pages/sample.html
Check	Result	Detail
Title	pass	26 characters
Description	issue	Missing
Canonical	pass	Present
Language	pass	en
H1	pass	One heading
Open Graph	issue	Title, description or image missing
Skip link	pass	Present
Image alt	issue	1 image without alt
Link text	issue	1 empty link
Form labels	issue	1 unlabelled control
Structured data	info	No invalid JSON-LD found

dashboard
SEO
accessibility

Accessibility heuristic

examples/output/a11y-heuristic.jsonDetail →

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Spring sale – Example shop</title>
		<link rel="canonical" href="https://example.com/sale/" />
		<meta property="og:title" content="Spring sale" />
		<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage"}</script>
	</head>
	<body>
		<a href="#main">Skip to content</a>
		<main id="main">
			<h1>Spring sale</h1>
			<h3>Shoes</h3>
			<img src="/shoes.jpg" />
			<a href="/cart"><svg aria-hidden="true" width="16" height="16"></svg></a>
			<form>
				<label for="email">Email</label>
				<input id="email" type="email" />
				<input type="search" placeholder="Search" />
				<button type="submit"></button>
			</form>
		</main>
	</body>
</html>

Heuristic findings for examples/pages/sample.html
Element	Finding	Reference
<img src="https://example.com/shoes.jpg...">	Image missing alt attribute	1.1.1 Level A
<button>	Button has no accessible text	4.1.2 Level A
<input type="search">	Form control missing label	1.3.1 Level A
<h3>	Heading level skipped (1 to 3)	1.3.1 Level A
<a href="https://example.com/cart...">	Link has no accessible text	2.4.4 Level A

checkAccessibility
debug
WCAG