All Topics Learning Paths
Getting Started SEO On-Page Advanced SEO Content Strategy Technical Deep Dives Industry Guides Visual Guides Using the Platform Issue Reference Troubleshooting & FAQ Glossary Off-Page SEO CMS Guides AI & SEO
In this section: Schema Markup & Structured Data Core Web Vitals Deep Dive Internal Linking Strategy Canonical URLs International SEO & Hreflang JavaScript SEO
Advanced SEO
Core Web Vitals Deep Dive

Core Web Vitals Deep Dive

Core Web Vitals are a set of specific metrics that Google considers important for user experience. They became a ranking factor in 2021 and measure loading performance, interactivity, and visual stability.

The Three Core Web Vitals

LCP
Largest Contentful Paint

Measures loading performance. Marks the point when the page's main content has likely loaded.

Good: ≤2.5s Needs Work: ≤4s Poor: >4s
INP
Interaction to Next Paint

Measures interactivity. Assesses responsiveness to user interactions throughout the page lifecycle.

Good: ≤200ms Needs Work: ≤500ms Poor: >500ms
CLS
Cumulative Layout Shift

Measures visual stability. Quantifies unexpected layout shifts during the page lifespan.

Good: ≤0.1 Needs Work: ≤0.25 Poor: >0.25

Understanding LCP

LCP reports the render time of the largest image or text block visible in the viewport. Common LCP elements include:

What LCP Measures
  • Hero images
  • Large text blocks
  • Video poster images
  • Background images (via CSS)
Common LCP Issues
  • Slow server response times
  • Render-blocking resources
  • Slow resource load times
  • Client-side rendering

How to Improve LCP

Optimization How to Implement Impact
Optimize images Compress images, use modern formats (WebP, AVIF), implement lazy loading High
Preload critical assets Use <link rel="preload"> for LCP images and fonts High
Use a CDN Serve static assets from geographically distributed servers Medium
Optimize server response Enable caching, optimize database queries, upgrade hosting High

Understanding INP

INP measures the latency of all click, tap, and keyboard interactions throughout the page lifecycle, reporting the worst interaction (with outliers excluded).

INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. It provides a more comprehensive view of page responsiveness.

How to Improve INP

  • Break up long tasks - Split JavaScript work into smaller chunks using requestIdleCallback or setTimeout
  • Reduce JavaScript execution time - Minimize, defer, or remove unused JavaScript
  • Use web workers - Move heavy computations off the main thread
  • Optimize event handlers - Keep event callbacks fast and efficient

Understanding CLS

CLS measures the sum of all individual layout shift scores that occur during the entire lifespan of the page. A layout shift occurs when a visible element changes position from one frame to the next.

Expected Shifts (Don't Count)
  • Shifts caused by user interaction
  • Shifts within 500ms of user input
Unexpected Shifts (Count)
  • Ads loading without reserved space
  • Images without dimensions
  • Late-loading web fonts

How to Improve CLS

  1. Always include size attributes - Add width and height to images and videos
  2. Reserve space for ads - Use min-height or aspect-ratio for ad containers
  3. Avoid inserting content above existing content - Add new elements below the viewport or use transforms
  4. Preload fonts - Use font-display: swap and preload critical fonts

Measuring Core Web Vitals

Tool Data Type Best For
Google Search Console Field data Overview of site-wide performance
PageSpeed Insights Lab + Field data Detailed page-level analysis
Chrome DevTools Lab data Debugging and development
Web Vitals Extension Real-time Quick checks during browsing

External Resources

Previous
Schema Markup & Structured Data
Next
Internal Linking Strategy