How to Optimize Your Website for Core Web Vitals in 2026

Who this guide is for, and how we wrote it#

This guide is for small and mid-sized businesses, marketers and in-house developers who manage a website on WordPress, Shopify, Webflow or a custom stack. It's based on Google's Search Central documentation on Core Web Vitals, the web.dev guides written by the Chrome team, and the performance checks we run on sites that publish through Uplift AI.

A quick disclosure: Uplift AI sells software that researches, writes and publishes SEO content and tracks how pages perform in search. We don't sell hosting or speed plugins. The examples below are illustrations, not client results, and every threshold and date comes from Google's public guidance.

What are Core Web Vitals?#

Core Web Vitals are three metrics Google uses to measure the real-world experience of loading, using and looking at a web page. LCP measures how fast the main content appears, INP measures how quickly the page responds to clicks, taps and key presses, and CLS measures how much the layout jumps around while it loads.

Google scores each metric at the 75th percentile of page visits, split by mobile and desktop. In plain terms, three out of four visits need a good experience before the page counts as good. The data comes from the Chrome User Experience Report (CrUX), which collects anonymous timings from real Chrome users over a rolling 28-day window.

• Largest Contentful Paint (LCP): good at 2.5 seconds or less, poor above 4 seconds.
• Interaction to Next Paint (INP): good at 200 milliseconds or less, poor above 500 milliseconds.
• Cumulative Layout Shift (CLS): good at 0.1 or less, poor above 0.25.
• Anything between good and poor is labelled "Needs improvement" in Search Console and PageSpeed Insights.

Do Core Web Vitals affect SEO rankings?#

Core Web Vitals affect SEO rankings, but only modestly. Google confirms that its ranking systems use them as part of page experience, and it also says good scores don't guarantee top positions. A slow page with the best answer will usually beat a fast page with a weak one. Where two pages are similar, the better experience can tip it.

The bigger reason to care is what happens after the click. Slow, jumpy pages lose visitors before they read, and that hurts leads and sales whatever your ranking. Treat Core Web Vitals as a conversion fix that also supports SEO, not as a ranking hack. Our technical SEO essentials guide covers the crawl and indexing checks that should sit alongside this work.

How do you measure Core Web Vitals correctly?#

Measure Core Web Vitals with field data first and lab data second. Field data shows what real visitors experienced and is what Google uses. Lab data, such as a Lighthouse run, tests one simulated load on one device, which makes it ideal for debugging but not for judging whether you pass.

Start in Google Search Console's Core Web Vitals report, which groups URLs that share a template and shows which metric fails. Then put a sample URL from each failing group into PageSpeed Insights. The top half shows CrUX field data for that page or origin, and the bottom half shows a Lighthouse lab run with specific suggestions.

• Google Search Console: site-wide view of passing and failing URL groups, split by mobile and desktop.
• PageSpeed Insights: field data plus a Lighthouse audit for any single URL.
• Chrome DevTools Performance panel: live LCP, INP and CLS as you click around your own pages.
• Lighthouse: lab testing during development. It can't measure INP, so it reports Total Blocking Time (TBT) as a stand-in.
• Real user monitoring (RUM): Google's open-source web-vitals JavaScript library can send each visitor's scores to your analytics, which helps on low-traffic pages that CrUX doesn't cover.

How to optimize your website for Core Web Vitals, step by step#

The fastest way to optimize your website for Core Web Vitals is to work from the worst metric on your most important template down. Fixing the right thing on one template beats fixing everything on one page. Here's the order we use.

Expect the work itself to take days, but the proof to take weeks. Because CrUX uses a 28-day rolling window, Search Console won't fully reflect a fix for about a month, so note the date of each change and check field data again after four weeks.

• Pull the Core Web Vitals report in Search Console and list failing URL groups by metric and device.
• Match each group to the template behind it, such as product page, blog post, category or homepage.
• Rank templates by business value: traffic, leads or revenue they bring, not URL count alone.
• Test one sample URL per template in PageSpeed Insights and note the failing metric and its main cause.
• Fix LCP first if it fails, since it's usually the biggest and most visible problem, then INP, then CLS.
• Deploy the fix to the template, confirm it in lab tests, and record the date.
• Click "Validate fix" in Search Console and recheck field data after 28 days.

How do you improve Largest Contentful Paint (LCP)?#

You improve Largest Contentful Paint by getting the main image or headline to the screen sooner. The LCP element is usually a hero image, a product photo or a large block of text. Google's web.dev team splits LCP into four parts: server response time (TTFB), the delay before the browser starts loading the LCP resource, the time it takes to download, and the delay before it's painted. Find which part is biggest and fix that.

A common pattern we see: the hero image is lazy-loaded, set as a CSS background, or injected by JavaScript, so the browser doesn't find it until late. Simply putting it in the HTML as a normal image with fetchpriority="high" often cuts LCP by a second or more on mobile.

• Never lazy-load the LCP image. Use loading="lazy" only for images below the fold.
• Add fetchpriority="high" to the LCP image, or preload it if it's discovered late.
• Serve images in WebP or AVIF, sized to the screen with srcset, and compressed.
• Cut server response time with page caching, a content delivery network (CDN) and faster hosting. Aim for a TTFB under 800 milliseconds.
• Remove or defer render-blocking CSS and JavaScript, and inline the small amount of CSS needed for the first screen.
• Avoid sliders and carousels in the hero area, since they often delay or change the LCP element.

How do you improve Interaction to Next Paint (INP)?#

