How to Improve Core Web Vitals Without Guesswork

What are Core Web Vitals?

Core Web Vitals are a set of real-world, user-centered performance metrics defined by Google. They measure loading performance (LCP), interactivity (INP) and visual stability (CLS). Together they form part of Google's ranking signals and directly affect the experience of every visitor to your website.

Largest Contentful Paint (LCP)

LCP measures when the largest visible element in the viewport finishes rendering. A good LCP is under 2.5 seconds. Anything above 4 seconds is considered poor.

The most common culprits are large unoptimized hero images, slow server response times and render-blocking resources that delay painting.

How to fix it:

• Convert hero images to WebP or AVIF format
• Add a <link rel="preload"> hint for the primary LCP element
• Use a CDN to reduce time to first byte
• Reduce server response time below 600ms
• Compress images below 200 KB

<img
  src="hero.avif"
  width="1200"
  height="630"
  loading="eager"
  fetchpriority="high"
  alt="Hero image description"
>

Interaction to Next Paint (INP)

INP replaced FID in March 2024 as the interactivity metric. It measures the latency of every user interaction — clicks, taps, keyboard inputs — throughout the entire page lifecycle. A good INP is under 200ms.

How to fix it:

• Break up long JavaScript tasks into smaller chunks
• Move heavy computation to Web Workers
• Defer non-critical third-party scripts with defer or async
• Reduce the amount of work done in event handlers

Cumulative Layout Shift (CLS)

CLS measures unexpected layout movement. A good CLS score is under 0.1. Anything above 0.25 is considered poor and will be noticed by users as content jumping around while the page loads.

How to fix it:

• Always set explicit width and height attributes on images and video
• Reserve space for ads, embeds and iframes before they load
• Avoid inserting content above existing content after load
• Use font-display: optional to prevent layout shifts from web fonts

Common problems

Most Core Web Vitals problems trace back to a small number of root causes: oversized images, unoptimized third-party scripts, missing resource hints and layouts that shift as assets load. A single audit run will surface most of these.

How to fix them

Fix order matters. Start with the issue that has the highest calculated impact on your score. For most websites this is LCP, followed by CLS. INP issues are usually discovered later and require JavaScript profiling to address precisely.

Checklist

• Measure your current LCP, INP and CLS using a real scan
• Identify the LCP element on each key page
• Convert and compress large images
• Add preload hints for the primary LCP image
• Set explicit dimensions on all images
• Audit and defer third-party scripts
• Re-scan and verify scores improved