Core Web Vitals
Performance Metrics
Audits HTML patterns that affect Core Web Vitals (LCP, CLS, INP). Checks for layout shift causes, largest contentful paint blockers, and interaction responsiveness issues.
Key Checks
LCP image optimization
Render-blocking resources
CLS layout shift prevention
Image dimensions
INP main thread blocking
Third-party script impact
Audit Checks
| Check | Status | Rule |
|---|---|---|
| LCP image missing fetchpriority=high | WARN | Add fetchpriority=high to LCP image |
| LCP image uses loading=lazy | FAIL | Never lazy-load the LCP element |
| Images without width/height | FAIL | Missing dimensions cause layout shift |
| Scripts without async/defer | WARN | Blocks main thread during parsing |
| 9+ third-party scripts | FAIL | Excessive third-party scripts impact INP |
| No font-display property | WARN | Add font-display to prevent invisible text |
Industry Thresholds
LCP
≤ 2.5 seconds
CLS
≤ 0.1
INP
≤ 200ms
Third-party scripts
≤ 3 (ideal), ≤ 8 (okay), 9+ (fail)
DOM size
≤ 1500 elements
Related Skills
Edge Cases
- Actual CWV scores require real-browser measurement
- Next.js auto-handles image optimization & code splitting
- Inline <style> for critical CSS is intentional, not a CLS risk
- <script type='module'> is inherently deferred
Try These Prompts
Copy any prompt below and paste it into your AI coding agent to run Core Web Vitals checks:
“Does my hero image have fetchpriority=high and is it preloaded for fast LCP?”
“Are there images without width and height attributes that cause layout shifts (CLS)?”
“How many third-party scripts are loaded? Is it under the recommended limit of 3?”
“Are all scripts using async or defer? Which ones block the main thread (INP)?”
“Check for render-blocking CSS and fonts without font-display in the head”