Web Design
What Are Core Web Vitals? A Guide to Improving LCP, INP and CLS
What are Google's Core Web Vitals, and how do you measure and improve LCP, INP and CLS? A practical technical guide.
LCP: Largest Contentful Paint
The time until the largest image or text block on the page appears, usually the hero image or main heading.
- Serve the hero image as WebP/AVIF at the right size.
- Don't lazy-load the LCP image; give it fetchpriority="high".
- Cut server response time with a CDN and caching.
- Reduce render-blocking CSS and fonts.
INP: Interaction to Next Paint
How long the page takes to respond visually after a user clicks. INP worsens when heavy JavaScript keeps the main thread busy.
- Remove unused third-party scripts.
- Break long tasks into smaller chunks.
- Load non-critical components later.
CLS: Cumulative Layout Shift
Unexpected movement of elements while the page loads, such as text jumping down as you read or clicking the wrong button.
- Give images and videos width/height or aspect-ratio.
- Reserve space for ads and embeds.
- Use font-display: swap with a matching fallback font.
Which metric fails when?
On corporate sites the most common problem is LCP: large unoptimized hero images, slow servers and web fonts delay the first view. On e-commerce sites INP stands out as filters, carts and third-party scripts keep the main thread busy. On news and blog sites CLS is common because of ad slots and late-loading components.
Image optimization step by step
- Serve images at the size they're displayed; don't put a 4000-pixel photo in a 400-pixel slot.
- Convert to WebP or AVIF.
- Serve different sizes for different screens with srcset and sizes.
- Prioritize the above-the-fold image and lazy-load the rest.
- Give every image width and height to prevent shifts.
Manage third-party scripts
Analytics, chat widgets, ad pixels and maps are often heavier than the site's own code. Review whether each one is really used, load what you can after user interaction and manage them centrally in a tag manager. Loading them only after cookie consent helps both privacy compliance and speed.
How to track improvement
Lab tests (Lighthouse) show a change's impact immediately; field data (Search Console and CrUX) reflects real user experience as a 28-day average. So even if your lab score rises right after a fix, Search Console can take a few weeks to update.
Frequently asked questions
How much do Core Web Vitals affect rankings?
They don't replace content quality but can decide between similar pages, and faster pages convert better.
Why do lab and field data differ?
Lighthouse tests one device and connection; field data (CrUX) is a 28-day average of real users.