TL;DR, the core in 5 points
• LCP (load time of visible element), INP (interaction responsiveness) and CLS (layout stability) are the three Core Web Vitals Google measurably factors into rankings.
• Hero image in WebP/AVIF + preload in <head> is the fastest LCP win, often 0.5–1.5s improvement in one step.
• INP >200ms costs rankings: splitting long-running JavaScript tasks with scheduler.yield() is the highest-impact fix.
• Field data (CrUX, 28-day average) is what Google ranks on, not the lab measurement from PageSpeed Insights.
• WordPress + page builder: 60–70% win with plugin tuning. Next.js or custom builds: code-level work required.
LCP fix: 4 steps
1) Hero image to WebP/AVIF (50–70% smaller). 2) Preload your LCP element in <head>. 3) Lazy-load everything below-the-fold. 4) No render-blocking CSS in <head>.
LCP is determined in 80% of cases by the hero image or the largest text block above the fold. Use the PageSpeed Insights LCP diagnostic to confirm what your LCP element is before you start. WebP saves an average of 30–35% compared to JPEG, AVIF saves 40–50%. The preload tag (<link rel='preload' as='image'>) instructs the browser to load the LCP element earlier than normal, this alone typically gives 0.3–0.8s LCP improvement. Use fetchpriority='high' on the LCP img element as an addition.
Expected impact: LCP improves from 'Poor' (>4s) to 'Good' (<2.5s) in 70–80% of cases after these 4 steps. Time investment: 2–4 hours for image conversion + preload implementation.
INP fix: 3 steps
1) Code splitting, only load what the current route needs. 2) Break long tasks (>50ms) with scheduler.yield(). 3) Defer third-party scripts (analytics, chat) or move to web worker.
INP measures the time from user interaction (click, keystroke) to visible page response. An INP of 200–500ms feels 'slow', above 500ms, 40% of users leave the page without converting. The biggest INP offenders are heavy JavaScript frameworks loading everything at once, and third-party chat and marketing scripts (Intercom, a marketing automation platform Chat, Hotjar) running on the main thread. Move these to web workers or load them only after the first user interaction. For WordPress: deactivate unnecessary plugins systematically and measure INP per removed plugin.
Expected impact: INP from >500ms to <200ms demonstrably saves 15–25% bounce rate. Time investment: 4–8 hours for code splitting + script optimisation depending on tech stack.
CLS fix: 3 steps
1) Width/height on all images, prevents reflow. 2) Don't load above-the-fold content after DOM-ready. 3) Webfonts with font-display: optional or preload + size-adjust.
CLS is the most misunderstood Core Web Vital. A CLS score above 0.1 means elements visibly shift while the page loads, experienced by users as a 'jumping' page. The three biggest CLS causes: images without explicit width/height attributes (browser doesn't know the space before loading), ads or embeds that load late and push content down, and webfonts that swap after initial render. font-display: optional is the most radical fix (falls back to system font if webfont doesn't load fast enough) but sometimes too conservative, font-display: swap with size-adjust is a good compromise.
Expected impact: CLS fix from >0.1 to <0.1 on implementing all three steps. Time investment: 1–3 hours for CLS diagnosis and implementation.
Verify in 3 tools
PageSpeed Insights (synthetic + field), CrUX dashboard (28-day field data), Search Console > Core Web Vitals report (per URL group). Track all three, lab values ≠ field data.
The difference between lab and field data is crucial: PageSpeed Insights lab measurement runs on one specific connection and device. CrUX field data is the average of all real users on your site over 28 days. Google ranks on field data, so a green lab score but red field data means your ranking problem still exists. CrUX has a minimum threshold: sites with little traffic are not included in CrUX and see no field data. In that case lab data is your only measurement point. The Search Console CWV report groups URLs by status ('Poor', 'Needs improvement', 'Good'), prioritise the 'Poor' cluster.
Expected impact: systematically monitoring all three tools gives 30% earlier signal on ranking declines. Time investment: 1 hour per month for a monitoring round.
When DIY vs specialist?
WordPress + page builder: often 60–70% win with plugin tuning. Custom build / Next.js: needs code-level work. Headless commerce: usually both.
The 'do-it-yourself vs. outsource' decision depends on your tech stack and the gap to threshold values. A WordPress site with Elementor scoring 65/100 PageSpeed can be brought to 80–85 with the right plugins (LiteSpeed Cache or WP Rocket, Imagify, Flying Scripts) without a developer. A site at 45/100 with fundamental architecture issues (synchronous JavaScript in the head, no CDN, server response >1s) needs code-level intervention. Hire a specialist if: your site remains red on field data after plugin tuning, you're building on Next.js or custom React, or you're an e-commerce with high product counts.
Expected impact: self-service plugin tuning captures 60–70% of available CWV gains. A specialist captures the remaining 30–40%. Time investment: 4–8 hours DIY, or 8–24 hours for a specialist depending on complexity.
Tools we recommend
PageSpeed Insights (free): direct CWV measurement synthetic + field. Use for every page you optimise, not just the homepage.
browser dev tools > Performance tab (free): inspect individual long tasks, main thread blocking and LCP element timing.
CrUX Dashboard on Looker Studio (free): visualise 28-day field data trends per page group. Connect to your GSC account.
WP Rocket (€59/year): best all-in-one cache + optimisation plugin for WordPress. Covers LCP, CLS and basic INP improvements.
Imagify (free up to 20MB/month): automatic WebP/AVIF conversion for WordPress without manual image editing.
WebPageTest (free): advanced waterfall analysis per browser and connection type. Use for diagnosing render-blocking resources.
What changed in 2026
INP definitively replaced FID as CWV metric in March 2024, sites tracking FID scores but ignoring INP got surprising ranking declines.
Google's CWV weight in the ranking algorithm was raised again in 2025: SEO expert estimates point to 5–10% direct ranking impact for pages moving from 'Poor' to 'Good'.
AVIF support is now universal in all major browsers (Chrome, Firefox, Safari 16+). AVIF as output format is 2026 best practice above WebP.
The Speculation Rules API is now widely available: pre-rendering next-page navigation dramatically reduces perceived LCP on navigation for sites with high return visits.
Want your Core Web Vitals fixed?
Request an audit →