Core Web Vitals

Core Web Vitals

Audit HTML for patterns that negatively impact Core Web Vitals — the performance metrics Google uses as a ranking signal.

Overview

| Metric | Full name | Good threshold | What it measures | |---|---|---|---| | LCP | Largest Contentful Paint | ≤ 2.5s | Loading — time until the largest visible element renders | | CLS | Cumulative Layout Shift | ≤ 0.1 | Visual stability — unexpected layout movement | | INP | Interaction to Next Paint | ≤ 200ms | Responsiveness — delay between user input and visual update |

1. LCP (Largest Contentful Paint) checks

Identify the likely LCP element and check for blockers:

Identify LCP candidate

The LCP element is typically the largest visible element above the fold:

• Hero image (` near top of `)
• Hero background image (CSS background-image)
• Large heading (``) with significant text
• Video poster image

LCP blockers to flag

| Check | Status | |---|---| | Hero/banner ` missing fetchpriority="high" | ⚠️ WARN "Add fetchpriority=high to LCP image" | | Hero image uses loading="lazy" | ❌ FAIL "Never lazy-load the LCP element" | | LCP image not preloaded () | ⚠️ WARN "Preload LCP image for faster rendering" | | Render-blocking CSS in (stylesheets without media attribute) | ⚠️ WARN | | Render-blocking JS in (scripts without async/defer`) | ⚠️ WARN | | LCP image served in legacy format (JPG/PNG instead of WebP/AVIF) | ⚠️ WARN | | No render-blocking resources | ✅ PASS |

Font loading

| Check | Status | |---|---| | Custom fonts without ` | ⚠️ WARN "Preload critical fonts" | | No font-display: swap or font-display: optional in @font-face` | ⚠️ WARN "Add font-display to prevent invisible text" | | Fonts preloaded properly | ✅ PASS |

2. CLS (Cumulative Layout Shift) checks

Identify HTML patterns that cause layout shift:

| Check | Status | |---|---| | ` without width and height attributes | ❌ FAIL "Missing dimensions cause layout shift" | | or without width/height | ⚠️ WARN | | Ads/embeds without reserved space (no explicit dimensions) | ⚠️ WARN "Reserve space for dynamic content" | | Web fonts causing FOIT (Flash of Invisible Text) — no font-display` | ⚠️ WARN | | Content injected above existing content (banners, cookie notices without reserved space) | ⚠️ WARN | | All images have dimensions | ✅ PASS "No layout shift from images" |

CSS animation checks

| Check | Status | |---|---| | Animations using top, left, width, height (trigger layout) | ⚠️ WARN "Use transform instead for animations" | | Animations using transform and opacity only | ✅ PASS "GPU-accelerated, no layout shift" |

3. INP (Interaction to Next Paint) checks

Identify patterns that block the main thread:

| Check | Status | |---|---| | ` tags without async or defer | ⚠️ WARN "Blocks main thread during parsing" | | Inline with heavy computation (> 50 lines) | ⚠️ WARN "Move heavy JS to async external file" | | Event handlers in HTML attributes (onclick, onchange`, etc.) | ⚠️ WARN "Use addEventListener instead for better performance" | | Third-party scripts loaded synchronously | ⚠️ WARN "Load third-party scripts with async" | | All scripts properly deferred/async | ✅ PASS |

Third-party impact

Count third-party scripts (different domain):

• 0–3 → ✅ PASS
• 4–8 → ⚠️ WARN "Consider reducing third-party scripts"
• 9+ → ❌ FAIL "Excessive third-party scripts severely impact INP"

4. General performance patterns

| Check | Status | |---|---| | ` for third-party origins | ✅ PASS if present, ⚠️ WARN if missing with 3rd-party resources | | for third-party origins | ✅ PASS if present | | for critical resources | ✅ PASS if present | | Excessive DOM size (> 1500 elements) | ⚠️ WARN "Large DOM slows rendering" | | with width=device-width` | Required for mobile CWV (see [mobile-optimization](../mobile-optimization/SKILL.md) for full viewport checks) |

Reporting format

Core Web Vitals Audit
─────────────────────
LCP Risk Factors:  X issues found
CLS Risk Factors:  Y issues found
INP Risk Factors:  Z issues found

Overall CWV Risk:  LOW / MEDIUM / HIGH

• 0 issues → LOW risk
• 1–3 issues → MEDIUM risk
• 4+ issues → HIGH risk

Edge cases

• This skill audits HTML patterns that correlate with CWV issues — actual CWV scores require real-browser measurement (Lighthouse, CrUX data)
• Next.js automatically handles image optimization, code splitting, and font loading — check for Next.js-specific patterns before flagging generic issues
• Inline `` for critical CSS is intentional and should NOT be flagged as a CLS risk — distinguish from injected layout-shifting styles
• `` is inherently deferred — do not flag as render-blocking
• Third-party scripts loaded inside `` do not block the main thread — exclude from INP third-party count
• AMP pages have their own performance model — flag CWV patterns but note that AMP runtime handles many optimizations automatically

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: thisisAhsanIqbal
• Source: thisisAhsanIqbal/nextjs-seo-audit
• License: MIT
• Homepage: https://nextjs-seo-skill.vercel.app/

Install and usage instructions live in the source repository linked above.