ReddRadar
Agent skill
core-web-vitals
Measure and optimize Core Web Vitals (LCP, INP, CLS). Use when implementing CWV tracking or debugging performance.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/core-web-vitals
SKILL.md
Core Web Vitals
Measure the three metrics Google uses to assess user experience.
The Three Metrics
| Metric | Measures | Good | Poor |
|---|---|---|---|
| LCP | Loading - Largest Contentful Paint | ≤2.5s | >4.0s |
| INP | Interactivity - Interaction to Next Paint | ≤200ms | >500ms |
| CLS | Visual Stability - Cumulative Layout Shift | ≤0.1 | >0.25 |
Key Principles
- Always include attribution - Without it, you can't debug
- Track all three - INP replaced FID, don't skip it
- Track by route - Aggregate data hides problems
- Alert on poor vitals - Don't just log, enable alerts
Attribution = Actionable
| Without | With |
|---|---|
| "LCP is 3.2s" | "LCP is 3.2s, caused by hero-image.jpg" |
| Can't fix | Actionable |
Common Causes
LCP
- Large hero images → Optimize, preload
- Slow TTFB → CDN, improve server
- Render-blocking resources → Defer non-critical
INP
- Long JS tasks → Break into chunks
- Heavy event handlers → Debounce
- Third-party scripts → Defer, lazy load
CLS
- Images without dimensions → Set width/height
- Dynamic content → Reserve space
- Web fonts → font-display: optional
Implementation
See templates/web-vitals.ts for production-ready code.
Use Read tool to load template when generating implementation.
Anti-Patterns
See references/anti-patterns.md for:
- CWV without attribution
- Missing INP tracking
- Blocking main thread with telemetry
Related
skills/hydration-performance- SSR impact on LCPskills/bundle-performance- JS impact on INPreferences/core-web-vitals.md- Deep dive
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?