Overview
Core Web Vitals are confirmed Google ranking signals. This framework provides a systematic approach to diagnosing which metrics are failing, identifying root causes, and implementing fixes in priority order. Work through each metric sequentially, starting with the one furthest from passing thresholds.
Current Metrics Assessment
| Metric | Current Value | Threshold | Status |
|---|
| LCP (Largest Contentful Paint) | | ≤ 2.5s | Pass / Needs Improvement / Poor |
| INP (Interaction to Next Paint) | | ≤ 200ms | Pass / Needs Improvement / Poor |
| CLS (Cumulative Layout Shift) | | ≤ 0.1 | Pass / Needs Improvement / Poor |
Data sources: Chrome UX Report (CrUX) for field data, Lighthouse/PageSpeed Insights for lab data.
LCP Optimization Framework
Step 1: Identify the LCP Element
| Page Type | Likely LCP Element | Identified Element |
|---|
| Homepage | Hero image or heading | |
| Blog post | Featured image or first heading | |
| Product page | Product image | |
| Category page | Banner image or heading | |
Step 2: Diagnose LCP Sub-Parts
| Sub-Part | Target | Current | Fix Priority |
|---|
| TTFB (Time to First Byte) | < 800ms | | |
| Resource load delay | < 200ms | | |
| Resource load time | < 800ms | | |
| Element render delay | < 200ms | | |
Step 3: LCP Fixes by Priority
| Priority | Fix | Impact | Effort |
|---|
| 1 | Preload LCP image with <link rel="preload"> | High | Low |
| 2 | Use responsive images with srcset | High | Medium |
| 3 | Serve images in WebP/AVIF format | High | Low |
| 4 | Reduce server response time (TTFB) | High | High |
| 5 | Remove render-blocking CSS/JS above LCP | Medium | Medium |
| 6 | Inline critical CSS | Medium | Medium |
| 7 | Use a CDN for static assets | Medium | Low |
INP Optimization Framework
Step 1: Identify Slow Interactions
| Interaction Type | Location | Current Delay | Target |
|---|
| Click handlers | | | < 200ms |
| Form inputs | | | < 200ms |
| Keyboard events | | | < 200ms |
Step 2: INP Fixes by Priority
| Priority | Fix | Impact | Effort |
|---|
| 1 | Break up long tasks (> 50ms) with yield() | High | Medium |
| 2 | Defer non-critical JavaScript | High | Low |
| 3 | Remove unused JavaScript | Medium | Medium |
| 4 | Use requestIdleCallback for non-essential work | Medium | Medium |
| 5 | Reduce DOM size (target < 1,500 nodes) | Medium | High |
| 6 | Avoid layout thrashing (batch DOM reads/writes) | Medium | Medium |
CLS Optimization Framework
Step 1: Identify Layout Shifts
| Shift Source | Page Location | Shift Score | Fix |
|---|
| Images without dimensions | | | Add width/height attributes |
| Ads and embeds | | | Reserve space with CSS |
| Web fonts (FOUT/FOIT) | | | font-display: swap + preload |
| Dynamic content injection | | | Reserve container height |
| Late-loading CSS | | | Inline critical styles |
Step 2: CLS Fixes by Priority
| Priority | Fix | Impact | Effort |
|---|
| 1 | Add explicit width and height to all images and videos | High | Low |
| 2 | Reserve ad slot dimensions with CSS min-height | High | Low |
| 3 | Preload web fonts and use font-display: swap | Medium | Low |
| 4 | Use CSS contain on dynamic content areas | Medium | Low |
| 5 | Avoid inserting content above existing content | Medium | Medium |
Tracking Progress
| Date | LCP | INP | CLS | Changes Made |
|---|
| | | | Baseline measurement |
| | | | |
| | | | |