Core Web Vitals: Measure, Fix & Rank

What Are Core Web Vitals

Core Web Vitals (CWV) are a set of specific, measurable metrics Google uses to quantify the real-world user experience of your web pages. Introduced as a ranking factor in 2021 and continuously refined, they represent Google's commitment to rewarding pages that are not just relevant — but fast, responsive, and visually stable. In competitive verticals like Indian fintech, where multiple sites have comparable content quality, CWV can be a meaningful tiebreaker.

There are three Core Web Vitals: LCP (Largest Contentful Paint — how quickly the main content loads), INP (Interaction to Next Paint — how responsive the page is to clicks and taps), and CLS (Cumulative Layout Shift — how visually stable the page is as it loads). Each has a "Good," "Needs Improvement," and "Poor" threshold. Google's Page Experience signal is primarily based on whether your pages reach the "Good" threshold across all three.

LCP — Largest Contentful Paint

LCP measures the time from when the user initiates a page load to when the largest visible content element (usually a hero image, main heading, or large block of text) is fully rendered. The target is under 2.5 seconds. LCP directly corresponds to the user's perceived load speed — it's when they feel the page has "arrived."

For Indian fintech pages, the most common LCP elements are hero images (like rate comparison banners on BankBazaar's product pages) and large above-the-fold text blocks. The most common LCP killers: uncompressed hero images (serve WebP, preload the LCP image), render-blocking resources (defer non-critical CSS and JavaScript), slow server response time (use a CDN, optimize your database queries), and fonts that block rendering (use font-display: swap).

A specific pattern seen on Indian financial comparison sites: the rate table that appears at the top of a "best credit card" page is often rendered by JavaScript after an API call. If Google can't see this content in the initial HTML, it scores the LCP against whatever loads first — often the navigation or a spinner. Solution: server-side render the initial state of rate tables so they appear in the HTML immediately.

INP — Interaction to Next Paint

INP (which replaced FID — First Input Delay — in March 2024) measures the time from when a user interacts with the page (click, tap, keypress) to when the browser visually updates in response. The target is under 200ms. Poor INP feels like a sluggish, unresponsive page — users tap buttons and nothing happens for a second. This is especially damaging for financial tools like EMI calculators or insurance quote forms.

INP is measured across all interactions during the page visit — not just the first. This makes it particularly challenging for single-page applications (SPAs) where subsequent navigation and UI updates all count. The main culprits: heavy JavaScript that blocks the main thread, third-party scripts (cookie consent banners, chat widgets, analytics), and complex React/Angular components that take too long to reconcile the DOM on user input.

CLS — Cumulative Layout Shift

CLS measures how much your page's layout shifts unexpectedly as it loads. If an image loads and pushes text down, or an ad appears above a button you're about to click, that's a layout shift — and it's deeply frustrating. The target is under 0.1 (on a scale where 0 is perfect). A score above 0.25 is "Poor" and will negatively impact your rankings.

For fintech sites, the biggest CLS offenders are: ads and banners that load asynchronously and push content down; images without explicit width and height attributes (so the browser doesn't reserve space for them); dynamically injected content above the fold; and web fonts that cause text to reflow when they load. The fix for images is simple: always set width and height attributes in HTML — the browser uses them to reserve space before the image downloads.

How to Measure CWV

CWV can be measured in two ways: Field Data (real user data from the Chrome User Experience Report — what Google actually uses for ranking) and Lab Data (simulated performance in tools like Lighthouse/PageSpeed Insights — useful for debugging). Always fix issues based on field data from GSC's Core Web Vitals report, then verify fixes with lab tools.