You improve Interaction to Next Paint by keeping the browser's main thread free so it can respond as soon as someone clicks, taps or types. INP looks at nearly every interaction during a visit and reports one of the slowest, so a single sluggish menu, filter or add-to-cart button can fail the whole page.

The usual cause is too much JavaScript running at once, often from third-party tags such as chat widgets, A/B testing tools, heatmaps and ad scripts. In the audits we run, removing or delaying two or three unused tags is often the cheapest INP win available, ahead of any code rewrite.

• Audit third-party scripts and remove any that nobody uses. Load the rest after the page is interactive.
• Break long tasks (anything over 50 milliseconds) into smaller pieces, and yield to the main thread between them.
• Show visual feedback straight away, such as a pressed button state, and do heavy work after the next paint.
• Keep the DOM small. Pages with thousands of elements take longer to update after every interaction.
• Debounce input handlers on search boxes and filters so they don't run on every key press.
• Ship less JavaScript: split code by route and drop unused libraries and plugins.

How do you improve Cumulative Layout Shift (CLS)?#

You improve Cumulative Layout Shift by reserving space for everything before it loads, so content doesn't push other content around. Layout shifts happen when images, ads, embeds, banners or web fonts appear without a set size. They're annoying to read through and can cause mis-clicks on buttons.

CLS is often the easiest metric to fix because the cause is visible. Load the page on a phone with a slow connection and watch where things jump. Chrome DevTools can also highlight each shift and the element that moved.

• Set width and height attributes, or a CSS aspect-ratio, on every image and video.
• Reserve fixed space for ads, embeds and iframes, even before they load.
• Don't insert banners, cookie notices or promos above existing content after the page starts rendering.
• Preload key web fonts and use font-display with matched fallback font sizes to reduce text reflow.
• Animate with CSS transform and opacity instead of properties that change layout, such as top or height.
• Make pages eligible for the back/forward cache, so returning visitors get an instant, shift-free page.

Which Core Web Vitals fixes matter most for each metric?#

If you only have time for a few fixes, this quick reference shows the change with the best return for each metric and the tool that confirms it worked.

Our view: start with whichever of these touches your highest-value template. On most small business sites, that means the hero image and third-party tags, which together cause more failures than everything else on this list.

• LCP: stop lazy-loading the hero image and add fetchpriority="high". Confirm in PageSpeed Insights' LCP breakdown.
• LCP: add page caching and a CDN to cut TTFB. Confirm in PageSpeed Insights or your host's logs.
• INP: remove or delay unused third-party tags. Confirm with the DevTools Performance panel while clicking key buttons.
• INP: break up long JavaScript tasks on menus, filters and forms. Confirm with TBT in Lighthouse and INP in field data.
• CLS: add image dimensions and reserve ad slots. Confirm with the layout shift regions in DevTools.
• CLS: stop injecting banners above content. Confirm by loading on a throttled mobile connection.

How to optimize Core Web Vitals on WordPress and Shopify#

On WordPress, most Core Web Vitals problems come from the theme, page builders and plugins rather than WordPress itself. Use a lightweight theme, keep plugins to the ones you actually use, add a caching plugin or host-level caching, and check that your image or optimization plugin isn't lazy-loading the hero image. If you publish through our WordPress integration, posts use your existing theme, so theme fixes apply to every new article.

On Shopify, the hosting and CDN are handled for you, so focus on apps and theme code. Every app can add scripts to every page, and uninstalled apps sometimes leave code behind in the theme. Review app scripts, compress product images, and test your product and collection templates separately, since that's where most revenue sits. Our guide to AI SEO for ecommerce product pages covers the content side of those same templates.

Common Core Web Vitals mistakes to avoid#

The most common mistake is chasing a perfect Lighthouse score. Lighthouse runs one simulated load and can't measure INP, so a green 100 can sit next to a failing Search Console report. Judge success by field data at the 75th percentile, not by a lab number.

The second is fixing the homepage while the real failures are on blog posts or product pages. Search Console groups URLs by similarity for a reason, and the template with the most visits usually matters most.

• Lazy-loading every image, including the one that decides LCP.
• Installing several speed plugins that conflict with each other or with the host's cache.
• Testing on a fast office laptop instead of a mid-range phone on a mobile connection.
• Expecting Search Console to update the next day, when field data needs around 28 days.
• Following old FID advice. INP is stricter and measures every interaction, not just the first one.
• Treating Core Web Vitals as more important than content quality and relevance.

How Core Web Vitals fit with content and AI search#

Fast, stable pages help with AI search too. AI Overviews and answer engines still rely on pages that crawl cleanly and load reliably, and visitors who click through from an AI answer are just as quick to leave a slow page. Our AI search ranking factors guide explains how technical health sits alongside authority and content.

Speed won't save thin content, though. Once your templates pass, the biggest gains usually come from publishing pages that fully answer what your customers search for. Uplift's AI SEO agent plans and writes those pages, and the AI SEO checklist shows where Core Web Vitals sit in a full audit. Plans start from $49/month for a limited time per website.

Final verdict: how to optimize your website for Core Web Vitals#

To optimize your website for Core Web Vitals, measure field data in Search Console, find the template behind each failing group, and fix LCP, INP and CLS in that order with the high-impact changes above. Most sites reach the good range by fixing the hero image, trimming third-party scripts and reserving space for images and ads, not by rebuilding the site.

Then give it 28 days, validate the fix and move to the next template. Page speed and good page experience support your rankings and conversions, but helpful content still wins the click. If you want help producing that content on a site that's ready for it, see current plans.