Objective: Raise user experience and organic performance by meeting Google’s Core Web Vitals thresholds across key templates.
Targets
LCP (Largest Contentful Paint): < 2.5 s
FID (First Input Delay): < 100 ms
CLS (Cumulative Layout Shift): < 0.1
Scope: Home, category/collections, product/article templates, and other high-traffic pages.
Phase 1 — Measure & Triage
1) Establish baseline (Owner: SEO + Dev)
Run Google Search Console → Core Web Vitals: export affected URL groups.
For representative URLs, run PageSpeed Insights (mobile + desktop) and Lighthouse.
Optional deep dive: WebPageTest waterfalls + filmstrips.
2) Prioritise (Owner: PM)
Sort by traffic × revenue impact.
Pick one template per metric to fix first (e.g., PDP for LCP, article template for CLS).
3) Define acceptance criteria (Owner: Team)
Per template: “90% of field traffic meets thresholds on mobile.”
Phase 2 — Remediation Playbook
A) Improve LCP (Loading)
Goal: Main content visible fast.
Checklist
Images
Compress; serve responsive sizes with srcset/sizes.
Convert to modern formats (WebP/AVIF).
Lazy-load below-the-fold images only.
CSS/JS
Inline critical CSS; defer non-critical CSS.
Load scripts with defer/async; remove unused code.
Code-split bundles; tree-shake dependencies.
Server/Delivery
Enable caching (HTML where safe, assets aggressively).
Use a CDN; enable HTTP/2 or HTTP/3.
Preload the hero image and critical font files.
Optimise TTFB (database tuning, SSR/SSG where appropriate).
Quick wins
Replace heavy hero carousels with a single optimised image.
Eliminate render-blocking CSS from third-party widgets.
B) Improve FID (Interactivity)
Goal: First tap/click feels instant.
Checklist
Main-thread work
Break long tasks into microtasks (requestIdleCallback, requestAnimationFrame).
Avoid synchronous, heavy JSON parsing during initial load.
Script loading
Defer non-critical scripts; load tags after interaction when possible.
Audit third-party code; remove or conditionally load low-value vendors.
Ship less JS
Code-split routes; lazy-load non-essential components.
Remove unused polyfills and libraries.
Quick wins
Inline small interaction handlers; postpone analytics tag execution until after first paint.
C) Improve CLS (Stability)
Goal: No unexpected movement.
Checklist
Media & Ads
Set explicit width/height or aspect-ratio for images, videos, and ad slots.
Reserve placeholder space for late-loading embeds.
UI Patterns
Avoid inserting banners above existing content post-load.
Stabilise web fonts (font-display: swap); preload primary font files.
Components
Debounce dynamically sized elements (reviews, recommendations) until space is reserved.
Quick wins
Replace “auto” height hero iframes with fixed-ratio containers.
Lock header height; avoid resizing on scroll.
Phase 3 — QA & Release
1) Lab verification (Owner: QA)
Re-run Lighthouse; confirm LCP/FID/CLS improvements on target templates.
Check responsive breakpoints and slow-network profiles (Fast 3G/Slow 4G).
2) Field validation (Owner: SEO)
After deploy, monitor GSC Core Web Vitals for 14–28 days.
Watch PageSpeed Insights – Field Data for the same URLs.
3) Risk controls (Owner: PM)
Use feature flags / staged rollouts.
A/B test major UX changes; guard conversion KPIs.
Phase 4 — Operationalise
Dashboards
Weekly: CWV status by template (mobile/desktop), % URLs “Good.”
Alerting: regressions on LCP > 2.5 s, FID > 100 ms, CLS > 0.1.
Cadence
Weekly: review new issues in GSC; triage top 3.
Monthly: dependency audit (remove unused JS/CSS, third-party tags).
Quarterly: platform tune-up (HTTP/3, image pipeline, CDN rules, caching policies).
Roles & RACI (example)
SEO Lead (A/R): defines targets, monitors GSC, prioritises templates.
Frontend Dev (R): implements CSS/JS optimisations, code-splitting, placeholders.
Backend/Platform (R): caching, CDN, server rendering, TTFB improvements.
Design (C): stable components, font strategy, asset sizing.
PM/Owner (A): scope, sequencing, acceptance criteria, rollout plan.
QA (C/R): lab tests, device/network coverage.
Implementation Patterns (Copy/Paste Ready)
Resource Hints:
preconnect critical origins; preload hero image, key fonts, above-the-fold CSS.
Lazy Loading:
Native loading="lazy" for images/iframes below the fold.
Fonts:
Serve WOFF2, limit variants, font-display: swap; preload primary text font.
Images:
Use an image CDN for on-the-fly resizing; serve srcset with correct sizes.
JS Hygiene:
defer by default; load third-party after DOMContentLoaded or on interaction; remove dead code.
Tools
Google Search Console: sitewide CWV status and URL grouping.
PageSpeed Insights: field + lab data with prioritised fixes.
Lighthouse: lab audits (performance, accessibility, best practices).
WebPageTest: waterfalls, filmstrips, CPU/connection throttling.
Acceptance Checklist (per template)