Introduction

WebPerf Snippets

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

Chrome DevTools

What you can measure

CategoryWhat it includes
Core Web VitalsCLS, INP, LCP, LCP Image Entropy, LCP Sub-Parts, LCP Trail, LCP Video Candidate
LoadingTTFB, JS Execution Time Breakdown, FCP, Back/Forward Cache, CSS Media Queries Analysis, Critical CSS Detection, SSR Hydration Data Analysis, Validate Preload on Async/Defer Scripts, Prefetch Resource Validation, Priority Hints Audit, Service Worker Analysis
InteractionInteractions, Input Latency Breakdown, Layout Shift, Long Animation Frames, Long Task, Scroll Performance
ResourcesNetwork Bandwidth & Connection Quality
MediaImage Element Audit, Video Element Audit

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

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

Video tutorial preview
▶

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.

SkillWhat it covers
webperfGeneral-purpose performance audit entry point
webperf-core-web-vitalsLCP, CLS, INP with guided diagnosis workflows
webperf-loadingTTFB, FCP, render-blocking, fonts, scripts, resource hints
webperf-interactionINP, long tasks, scroll jank, animation frames
webperf-mediaImage and video audits, lazy loading, LCP media
webperf-resourcesNetwork quality, adaptive loading strategies

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)

Resources

CLS