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

Category	What it includes
Core Web Vitals	LCP, CLS, INP - the metrics that impact SEO and user experience
Loading	TTFB, resource hints, scripts, fonts, images, render-blocking resources
Interaction	Long Animation Frames, event timing, responsiveness

How to use

Option 1: Run in browser console

1. Copy any snippet from webperf-snippets.nucliweb.net
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

Snippet.mp4

Documentation

Visit webperf-snippets.nucliweb.net for the full documentation with all snippets.

Resources

• Web Vitals - Learn about Core Web Vitals
• Chrome DevTools - Official documentation