Context
Use this when GSC flags CWV issues or when page speed is impacting organic performance. Core Web Vitals (LCP, CLS, INP) are a confirmed Google ranking signal. This skill produces fix specifications that developers can implement directly, bridging the gap between SEO diagnosis and engineering execution.
Procedure
- Pull CWV field data from GSC: identify page groups with Poor or Needs Improvement status.
- Run Lighthouse or PageSpeed Insights on representative pages from each failing group.
- Diagnose LCP issues: identify the largest contentful paint element, check server response time (TTFB), resource load chain, and render-blocking resources.
- Diagnose CLS issues: identify layout shift sources (images without dimensions, dynamic content injection, font loading).
- Diagnose INP issues: identify slow event handlers, long tasks, and main thread blocking.
- Write fix specifications with code-level guidance for each issue.
- Prioritize fixes by: traffic impact x severity x implementation effort.
Output Format
# Core Web Vitals Report: [Domain]
## Summary
| Metric | Status | Threshold | Current (p75) | Pages Affected |
|--------|--------|-----------|---------------|---------------|
| LCP | Poor/NI/Good | 2.5s | | |
| CLS | Poor/NI/Good | 0.1 | | |
| INP | Poor/NI/Good | 200ms | | |
## LCP Issues
| Page Group | LCP Element | Current | Root Cause | Fix |
|-----------|------------|---------|-----------|-----|
| | [element] | [Xs] | [TTFB/resource blocking/image size] | [Specific fix] |
## CLS Issues
| Page Group | Shift Source | CLS Value | Root Cause | Fix |
|-----------|------------|-----------|-----------|-----|
| | [element] | | [Missing dimensions/dynamic inject/font] | |
## INP Issues
| Page Group | Slow Handler | INP Value | Root Cause | Fix |
|-----------|-------------|-----------|-----------|-----|
| | [event] | [Xms] | [Long task/main thread blocking] | |
## Priority Fix List
| # | Fix | Metric | Pages | Expected Improvement | Effort |
|---|-----|--------|-------|---------------------|--------|
| 1 | | | | | L/M/H |
## Implementation Notes
[Code-level guidance for top fixes]
QA Rubric (scored)
- Diagnostic accuracy (0-5): root causes identified at resource or code level, not just metric-level symptoms.
- Fix specificity (0-5): developer can implement from the spec without additional research.
- Prioritization logic (0-5): fixes ordered by traffic impact and severity.
- Measurement plan (0-5): expected improvements are quantified and verifiable post-fix.
Examples (good/bad)
- Good: "LCP on /blog/* pages is 4.2s (p75). Root cause: hero image is 2.4MB uncompressed PNG served without srcset. Fix: convert to WebP, add width/height attributes, implement responsive srcset. Expected LCP improvement: 4.2s → ~2.0s."
- Bad: "Pages are slow. Optimize images and reduce JavaScript." (no specific metric, no root cause, no measurable target)
Variants
- Quick diagnostic variant: CWV summary + top 3 fixes for the worst-performing metric only.
- Full optimization variant: all three metrics analyzed with code-level fix specs and implementation timeline.