Dedicated Core Web Vitals deep-dive: pull field data (CrUX / PageSpeed Insights), fall back to Lighthouse lab data, score LCP, INP, and CLS against Google's thresholds at the 75th percentile, and run per-metric diagnosis playbooks with concrete fixes. Use when user says "core web vitals", "CWV", "LCP", "INP", "CLS", "page speed metrics", or "field data".
Dedicated Core Web Vitals deep-dive: pull field data (CrUX / PageSpeed Insights), fall back to Lighthouse lab data, score LCP, INP, and CLS against Google's thresholds at the 75th percentile, and run per-metric diagnosis playbooks with concrete fixes. Use when user says "core web vitals", "CWV", "LCP", "INP", "CLS", "page speed metrics", or "field data".
allowed-tools
["Read","Bash","WebFetch"]
Core Web Vitals Deep-Dive
Core Web Vitals (CWV) measure real-world loading performance, responsiveness,
and visual stability. Google's position, per
https://developers.google.com/search/docs/appearance/core-web-vitals: CWV are
used by Google's core ranking systems and good CWV is recommended for success
with Search — but good scores alone do not guarantee top rankings; there
is more to page experience than CWV, and chasing a perfect score purely for
SEO is not the best use of time.
INP replaced FID on March 12, 2024. FID is gone from all Chrome tooling.
Never reference FID as a current metric.
Thresholds
Each metric is evaluated at the 75th percentile of real page loads,
segmented by mobile and desktop. A page "passes" CWV when all three metrics
are Good at p75.
Lab fallback / diagnostics — Lighthouse. If no field data exists
(low-traffic page), use the lighthouseResult from step 2 or the
seo-lighthouse-audit skill. Label it clearly as lab data: lab LCP/CLS
approximate field values; lab has no INP — use TBT (Total Blocking Time)
as a rough proxy for interactivity problems, never as a substitute score.
Score each metric against the thresholds table (Good / Needs
Improvement / Poor at p75, mobile and desktop separately). Mobile is
usually worse — lead with it.
Diagnose failing metrics using the playbooks below, fetching the page
HTML (curl -s <url>) to check for concrete causes (missing
fetchpriority, unsized images, render-blocking tags, heavy third-party
scripts).
Resource load delay (gap before LCP resource starts downloading)
should be ~0
<link rel="preload"> the LCP image/font, fetchpriority="high" on the LCP <img>, never loading="lazy" on the LCP element, avoid CSS background-image for hero
Resource load time (download duration)
varies
Compress/resize image, modern formats (WebP/AVIF), CDN, preconnect to the resource origin
Element render delay (downloaded but not painted)
should be small
Eliminate render-blocking CSS/JS, inline critical CSS, avoid client-side rendering of the hero