Web Design & Development

Website Speed and Core Web Vitals: Fixing LCP, INP and CLS

By Lokesh Narwara · 2026-10-23 · 5 min read

Core Web Vitals measure real user experience: how fast the main content appears, how quickly the page responds when someone interacts and whether it stays stable while loading. They are part of Google's page experience signals, and slow or jumpy pages also lose visitors and leads. This Core Web Vitals guide explains the three metrics, the targets to aim for, how to measure them and the practical fixes for LCP, INP and CLS.

What Core Web Vitals are

There are three main metrics. Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element, often a hero image or headline, to load. Interaction to Next Paint (INP) measures how quickly the page responds to clicks, taps and key presses. Cumulative Layout Shift (CLS) measures how much content jumps around while the page loads. INP replaced First Input Delay as a Core Web Vital in March 2024.

The targets to aim for

Google considers these values good, measured for most real users (the 75th percentile): LCP of 2.5 seconds or less, INP of 200 milliseconds or less and CLS of 0.1 or less. Meeting them helps users and supports SEO, although great content still matters most. Pages that are slow, unstable or unresponsive tend to lose people before they read a word.

How to measure your site

• Use PageSpeed Insights for both lab data and real-user field data from the Chrome UX Report.
• Check the Core Web Vitals report in Google Search Console to see groups of URLs that need work.
• Run Lighthouse in Chrome DevTools for detailed suggestions.
• Use WebPageTest for waterfalls that show exactly what loads and when.

Focus on field data when it exists, because it reflects what real visitors experience.

Fix LCP: make the main content load fast

Compress and properly size your hero image, serve modern formats such as WebP or AVIF and avoid loading huge originals. Preload the main image or font and mark the hero image with a high fetch priority, but do not lazy-load it. Reduce render-blocking CSS and JavaScript, use caching and a CDN and improve server response time, since a slow server delays everything.

Fix INP: make the page responsive

INP problems usually come from too much JavaScript running on the main thread. Remove unused scripts, defer non-essential code, break long tasks into smaller ones and avoid heavy third-party widgets such as chat tools, tag overloads and sliders. Test on a mid-range phone, not only on a fast laptop, because that is where problems show up.

Fix CLS: keep the layout stable

Always set width and height or an aspect ratio on images, videos and embeds so the browser reserves space. Reserve room for ads, cookie banners and dynamic content instead of inserting them above existing text. Use font-display settings carefully and preload key fonts so text does not jump when the font loads.

Choose better hosting and caching

Cheap, overloaded hosting often causes slow server response. Use a reliable host close to your audience, enable page and browser caching, compress files with Gzip or Brotli and use a CDN for static assets. For WordPress sites, remove unused plugins and use a lightweight theme.

Optimize images, fonts and embeds

• Lazy-load images below the fold.
• Use responsive image sizes with srcset.
• Limit font families and weights.
• Replace heavy video embeds with a lightweight preview image that loads the player on click.
• Avoid auto-playing media above the fold.

Keep third-party scripts under control

Analytics, chat, ad pixels and heatmap tools all add weight. Audit what you really use, load scripts asynchronously or via a tag manager, and remove old tags. Every script should earn its place by delivering value.

Quick wins you can do in a day

• Compress and resize your biggest images and convert them to WebP.
• Remove unused plugins, scripts and tracking tags.
• Turn on caching and compression in your hosting or CDN.
• Add width and height attributes to images and embeds.
• Delay chat widgets and non-essential scripts until after the page loads.

These changes alone often improve LCP and CLS noticeably without a redesign.

Common problems by platform

On WordPress, heavy themes, page builders, too many plugins and unoptimized images are the usual culprits. On Shopify, large apps and unoptimized theme sections slow things down. On custom builds, large JavaScript bundles and unoptimized images matter most. Whatever the platform, begin with the largest and slowest elements shown in your PageSpeed Insights report.

Why speed also affects conversions

Slow, jumpy pages frustrate visitors, who leave before they read your offer. This is especially costly for paid traffic, where you pay for each click. Faster pages tend to improve engagement and conversion rates, and they make your ads and SEO work harder. Treat performance as part of your marketing, not just a technical task.

A 30-day speed plan

• Week 1: measure key pages and list the top three problems for each.
• Week 2: fix images, caching and unused scripts.
• Week 3: address layout shifts and heavy third-party tools.
• Week 4: re-test, compare with the baseline and set a monthly monitoring routine.

Performance mistakes to avoid

• Lazy-loading the main hero image, which delays LCP.
• Adding every plugin, widget and pixel without checking the cost.
• Using uncompressed images straight from a camera or stock site.
• Testing only on a fast laptop and office Wi-Fi.
• Ignoring field data and optimizing only for a lab score.

Monitor and maintain

Re-test after redesigns, plugin updates and new campaigns. Set a monthly check in Search Console and PageSpeed Insights. Add a performance budget so new pages do not grow too heavy.