TypingMindTypingMindThe best frontend for AI
Webperf Core Web Vitals logo

Webperf Core Web Vitals

CommunityPopular
nucliweb
webperf-core-web-vitals

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.

Overview

Publishernucliweb
Repositorywebperf-snippets
Skill namewebperf-core-web-vitals
Stars
1.5K
Forks
90
Bundled files
9
LicenseMIT
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 9 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by nucliweb on GitHub. Read the source before you install it.

Installation

Install the Webperf Core Web Vitals AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/nucliweb/webperf-snippets/tree/main/.claude/skills/webperf-core-web-vitals
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/nucliweb/webperf-snippets.git /tmp/webperf-snippets
mkdir -p .claude/skills
cp -r /tmp/webperf-snippets/.claude/skills/webperf-core-web-vitals .claude/skills/webperf-core-web-vitals
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Webperf Core Web Vitals in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Webperf Core Web Vitals on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Webperf Core Web Vitals is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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, 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":

  1. LCP.js - Measure Largest Contentful Paint
  2. CLS.js - Measure Cumulative Layout Shift
  3. INP.js - Measure Interaction to Next Paint
  4. LCP-Subparts.js - Break down LCP timing phases
  5. LCP-Trail.js - Track LCP candidate evolution

LCP Deep Dive

When LCP is slow or the user asks "debug LCP" or "why is LCP slow":

  1. LCP.js - Establish baseline LCP value
  2. LCP-Subparts.js - Break down into TTFB, resource load, render delay
  3. LCP-Trail.js - Identify all LCP candidates and changes
  4. LCP-Image-Entropy.js - Check if LCP image has visual complexity issues
  5. LCP-Video-Candidate.js - Detect if LCP is a video (poster or video element)

CLS Investigation

When layout shifts are detected or the user asks "debug CLS" or "layout shift issues":

  1. CLS.js - Measure overall CLS score
  2. Layout-Shift-Loading-and-Interaction.js (pending — available in webperf-interaction skill)
  3. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (lazy images causing shifts)
    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swap causing shifts)

INP Debugging

When interactions feel slow or the user asks "debug INP" or "slow interactions":

  1. INP.js - Measure overall INP value; call getINP() after interactions, getINPDetails() for the 15 slowest interactions
  2. Interactions.js (pending — available in webperf-interaction skill)
  3. Input-Latency-Breakdown.js (pending — available in webperf-interaction skill)
  4. Long-Animation-Frames.js (pending — available in webperf-interaction skill)
  5. Long-Animation-Frames-Script-Attribution.js (pending — available in webperf-interaction skill)

Video as LCP Investigation

When LCP is a video element (detected by LCP-Video-Candidate.js):

  1. LCP-Video-Candidate.js - Identify video as LCP candidate
  2. Video-Element-Audit.js (from Media skill) - Audit video loading strategy
  3. LCP-Subparts.js - Analyze video loading phases
  4. Cross-reference with webperf-loading skill:
    • Resource-Hints-Validation.js (check for video preload)
    • Priority-Hints-Audit.js (check for fetchpriority on video)

Image as LCP Investigation

When LCP is an image (most common case):

  1. LCP.js - Measure LCP timing
  2. LCP-Subparts.js - Break down timing phases
  3. LCP-Image-Entropy.js - Analyze image complexity
  4. Cross-reference with webperf-media skill:
    • Image-Element-Audit.js (check format, dimensions, lazy loading)
  5. Cross-reference with webperf-loading skill:
    • Find-Above-The-Fold-Lazy-Loaded-Images.js (check if incorrectly lazy)
    • Priority-Hints-Audit.js (check for fetchpriority="high")
    • Resource-Hints-Validation.js (check for preload)

Decision Tree

Use this decision tree to automatically run follow-up snippets based on results:

After LCP.js

  • If LCP > 2.5s → Run LCP-Subparts.js to diagnose which phase is slow
  • If LCP > 4.0s (poor) → Run full LCP deep dive workflow (5 snippets)
  • If LCP candidate is an image → Run LCP-Image-Entropy.js and webperf-media:Image-Element-Audit.js
  • If LCP candidate is a video → Run LCP-Video-Candidate.js and webperf-media:Video-Element-Audit.js
  • Always run → LCP-Trail.js to understand candidate evolution

