Core Web Vitals — Audit and Fix LCP, CLS, and INP

Perform a complete Core Web Vitals audit and create a remediation plan for [SITE URL], platform: [WORDPRESS/NEXT.JS/CUSTOM/SHOPIFY], hosting: [SERVER/CLOUD].

**What are Core Web Vitals (CWV) and why do they matter:**
- These are user experience metrics used by Google as a ranking factor since 2021
- They measure loading (LCP), visual stability (CLS), and interactivity (INP)
- Sites in the 'Good' range have an advantage over 'Needs Improvement' or 'Poor' sites when content is equivalent

**2026 BENCHMARKS:**

| Metric | Good | Needs Improvement | Poor |
|--------|------|-------------------|------|
| LCP (Largest Contentful Paint) | <= 2.5s | 2.5-4.0s | > 4.0s |
| CLS (Cumulative Layout Shift) | <= 0.1 | 0.1-0.25 | > 0.25 |
| INP (Interaction to Next Paint) | <= 200ms | 200-500ms | > 500ms |

**PHASE 1 — DATA COLLECTION (tools):**

**Field data (RUM — real user data):**
- Google Search Console: Core Web Vitals report (priority — real user data)
- CrUX (Chrome User Experience Report): historical data via BigQuery
- PageSpeed Insights: combines lab data + field data

**Lab data (simulated):**
- PageSpeed Insights: https://pagespeed.web.dev — analyzes single URL
- Lighthouse (Chrome DevTools): complete report per page
- WebPageTest.org: advanced analysis with waterfall chart

**Page typologies to test:**
- Homepage
- Category/listing pages (highest impact for e-commerce)
- Product pages
- Blog articles (if applicable)
- Priority landing pages

**PHASE 2 — DIAGNOSIS BY METRIC:**

**LCP — Largest Contentful Paint (target: <= 2.5s):**

The LCP element is typically: hero image, background image, large text block, video thumbnail.

Most common causes of slow LCP:

1. Unoptimized image:
- Format: use WebP or AVIF (instead of JPEG/PNG)
- Size: 2000px image for a 400px container (wasteful)
- Compression: no compression or minimal compression
- Fix: convert to WebP, resize, use image CDN (Cloudflare Images, imgix)

2. LCP not prioritized in loading:
- Image without 'fetchpriority=high' in HTML
- Image with lazy load applied to LCP (common mistake)
- Fix: add 'fetchpriority=high' to LCP element; remove 'loading=lazy' from LCP

3. High server response time (TTFB > 600ms):
- Slow server: consider hosting upgrade or CDN
- Slow PHP/backend: page caching (WP Rocket, W3 Total Cache, Redis)
- Unoptimized database
- Fix: enable full page cache, optimize queries, use CDN (Cloudflare)

4. CSS and JS blocking rendering:
- Critical CSS not inlined → delays first render
- Third-party JavaScript (tracking, chat, widgets) delaying LCP
- Fix: inline critical CSS, defer/async non-critical scripts, lazy load third-party scripts

**CLS — Cumulative Layout Shift (target: <= 0.1):**

What causes CLS:

1. Images without declared dimensions:
- Fix: ALWAYS declare width and height in image HTML (or aspect-ratio in CSS)

2. Ads without reserved space:
- Google Ads, Taboola, Outbrain inserting elements without predefined space
- Fix: define container with minimum height for ad slot

3. Fonts causing layout shift (FOUT/FOIT):
- Web font loading after fallback font → text changes size
- Fix: font-display: optional or swap with size adjustment; use size-adjust in CSS

4. Cookie / privacy consent banners without reserved space:
- Banner appears and pushes content down
- Fix: position as overlay (fixed) instead of pushing the layout

5. Third-party embeds (video, social media):
- YouTube embed without defined height
- Fix: wrapper with padding-bottom: 56.25% (16:9 ratio)

**INP — Interaction to Next Paint (target: <= 200ms):**

What it measures: time between any user interaction (click, tap, key) and the next visual frame response.

Most common causes:

1. Long JavaScript on main thread:
- Third-party scripts (tag managers, analytics, chat) blocking the thread
- Fix: load third-party scripts with defer or via Partytown

2. Excessive JavaScript bundle size:
- Frameworks like React/Vue loading more JS than necessary
- Fix: code splitting, tree shaking, route lazy loading

3. Unoptimized event handlers:
- onClick doing heavy synchronous processing
- Fix: break long tasks with setTimeout 0 or scheduler.yield

4. Animations on main thread:
- Use transform and opacity instead of height, width, top, left (these trigger layout)
- Fix: will-change: transform for animated elements

**PHASE 3 — PRIORITIZED REMEDIATION PLAN:**

| Issue | Metric | Estimated Impact | Difficulty | Priority |
|-------|--------|------------------|------------|----------|
| Images without WebP | LCP | High | Easy | 1 |
| fetchpriority on LCP | LCP | High | Easy | 2 |
| Images without dimensions | CLS | High | Easy | 3 |
| Page caching | LCP | High | Medium | 4 |
| Third-party scripts (defer) | INP | Medium | Medium | 5 |

**PHASE 4 — VALIDATION:**
- After each fix: re-test on PageSpeed Insights
- Wait 28 days to see impact on Search Console field data
- Compare organic position of fixed pages before and after

**Recommended tools by platform type:**
- WordPress: WP Rocket + Cloudflare + Smush/ShortPixel
- Shopify: Theme Speed Optimization + Yotpo Image Optimizer
- Next.js: Built-in Image Component + Vercel Edge Network
- Custom: manual implementation of the fixes listed above