Implement Core Web Vitals on WordPress
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside WordPress authoring, templating, and CDN edges.
Core Web Vitals
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings.
CMS-specific implementation guides
Operational runbooks translating this playbook onto each major CMS, including hosting edges, authoring workflows, and integration seams that typically move rankings and AI retrieval outcomes.
Prefer a CMS-wide lens before tackling another topic? Review every SEO & GEO playbook surfaced for WordPress, Shopify, Webflow, Drupal, HubSpot CMS, Contentful, or Adobe Experience Manager.
Implement Core Web Vitals on Shopify
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside Shopify authoring, templating, and CDN edges.
Implement Core Web Vitals on Webflow
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside Webflow authoring, templating, and CDN edges.
Implement Core Web Vitals on Drupal
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside Drupal authoring, templating, and CDN edges.
Implement Core Web Vitals on HubSpot CMS
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside HubSpot CMS authoring, templating, and CDN edges.
Implement Core Web Vitals on Contentful
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside Contentful authoring, templating, and CDN edges.
Implement Core Web Vitals on Adobe Experience Manager
A technical playbook for optimizing LCP, INP, and CLS — the Core Web Vitals metrics that directly influence Google search rankings, operationalized inside Adobe Experience Manager authoring, templating, and CDN edges.
What Are Core Web Vitals?
Core Web Vitals (CWV) are a set of user experience metrics defined by Google that measure the real-world performance of web pages. They became official Google ranking signals in 2021 and were updated in 2024 when Interaction to Next Paint (INP) replaced First Input Delay (FID). Poor CWV scores directly suppress rankings — especially in competitive SERPs where content quality is comparable across competitors.
The Three Core Metrics
Largest Contentful Paint (LCP)
Measures loading performance — specifically, when the largest visible content element (hero image, H1, video thumbnail) finishes rendering. Target: under 2.5 seconds. LCP is most commonly bottlenecked by unoptimized images, slow server response times, and render-blocking resources.
Interaction to Next Paint (INP)
Measures interactivity — the latency from user input (click, tap, keypress) to the next visual frame update. Target: under 200ms. INP is affected by JavaScript execution time, long tasks on the main thread, and third-party script bloat.
Cumulative Layout Shift (CLS)
Measures visual stability — how much the page layout unexpectedly shifts during load. Target: under 0.1. CLS is most often caused by images without explicit dimensions, late-loading ads, and web fonts causing text reflow.
Field Data vs. Lab Data
Google ranks pages based on Chrome User Experience Report (CrUX) data — real measurements from actual Chrome users visiting your site. Lighthouse scores (lab data) are useful diagnostics but don't directly determine your ranking. A page can pass Lighthouse and fail CrUX, or vice versa.
- Establish your baseline — Use Google Search Console's Core Web Vitals report and PageSpeed Insights to see your current CrUX field data by URL group
- Fix LCP: Optimize your hero image — Compress to WebP/AVIF, add fetchpriority="high" to the LCP element, and eliminate lazy loading on above-the-fold images
- Fix LCP: Improve server response time — Target TTFB under 800ms via CDN, server-side caching, and edge delivery
- Fix LCP: Eliminate render-blocking resources — Defer non-critical JS and CSS; inline critical CSS in the <head>
- Fix INP: Audit JavaScript execution — Use Chrome DevTools Performance panel to identify long tasks (>50ms); break them up or move to Web Workers
- Fix INP: Reduce third-party script impact — Audit all third-party scripts (analytics, chat widgets, ad tags); defer or remove those with high main-thread cost
- Fix CLS: Add explicit dimensions — All <img> and <video> elements must have width and height attributes to prevent layout shifts
- Fix CLS: Reserve space for ads and embeds — Use CSS aspect-ratio or min-height containers for dynamically loaded content
- Monitor continuously — Set up CrUX API monitoring or use tools like SpeedCurve for ongoing field data tracking
- Optimizing for Lighthouse, not CrUX — Lab scores are diagnostics; your actual ranking is based on real user field data from CrUX
- Lazy loading the LCP image — Adding loading="lazy" to your hero image is one of the most common and damaging LCP mistakes
- Ignoring third-party scripts — Analytics, chat tools, and ad tags are frequently the biggest INP bottlenecks and are often overlooked
- Missing image dimensions — The single most common cause of CLS; every image needs explicit width and height
- Treating CWV as a one-time fix — New features, A/B tests, and third-party tag additions regularly re-introduce regressions; monitor continuously
- Only testing on fast devices — CrUX data includes all Chrome users, including low-end Android devices on 4G; test on throttled connections
- PageSpeed Insights — Shows both lab (Lighthouse) and field (CrUX) data for any URL; free
- Google Search Console CWV Report — Aggregated CrUX data by URL group; the most actionable CWV report for SEOs
- Chrome UX Report (CrUX) — Raw field data accessible via BigQuery or the CrUX API
- SpeedCurve — Continuous performance monitoring with CWV tracking and regression alerting
- web.dev Metrics Documentation — Google's official in-depth documentation for all CWV metrics
How much do Core Web Vitals actually affect rankings?
Google has confirmed CWV are a tiebreaker signal — when content quality is comparable between two pages, the one with better page experience scores wins. In practice, severe CWV failures (especially on mobile) can cause measurable ranking suppression.
What's the fastest way to improve LCP?
Compress and convert your hero image to WebP/AVIF, add fetchpriority="high" to the LCP element, and serve it from a CDN close to your users. These three changes alone often move LCP from "Needs Improvement" to "Good" range.
INP replaced FID in 2024 — what changed?
FID only measured the delay of the first interaction. INP measures the latency of all interactions throughout the page lifecycle and takes the worst-case 98th percentile score. It's a much stricter and more representative metric — many sites that passed FID are failing INP.
How The Washington Post Improved LCP by 88%
The Washington Post documented their Core Web Vitals optimization process publicly. Their primary LCP issue was hero images loading too slowly. Fixes included: implementing a CDN for all images, converting to WebP format, adding resource hints (preconnect and preload) for above-the-fold images, and eliminating render-blocking scripts in the head. The result was an 88% improvement in LCP time across their article pages, moving them from Poor to Good on the CWV scale. The business impact: measurably lower bounce rates and improved organic ranking stability during CWV-sensitive algorithm updates.