Core Web Vitals
Core Web Vitals (CWV) are Google's user-experience metrics for loading performance (LCP), responsiveness (INP), and visual stability (CLS). This module shows you how to measure them (lab vs field), interpret failures, and prioritize fixes that move real-user metrics. Use it as your "measurement compass" before making server, cache, theme, or plugin changes.
| Lesson | Description |
|---|---|
| Introduction to CWV | What CWV measures, why it matters, and how to read the metrics |
| Largest Contentful Paint | Reduce LCP by optimizing the primary above-the-fold element and render path |
| LCP Case Study | Walkthrough: diagnose and fix a slow LCP on a real site |
| First Contentful Paint | Improve first paint by tightening the critical rendering path |
| Cumulative Layout Shift | Eliminate CLS by reserving space for images, fonts, ads, and UI |
| CLS Case Study | Walkthrough: diagnose and fix layout shifts |
| Interaction to Next Paint | Improve INP by reducing main-thread work and third-party overhead |
| INP Case Study | Walkthrough: reduce a high INP by fixing JavaScript bottlenecks |
| TTFB (Time to First Byte) | The server response metric that gates LCP and overall UX |
| TTFB Case Study | Walkthrough: reduce TTFB with caching and server changes |
| FID (First Input Delay) | Deprecated metric: what it was and how it maps to INP |
| Supporting Metrics | Use FCP, TBT, waterfalls, and diagnostics to find root causes |
| Benchmarking Workflow | A repeatable before/after process to prove improvements |
| Quick Lab & Cheat Sheet | Fast checks and reference targets for day-to-day work |