Core Web Vitals and Performance Metrics Cheat Sheet

Updated 2026-05-17

Next Topic: CSS Animations and Transitions Cheat Sheet

🧠Study flashcards on this topic114 cards · spaced repetition→

Web performance directly impacts user experience, search rankings, and business outcomes. Core Web Vitals are Google's standardized metrics measuring real-world user experience across loading speed, interactivity, and visual stability. Understanding how to measure, interpret, and optimize these metrics — alongside supporting performance indicators — separates slow sites from fast ones. Every metric offers specific optimization levers; every optimization requires measurement to prove its impact.

What This Cheat Sheet Covers

This topic spans 22 focused tables and 127 indexed concepts, 114 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Core Web Vitals MetricsTable 2: LCP Optimization TechniquesTable 3: INP Optimization TechniquesTable 4: CLS Optimization TechniquesTable 5: Measurement Tools and Data SourcesTable 6: Field Data vs Lab DataTable 7: Resource HintsTable 8: Image OptimizationTable 9: Font Loading StrategiesTable 10: JavaScript OptimizationTable 11: Third-Party Script ManagementTable 12: Compression and CachingTable 13: HTTP ProtocolsTable 14: CDN and Edge OptimizationTable 15: Critical Rendering PathTable 16: Render Blocking ResourcesTable 17: Performance APIsTable 18: Advanced CSS OptimizationTable 19: Service Workers and Caching StrategiesTable 20: Progressive Rendering and SSRTable 21: Performance Budgets and MonitoringTable 22: SEO and Business Impact

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Core Web Vitals Metrics

The three Core Web Vitals measure distinct aspects of user experience and serve as Google's primary ranking signals for page experience. Each metric targets a specific moment in the user journey and has defined thresholds that separate good, needs improvement, and poor experiences.

Metric	Example	Description
Largest Contentful Paint (LCP)	`2.5s` threshold for Good	• Measures loading performance by tracking when the largest visible content element renders • good sites hit ≤ 2.5s, poor sites exceed 4.0s
Interaction to Next Paint (INP)	`200ms` threshold for Good	• Measures responsiveness across the entire page lifecycle by observing latency of all user interactions (clicks, taps, keyboard) • replaced FID in March 2024
Cumulative Layout Shift (CLS)	`0.1` threshold for Good	• Measures visual stability by summing unexpected layout shifts throughout page life • lower is better, with 0 meaning no shifts
Time to First Byte (TTFB)	`<200ms` target	• Measures server response time from navigation start to first byte received • not a Core Web Vital but directly influences LCP

Table 2: LCP Optimization Techniques

LCP is determined by server response, render-blocking resources, and resource load time. The LCP element is typically a hero image, text block, or video — optimizing how quickly that specific element loads is the key to passing the 2.5s threshold.

Technique	Example	Description
Preload LCP resource	`<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">`	• Tells the browser to fetch the LCP element immediately rather than waiting for parser discovery • cuts discovery delay by 200-500ms

The rest of this section is part of the full cheat sheet

Table 3: INP Optimization Techniques

INP measures every interaction on the page and reports the worst-case 98th percentile latency. Slow interactions are caused by long tasks blocking the main thread — optimization focuses on reducing JavaScript execution time and breaking up blocking work.

Technique	Example	Description
Break up long tasks	`setTimeout(() => {...}, 0)` or `scheduler.yield()`	• Tasks over 50ms block the main thread • split work into chunks using `setTimeout`, `requestIdleCallback`, or Scheduler API

The rest of this section is part of the full cheat sheet

Table 4: CLS Optimization Techniques

Layout shifts occur when visible elements move after initial render — usually caused by late-loading content pushing existing content around. Preventing CLS requires reserving space for dynamic content before it loads.

Technique	Example	Description
Reserve space for images	`<img width="800" height="600" src="...">`	• Always include `width` and `height` attributes so browser reserves layout space before image loads • prevents reflow

The rest of this section is part of the full cheat sheet

Table 1: Core Web Vitals Metrics

Metric	Example	Description
Largest Contentful Paint (LCP)	`2.5s` threshold for Good	• Measures loading performance by tracking when the largest visible content element renders • good sites hit ≤ 2.5s, poor sites exceed 4.0s
Interaction to Next Paint (INP)	`200ms` threshold for Good	• Measures responsiveness across the entire page lifecycle by observing latency of all user interactions (clicks, taps, keyboard) • replaced FID in March 2024
Cumulative Layout Shift (CLS)	`0.1` threshold for Good	• Measures visual stability by summing unexpected layout shifts throughout page life • lower is better, with 0 meaning no shifts
Time to First Byte (TTFB)	`<200ms` target	• Measures server response time from navigation start to first byte received • not a Core Web Vital but directly influences LCP

Table 2: LCP Optimization Techniques

Technique	Example	Description
Preload LCP resource	`<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">`	• Tells the browser to fetch the LCP element immediately rather than waiting for parser discovery • cuts discovery delay by 200-500ms

Table 3: INP Optimization Techniques

Technique	Example	Description
Break up long tasks	`setTimeout(() => {...}, 0)` or `scheduler.yield()`	• Tasks over 50ms block the main thread • split work into chunks using `setTimeout`, `requestIdleCallback`, or Scheduler API

Table 4: CLS Optimization Techniques

Technique	Example	Description
Reserve space for images	`<img width="800" height="600" src="...">`	• Always include `width` and `height` attributes so browser reserves layout space before image loads • prevents reflow