Core_Web_Vitals

Home / SEO Standards / Core_Web_Vitals

Core Web Vitals & Speed Standards

Last Edited: 2026-06-29 01:32

Largest Contentful Paint (LCP) Inputs

The critical media elements, layout styles, and header preload attributes that affect visual loading speed.

Target Range: Good <= 2.5s | Needs Improvement: 2.5s–4.0s | Poor: > 4.0s.
Input: Above-the-fold hero images/banners, header preload tags (<link rel="preload">), and the fetchpriority attribute.
Standards:
1. LCP Image Prioritization: Set hero and LCP-critical images to loading="eager" and use fetchpriority="high" (Ref: Images#Loading & Performance Attributes).
2. Header Preloads: Preload primary structural LCP images in the document <head> to trigger early download.
  - Example: <link rel="preload" as="image" href="/hero.webp">

Cumulative Layout Shift (CLS) Inputs

The dimension styles and placeholder containers used to reserve page layout space and prevent shifting.

Target Range: Good <= 0.1 | Needs Improvement: 0.1–0.25 | Poor: > 0.25.
Input: HTML dimensions (width/height), CSS aspect-ratio rules, and CSS min-height/min-width placeholder variables.
Standards:
1. Layout Space Reservation: Always provide explicit width and height dimensions or style them via CSS aspect-ratio to reserve space before assets load (Ref: Images#Image Sizing & Layout Attributes).
2. Dynamic Widgets: Define minimum height styling on parent wrapper elements for dynamically loaded blocks (ads, reviews widgets, scripts) to prevent layout jumping when they load.
  - Example: <div class="review-widget-wrapper" style="min-height: 250px;">

Interaction to Next Paint (INP) Inputs

Note

Provisional Standard: This metric is documented for technical awareness and is currently under review for future implementation. It is not currently enforced as a hard operational rule.

The JavaScript code bundles and execution scripts that affect page interaction latency.

Target Range: Good <= 200ms | Needs Improvement: 200ms–500ms | Poor: > 500ms.
Input: JavaScript bundle sizing, third-party scripts, and event handler callback scripts.
Standards:
1. Minification: Keep JS bundle execution overhead small to keep the main thread unblocked.
2. Task Yielding: Break up long-running scripts (>50ms) using asynchronous scheduling patterns (e.g. yielding to the main thread) to ensure the page responds to user clicks/keys instantly.