Core Web Vitals Explained: LCP, INP, and CLS (2026 Guide)

# Core Web Vitals Explained: LCP, INP, and CLS (2026 Guide) Google uses Core Web Vitals as a ranking signal. Your site's speed and stability are no longer optional — they directly affect how much traffic Google sends you. This guide explains exactly what each metric measures, what thresholds matter, and a prioritised action list for improving them on WordPress, custom PHP sites, and Node.js apps. ## The headline numbers Core Web Vitals is a set of three metrics. Each has three bands — good, needs improvement, poor. Passing Core Web Vitals means getting into "good" for all three on at least 75% of page loads (measured by real Chrome users, not your laptop). | Metric | What it measures | Good | Needs improvement | Poor | |---|---|---|---|---| | **LCP** — Largest Contentful Paint | Time to render the largest element | ≤ 2.5 s | 2.5 – 4.0 s | > 4.0 s | | **INP** — Interaction to Next Paint | Slowest response to user input across the session | ≤ 200 ms | 200 – 500 ms | > 500 ms | | **CLS** — Cumulative Layout Shift | How much the page "jumps around" during load | ≤ 0.1 | 0.1 – 0.25 | > 0.25 | LCP is usually the hardest to fix because it depends on hosting speed, CDN, and image optimisation stacked together. INP requires JavaScript discipline. CLS is mostly about reserving space for images, ads, and embeds. ## LCP — Largest Contentful Paint ### What it is LCP is the time from when the user navigates to your page to when the largest content element (usually your hero image or top headline) becomes visible. Reflects "how fast did the page feel loaded?" The LCP element is typically: - The hero image at the top of the page - A large video thumbnail - A large paragraph of text, if there is no big image - The featured post image on a blog home page Chrome picks this element automatically and reports the time. You can see it in PageSpeed Insights → Diagnostics. ### What makes LCP slow Four culprits, in rough order of impact: **1. Slow server response (TTFB — Time To First Byte).** Accounts for roughly 40% of LCP on most sites. A slow PHP backend, missing OPcache, distant server, or unoptimised database queries all show up here. If your TTFB is above 600 ms, that is the first fix. **2. Render-blocking resources.** CSS and JS that must download and execute before the browser paints anything. Fat CSS bundles, synchronous third-party scripts (analytics, chat widgets), web fonts loaded without `font-display: swap`. **3. Slow resource load (the LCP element itself).** Your hero image is 2 MB, uncompressed JPEG, no responsive variants. **4. Client-side rendering delay.** React / Vue single-page apps that show a skeleton and only render the real content after hydration. Your LCP is the skeleton, not your actual hero. ### Fix ladder for LCP Start at the top, each step has diminishing returns after it: 1. **Upgrade PHP.** Moving from PHP 7.4 to 8.2 typically improves TTFB 15–25% on WordPress. On our [cPanel plans](https://domainindia.com/hosting-plans/cpanel) this is one click in Select PHP Version. 2. **Enable page caching.** WP Rocket, LiteSpeed Cache, W3 Total Cache — any of these. LiteSpeed Cache is free if your host runs LiteSpeed (all our cPanel plans do). 3. **Put Cloudflare in front.** Free plan caches static content globally. Typically saves 100–300 ms LCP in tier-2/3 Indian cities. 4. **Optimise the LCP image.** Convert to WebP or AVIF (30–60% smaller than JPEG at same quality), resize to the actual displayed dimensions, serve responsive `srcset` variants. 5. **Preload the LCP image.** Add `` in ``. 6. **Do NOT lazy-load the LCP image.** Common mistake — people lazy-load every image, including the hero. Lazy-loading the LCP image slows it down on purpose. 7. **Inline critical CSS.** Extract the CSS needed to render the above-the-fold content, inline it in ``, async-load the rest. 8. **Defer non-critical JavaScript.** `