# Webperf Core Web Vitals

Intelligent Core Web Vitals analysis with automated workflows and decision trees.

- Repository: https://github.com/nucliweb/webperf-snippets (1458 stars)
- Category: Testing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add nucliweb/webperf-snippets --skill webperf-core-web-vitals -g -a claude-code -y`
Codex: `npx skills add nucliweb/webperf-snippets --skill webperf-core-web-vitals -g -a codex -y`
Cursor: `npx skills add nucliweb/webperf-snippets --skill webperf-core-web-vitals -g -a cursor -y`
Gemini CLI: `npx skills add nucliweb/webperf-snippets --skill webperf-core-web-vitals -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add nucliweb/webperf-snippets`

## Description

Intelligent Core Web Vitals analysis with automated workflows and decision trees. Measures LCP, CLS, INP with guided debugging that automatically determines follow-up analysis based on results. Includes workflows for LCP deep dive (5 phases), CLS investigation (loading vs interaction), INP debugging (latency breakdown + attribution), and cross-skill integration with loading, interaction, and media skills. Use when the user asks about Core Web Vitals, LCP optimization, layout shifts, or interaction responsiveness. Compatible with Chrome DevTools MCP.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# WebPerf: Core Web Vitals

JavaScript snippets for measuring web performance in Chrome DevTools.

## Running a script

1. Run the script with `mcp__chrome-devtools__evaluate_script` and read the object it returns. The scripts have no console output, so the returned object is the result: `script`, `status` and the metric data (`value`, `rating`, `details`, `items`, `issues`), as described in `references/schema.md`.
2. When `status` is `"tracking"`, the script keeps observing the page. After the interactions, call the function named in `getDataFn` with another `mcp__chrome-devtools__evaluate_script` call, for example `getINP()`, and read the object it returns.
3. When `status` is `"error"` or `"unsupported"`, read `error`: the page may not have loaded yet, or the browser lacks the API.

Without Chrome DevTools MCP, run the same snippet with the [webperf-snippets CLI](https://webperf-snippets.net/CLI), which loads the page in headless Chromium and prints the same result objects: `npx webperf-snippets <url> --snippet <Name> --json`, where `<Name>` is the script name without `.js`. It needs Playwright and Chromium (`npm install --save-dev webperf-snippets playwright`, then `npx playwright install chromium`), and tracking snippets take `--interact-script <file>` to drive the interactions.

## Scripts

- `scripts/CLS.js`, Cumulative layout shift (CLS)
- `scripts/INP.js`, Interaction to next paint (INP)
- `scripts/LCP-Image-Entropy.js`, LCP image entropy
- `scripts/LCP-Subparts.js`, LCP subparts
- `scripts/LCP-Trail.js`, LCP trail
- `scripts/LCP-Video-Candidate.js`, LCP video candidate
- `scripts/LCP.js`, Largest contentful paint (LCP)


## Common Workflows

### Complete Core Web Vitals Audit

When the user asks for a comprehensive Core Web Vitals analysis or "audit CWV":

The rest: https://github.com/nucliweb/webperf-snippets/blob/HEAD/.claude/skills/webperf-core-web-vitals/SKILL.md