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)

Video tutorial

Resources

CLS