Core Web Vitals Lcp Cls and Inp for on Page Optimisation

The three metrics explained

Largest Contentful Paint (LCP) measures how long the largest visible element, usually a hero image or heading, takes to render; Google's threshold for 'good' is 2.5 seconds or less. Cumulative Layout Shift (CLS) measures unexpected visual movement as a page loads, scored on a unitless scale where under 0.1 is good; it is commonly caused by images or ads loading without reserved space, or web fonts swapping in and shifting text.

Interaction to Next Paint (INP), which replaced First Input Delay as the responsiveness metric, measures the delay between a user's interaction, such as a click or tap, and the next visual update, with under 200 milliseconds considered good. Slow INP is usually caused by heavy JavaScript blocking the main thread during or after page load.

Fixing LCP on typical content pages

Compress and correctly size the LCP element, usually a hero image, and serve it in a modern format such as WebP. Preload the LCP image using a <link rel="preload"> tag so the browser fetches it before discovering it through normal HTML parsing, and never lazy-load it, since deferred loading directly delays LCP.

Reduce render-blocking resources, particularly large CSS files and synchronous third-party scripts loaded in the head, since the browser must download and process these before it can paint the main content.

Fixing CLS and INP

Eliminate CLS by reserving space for every image, embed and ad slot with explicit dimensions or aspect-ratio CSS before the asset loads, and by using font-display: optional or swap carefully combined with matched fallback font metrics to avoid a visible reflow when web fonts load. Avoid inserting new content above existing content after the initial load unless it is in direct response to a user action.

Improve INP by breaking up long JavaScript tasks into smaller chunks so the main thread can respond to input between them, deferring non-essential third-party scripts such as chat widgets and marketing pixels until after the page becomes interactive, and reviewing whether every loaded script is still actually in use.

• LCP under 2.5s: compress, preload and never lazy-load the hero element
• CLS under 0.1: reserve space for images, embeds and ads
• INP under 200ms: break up long tasks, defer non-essential scripts
• Audit third-party scripts regularly and remove unused ones

Monitoring vitals in RankAudit

RankAudit's Core Web Vitals report pulls field data for crawled URLs and highlights which pages fail each threshold, alongside a prioritised list of the specific resources causing the failure on each page. Fix your highest-traffic failing pages first, since Google evaluates Core Web Vitals per page and per template, not as a single sitewide score.

Key takeaways

• ✓Keep LCP under 2.5s by compressing and preloading the hero element
• ✓Keep CLS under 0.1 by reserving space for all dynamic content
• ✓Keep INP under 200ms by deferring non-essential scripts
• ✓Fix vitals on your highest-traffic pages and templates first

Why this lesson matters

This lesson belongs to Performance and Duplication, the part of On-Page SEO where the goal is: diagnose the page-experience and duplication issues that quietly suppress rankings sitewide.

Read it once, then do it straight away on a real site inside RankAudit. Nothing here is theory for its own sake — every step produces something you can show a client.

Do it now

1. 1Open RankAudit with sample data already loaded, so you are not stuck on setup.
2. 2Crawl a site and triage the issue list.
3. 3Run RankAudit's Core Web Vitals and duplicate content scans across the full site and clear every red-flagged page before your next audit cycle.