WebPerf Snippets

A curated collection of JavaScript snippets to measure and debug Web Performance directly in your browser's DevTools console.

What you can measure

Quick start

Copy this snippet and paste it in your browser console to see your page's Core Web Vitals:

// Quick Core Web Vitals Check
new PerformanceObserver((l) => {
  l.getEntries().forEach((e) => {
    const name = e.name || e.entryType;
    console.log(`${name}: ${Math.round(e.startTime || e.value || e.duration)}ms`);
  });
}).observe({ type: "largest-contentful-paint", buffered: true });
 
new PerformanceObserver((l) => {
  let cls = 0;
  l.getEntries().forEach((e) => {
    if (!e.hadRecentInput) cls += e.value;
  });
  console.log(`CLS: ${cls.toFixed(3)}`);
}).observe({ type: "layout-shift", buffered: true });

For more detailed analysis, explore the snippets in each category.

How to use

Not sure which snippet to run? Start from the symptom in Which snippet should I use?.

Requirements

All snippets are tested in Google Chrome (opens in a new tab). Most snippets also work in other Chromium-based browsers (Edge, Brave, Arc) and Firefox. Safari has limited Performance API support.

Option 1: Run in browser console

1. Copy any snippet (click the copy button)
2. Open DevTools (F12 or Cmd+Option+I / Ctrl+Shift+I)
3. Go to the Console tab
4. Paste and press Enter

Option 2: Save as DevTools snippet

Save frequently used snippets for quick access:

1. Open DevTools → Sources tab → Snippets panel
2. Click + New snippet
3. Name it (e.g., "LCP")
4. Paste the code
5. Right-click → Run (or Cmd+Enter / Ctrl+Enter)

Option 3: Use with AI agent skills

Run snippets autonomously through an AI agent via Claude Code (opens in a new tab) and Chrome DevTools MCP (opens in a new tab). The WebPerf Skills (opens in a new tab) provide deterministic, consistent measurements across sessions, the agent executes the exact snippet code without improvising JavaScript.

Available skills: webperf, webperf-core-web-vitals, webperf-loading, webperf-interaction, webperf-media, webperf-resources.

→ Learn how WebPerf Agent Skills work (opens in a new tab)

Video tutorial

▶

AI agent skills

WebPerf Snippets powers a set of Agent Skills (opens in a new tab) for autonomous performance audits. Instead of copying and pasting snippets manually, an AI agent executes them deterministically through Chrome DevTools MCP, the same code, every time, across sessions and models.

The skills include decision trees that automatically trigger deeper analysis when thresholds are exceeded, for example, when TTFB is slow, the agent runs TTFB sub-parts diagnostics to pinpoint whether the issue is DNS, connection, or backend latency.

→ Read more about WebPerf Agent Skills (opens in a new tab)

CLI

Run the same curated snippets headlessly via Playwright, no copy-pasting into DevTools. Diagnose LCP regressions in CI, gate pull requests on real performance budgets, and automate the audits you already run by hand.

npx webperf-snippets https://web.dev --workflow audit
npx webperf-snippets https://web.dev --budget-lcp 2500 --budget-cls 0.1

→ CLI documentation

Resources

• Web Vitals (opens in a new tab) - Learn about Core Web Vitals
• Chrome DevTools (opens in a new tab) - Official documentation
• GitHub Repository (opens in a new tab) - Star, fork, or contribute