Core Web Vitals 2026 fixes that move field data — not just Lighthouse scores — require understanding the difference between what passes in a controlled lab environment and what real users on real devices actually experience. This guide covers the implementation patterns that consistently improve LCP, INP, and CLS in production on SaaS and B2B marketing sites.
The gap between lab scores and field data
Lighthouse and PageSpeed Insights lab scores simulate a single device and connection condition. Field data from the Chrome User Experience Report (CrUX) reflects the distribution of real-user conditions: slower Android devices, variable mobile network speeds, third-party scripts that load in parallel with your content, and browser extensions interfering with rendering.
It is common for a SaaS marketing site to score 90+ in Lighthouse lab mode while failing Core Web Vitals in field data. The reverse is less common. When optimizing, focus on the field data metrics in Google Search Console and PageSpeed Insights field section — that is what affects ranking.
LCP fixes that work in production
LCP (Largest Contentful Paint) measures when the largest visible content element finishes rendering. The most impactful fixes, ranked by frequency of impact:
- Preload the LCP image. Add
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">in the document<head>. This signals the browser to fetch the image before the parser reaches the<img>tag. On sites using Next.js, use thepriorityprop on the heroImagecomponent. - Convert the hero to a real
<img>element. CSS background images are deprioritized by the browser and are not eligible LCP candidates. If your hero is abackground-image, migrate it to an<img>element withfetchpriority="high". - Reduce TTFB below 800ms. If Time to First Byte exceeds 800ms, LCP cannot pass 2.5 seconds on most real connections. Solutions: CDN edge caching, static site generation (eliminating server-side rendering for cacheable pages), and reducing server-side computation on the critical path.
- Serve images in WebP or AVIF at correct rendered dimensions. An image served at 2x the rendered size doubles the download time. Use responsive images with
srcsetandsizesattributes to serve the correct resolution per viewport. Convert to WebP (80–85% quality) or AVIF (60–70% quality) for most images. - Remove render-blocking resources before the LCP image. Synchronous stylesheets and scripts in the
<head>delay when the browser can begin rendering. Inline only critical CSS; defer non-critical stylesheets; usedeferorasyncon all scripts.
INP fixes for interaction-heavy pages
INP (Interaction to Next Paint) measures the time from a user interaction (click, keypress, tap) to the next visual update. It is the Core Web Vital most commonly failed on JavaScript-heavy SaaS marketing sites with complex navigation, animations, or interactive pricing/feature sections.
- Identify long tasks with Chrome DevTools Performance panel. Record a user session while clicking through the page. Look for tasks in the main thread longer than 50ms. These are blocking INP responses.
- Break up long JavaScript tasks. Use
scheduler.yield()in supported browsers (Chrome 115+) orsetTimeout(fn, 0)to yield back to the browser between chunks of work. This allows INP responses to be processed without waiting for the entire task to complete. - Defer third-party scripts until after first interaction or a time delay. Chat widgets (Intercom, Drift), analytics scripts, and marketing automation tools frequently contribute significant main thread work. Load them with
type="module" deferor inject them dynamically after the page has loaded. - Audit event handler complexity. Click handlers that trigger synchronous DOM reads and writes (forced reflow) are a common INP cause. Separate DOM reads from DOM writes, and debounce handlers that fire on scroll or input events.
CLS fixes that persist after deployment
CLS (Cumulative Layout Shift) problems frequently reappear after fixes because the root causes are structural rather than one-off mistakes.
- Set explicit dimensions on all media. Every
<img>,<video>, and<iframe>should have explicitwidthandheightattributes. Modern CSS withaspect-ratioapplied automatically when width and height are present prevents layout shift on responsive layouts. - Reserve space for dynamically loaded content. Cookie banners, promotional bars, and chat widget launchers injected above the page fold cause shift. Reserve their height with a placeholder, or inject them from the bottom of the viewport.
- Prevent font swap layout shift. When a custom font loads after the browser has painted with a fallback font, the difference in metrics causes shift. Use
font-display: optionalto prevent this at the cost of occasionally showing the fallback; or preload the font and accept a brief FOIT (Flash of Invisible Text). - Test CLS across all page sections, not just above the fold. CLS accumulates from shift events anywhere on the page during load. Use the Layout Instability section of Chrome DevTools Performance panel to identify which elements are shifting and when.
How to prioritise when everything is in the red
| Priority | Action | Typical impact | |---|---|---| | 1 | Fix LCP image loading (preload + format + dimensions) | Highest; often moves LCP from Poor to Good | | 2 | Reduce TTFB via CDN or static generation | High if TTFB > 1s | | 3 | Set explicit image dimensions (CLS) | Medium; quick to implement | | 4 | Defer third-party scripts (INP + LCP) | Medium; reduces main thread pressure | | 5 | Break up long JS tasks (INP) | Lower; requires profiling | | 6 | Reserve space for dynamic content (CLS) | Lower; design change required |Start with LCP because it affects both ranking and user perception most directly. A slow LCP causes visible frustration on page load; CLS and INP issues are often perceived as "the site feels buggy" without users knowing the cause.
For a comprehensive checklist of all Core Web Vitals checks organised by metric, see the [Core Web Vitals checklist 2026](/blog/en/core-web-vitals-checklist-2026). For the technical SEO framework that contextualises performance within the full set of ranking signals, [technical SEO foundation](/en/seo-technical-foundation) covers the complete picture.
Related services
Frequently asked
How long does it take for Core Web Vitals improvements to show in field data?
CrUX data is on a 28-day rolling window. Improvements deployed today will gradually phase into the field data score over the following 28 days as the old data ages out. Expect 3–4 weeks for a significant improvement to fully reflect in PageSpeed Insights field scores and Google Search Console.
Do Core Web Vitals affect all pages equally?
Google evaluates Core Web Vitals at the page-group level for ranking purposes, with the overall site score weighted by traffic. High-traffic pages (homepage, pricing, key feature pages) have a proportionally larger effect on site-wide CWV status. Prioritise optimizing your highest-traffic pages first.
Our Lighthouse score is 95 but field data shows LCP failing — what is happening?
Lab conditions (Lighthouse) simulate a single device and connection. Field data aggregates real users including older devices and slower mobile connections. Third-party scripts loaded in production but not in Lighthouse tests are a frequent cause. Profile the page with the Chrome DevTools Performance panel on a throttled mobile connection to identify the gap.
Ready to upgrade your website?
Talk to us about professional website design for your business.
Related articles
Thiết kế website chuyên nghiệp giá bao nhiêu?
Chi phí thiết kế website chuyên nghiệp phụ thuộc vào phạm vi dự án, số trang, mức độ UI/UX tùy biến, tính năng kỹ thuật và yêu cầu SEO — không có một con số cố định áp dụng cho mọi trường hợp.
Read
Website mới làm bao lâu thì lên Google?
Website mới có thể được index sau vài ngày đến vài tuần, nhưng để có thứ hạng ổn định cần nền tảng kỹ thuật, nội dung phù hợp intent và tín hiệu tin cậy.
Read