After LCP-Subparts.js

  • If TTFB phase > 600ms → Switch to webperf-loading skill and run TTFB-Sub-Parts.js
  • If Resource Load Time > 1500ms → Run:
    1. webperf-loading:Resource-Hints-Validation.js (check for preload/preconnect)
    2. webperf-loading:Priority-Hints-Audit.js (check fetchpriority)
    3. webperf-loading:Find-render-blocking-resources.js (competing resources)
  • If Render Delay > 200ms → Run:
    1. webperf-loading:Find-render-blocking-resources.js (blocking CSS/JS)
    2. webperf-loading:Script-Loading.js (parser-blocking scripts)
    3. webperf-interaction:Long-Animation-Frames.js (main thread blocking)

After LCP-Trail.js

  • If many LCP candidate changes (>3) → This causes visual instability, investigate:
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js (late-loading images)
    2. webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font swaps)
    3. CLS.js (layout shifts contributing to LCP changes)
  • If final LCP candidate appears late → Run webperf-loading:Resource-Hints-Validation.js
  • If early candidate was replaced → Understand why initial content was pushed down (likely CLS issue)

After LCP-Image-Entropy.js

  • If entropy is very high → Image is visually complex, recommend:
    • Modern formats (WebP, AVIF)
    • Appropriate compression
    • Potentially a placeholder strategy
  • If entropy is low → Image may be over-optimized or placeholder-like
  • If large file size detected → Run webperf-media:Image-Element-Audit.js for format/sizing analysis

After LCP-Video-Candidate.js

  • If video is LCP → Run:
    1. webperf-media:Video-Element-Audit.js (check poster, preload, formats)
    2. webperf-loading:Priority-Hints-Audit.js (check fetchpriority on poster)
    3. LCP-Subparts.js (analyze video loading phases)
  • If poster image is LCP → Treat as image LCP (run image workflows)

After CLS.js

  • If CLS > 0.1 → Run webperf-interaction:Layout-Shift-Loading-and-Interaction.js (pending — available in webperf-interaction skill)
  • If CLS > 0.25 (poor) → Run comprehensive shift investigation:
    1. webperf-loading:Find-Above-The-Fold-Lazy-Loaded-Images.js (images without dimensions)
    2. webperf-loading:Fonts-Preloaded-Loaded-and-used-above-the-fold.js (font loading strategy)
    3. webperf-loading:Critical-CSS-Detection.js (late-loading styles)
    4. webperf-media:Image-Element-Audit.js (missing width/height)
  • If CLS = 0 → Confirm with multiple page loads (might be timing-dependent)

After INP.js

  • If INP > 200ms → Run webperf-interaction:Interactions.js to identify slow interactions
  • If INP > 500ms (poor) → Run full INP debugging workflow:
    1. webperf-interaction:Interactions.js (list all interactions)
    2. webperf-interaction:Input-Latency-Breakdown.js (phase breakdown)
    3. webperf-interaction:Long-Animation-Frames.js (blocking frames)
    4. webperf-interaction:Long-Animation-Frames-Script-Attribution.js (culprit scripts)
  • If specific interaction type is slow (e.g., keyboard) → Focus analysis on that interaction type
  • After INP data is collected → call getINPDetails() for the 15 slowest interactions, slowest first (useful for identifying patterns across multiple slow interactions)

Error Recovery

  • If any script returns status: "error" → Check if the page has finished loading:
    • If early in load: wait and re-run the script
    • If page is an SPA: user may need to navigate to the target route first
  • If LCP.js / LCP-Subparts.js returns status: "error" → Tell the user: "LCP data is not available yet. Please ensure the page has fully loaded, then run the analysis again."
  • If INP.js getINP() returns status: "error" → The getDataFn: "getINP" field signals the agent can retry after user interaction. Prompt the user to click, type, or scroll, then call getINP() again.

Cross-Skill Triggers

