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/nexus-labs-automation/web-observability/tree/main/skills/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.
nexus-labs-automation/web-observability
user-journey-tracking
Track user journeys with intent context and friction signals. Use when instrumenting funnels or multi-step flows.
nexus-labs-automation/web-observability
bundle-performance
Monitor JavaScript bundle size and execution performance. Use when tracking bundle size, identifying large chunks, or optimizing load performance.
nexus-labs-automation/web-observability
hydration-performance
Measure SSR hydration timing and issues. Use when tracking hydration performance, debugging hydration mismatches, or optimizing SSR/SSG applications.
nexus-labs-automation/web-observability
error-tracking
Set up error tracking with actionable context. Use when configuring error capture or error boundaries.
nexus-labs-automation/web-observability
source-map-setup
Configure source maps for readable stack traces. Use when setting up error tracking, debugging production issues, or configuring build tools.
nexus-labs-automation/web-observability
route-transition-tracking
Measure time from navigation to page fully loaded and interactive. Use when tracking SPA navigation, route changes, or slow page transitions.
Didn't find tool you were looking for?