Context fork note: This skill runs with context: fork. Cross-skill triggers below are recommendations to report back to the parent agent, not direct calls this subagent can execute. When a cross-skill trigger fires, tell the user which skill and script to run next. Scripts marked (pending) are not yet available — skip them and note the limitation.

These triggers recommend using snippets from other skills:

From LCP to Loading Skill

  • If LCP > 2.5s and TTFB phase is dominant → Use webperf-loading skill:

    • TTFB.js, TTFB-Sub-Parts.js, Service-Worker-Analysis.js

  • If LCP image is lazy-loaded → Use webperf-loading skill:

    • Find-Above-The-Fold-Lazy-Loaded-Images.js

  • If LCP has no fetchpriority → Use webperf-loading skill:

    • Priority-Hints-Audit.js
From CLS to Loading Skill

  • If CLS caused by fonts → Use webperf-loading skill:

    • Fonts-Preloaded-Loaded-and-used-above-the-fold.js
    • Resource-Hints-Validation.js (for font preload)

  • If CLS caused by images → Use webperf-media skill:

    • Image-Element-Audit.js (check for width/height attributes)
From INP to Interaction Skill
  • If INP > 200ms → Use webperf-interaction skill for full debugging:
    • Interactions.js, Input-Latency-Breakdown.js
    • Long-Animation-Frames.js, Long-Animation-Frames-Script-Attribution.js
    • LongTask.js (if pre-interaction blocking suspected)
From LCP/INP to Interaction Skill
  • If render delay or interaction delay is high → Use webperf-interaction skill:
    • Long-Animation-Frames.js (main thread blocking)
    • LongTask.js (long tasks delaying rendering)

Multi-Metric Correlation

When multiple CWV metrics are poor, prioritize investigation:

  • If LCP > 2.5s AND CLS > 0.1 → Likely shared root cause:

    1. Check for late-loading content pushing LCP element
    2. Run LCP-Trail.js to see LCP candidate changes
    3. Run Layout-Shift-Loading-and-Interaction.js to correlate timing

  • If LCP > 2.5s AND INP > 200ms → Main thread congestion:

    1. Run Long-Animation-Frames.js
    2. Run webperf-loading:Script-Loading.js
    3. Run webperf-loading:JS-Execution-Time-Breakdown.js

  • If CLS > 0.1 AND INP > 200ms → Layout thrashing or interaction-triggered shifts:

    1. Run Layout-Shift-Loading-and-Interaction.js
    2. Run Interactions.js
    3. Check if shifts occur during/after interactions

References

  • references/snippets.md — Descriptions and thresholds for each script
  • references/schema.md — Return value schema for interpreting script output

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Webperf Core Web Vitals AI skill do?

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.

Why use Webperf Core Web Vitals on TypingMind?

Because you install it once and use it with any model. Webperf Core Web Vitals is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Webperf Core Web Vitals in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/nucliweb/webperf-snippets/tree/main/.claude/skills/webperf-core-web-vitals. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Webperf Core Web Vitals?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Webperf Core Web Vitals?

As many as you like. As long as a model supports skills, you can use Webperf Core Web Vitals with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Webperf Core Web Vitals AI skill free?

Yes. It is published on GitHub by nucliweb under the MIT license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
openclaw logo

Openclaw Testing

openclaw
OrganizationPopular

Choose proportional OpenClaw tests and checks, diagnose failures, and route environment-sensitive or release proof to its owner.

82.2K
391K
2 files
View
openclaw logo

Release Openclaw Ci

openclaw
OrganizationPopular

Run, watch, debug, and summarize OpenClaw full release CI, release checks, live provider gates, install/update proofs, and release-secret preflights.

82.2K
391K
3 files
View
openclaw logo

Release Openclaw Mac

openclaw
OrganizationPopular

Run or recover OpenClaw macOS release signing, notarization, appcast, and asset promotion.

82.2K
391K
Instructions
View
openclaw logo

Release Openclaw Maintainer

openclaw
OrganizationPopular

Prepare, publish, recover, or verify OpenClaw beta, stable, and extended-stable releases, including approved backports.

82.2K
391K
11 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