Glossary
What is Core Web Vitals?
In depth
Core Web Vitals (CWV) was introduced by Google in 2020, became a ranking signal in 2021, and FID was replaced by INP in March 2024. CWV tries to measure real user experience — instead of lab testing, Google uses Chrome User Experience Report (CrUX) data anonymously collected from real users.
Metric #1 — LCP (Largest Contentful Paint). Measures how long it takes for the largest visual element (typically hero image, headline or video poster) to render in the viewport. Target: <2.5s good, 2.5-4s needs improvement, >4s poor. Improvement techniques: (1) image optimisation — AVIF/WebP, responsive sizes, priority preload; (2) Server-Side Rendering or Static Generation — JS bundle must not block first paint; (3) inline critical CSS — above-the-fold styles in <head>; (4) Edge CDN deployment (Vercel Edge, Cloudflare); (5) font preload + font-display: swap.
Metric #2 — INP (Interaction to Next Paint). Replaced FID in March 2024. Measures response time for any user interaction (click, tap, key press) until the next paint event. Target: <200ms good, 200-500ms needs improvement, >500ms poor. INP suffers from: heavy JavaScript bundles, long tasks (>50ms blocking main thread), useState/useReducer cascades in React, third-party scripts (Hotjar, Intercom). Fixes: code splitting + dynamic imports, useTransition (React 18+), strategic useMemo/useCallback, web workers for heavy compute, debounced input handlers.
Metric #3 — CLS (Cumulative Layout Shift). Measures how much visual elements move during load. Target: <0.1 good, 0.1-0.25 needs improvement, >0.25 poor. Common causes: missing image width/height (browser cannot reserve space), web font swap (layout shifts when fonts load), late-loading ads or banners, dynamic content injection (cookie banners). Fixes: explicit image dimensions (`<img width=800 height=600>`), font-display: optional (replaces swap), CSS aspect-ratio property, fixed-size containers for ad slots.
Weight in Google ranking — official docs say "page experience signals are one of many factors". In practice: hitting the 75% good URLs threshold (in Search Console) gives a ranking boost on highly-competitive queries. For low-competition keywords CWV impact is smaller. For Georgian business CWV is critical because of the 78% mobile share — Tbilisi 4G is fine on iPhone 12+, but in Kakheti villages 3G dominates and LCP thresholds matter a lot.
Monitoring: (1) Google Search Console > Core Web Vitals report (real-user data, 28-day aggregated); (2) PageSpeed Insights (single URL test, lab + field data); (3) Web Vitals Chrome extension (live debugging); (4) Vercel Analytics ($10/mo, real-time data per page); (5) New Relic Browser ($49/mo, enterprise-grade RUM). In 2026 Craftwebstudio's full portfolio (770+ pages) sits at 92% "Good" threshold in Search Console CWV — the result of a Next.js + Vercel architecture.
Examples
- 1Good LCP example: Next.js Image priority prop + AVIF + Vercel Edge CDN → 1.2s mobile LCP
- 2INP debugging tools: Chrome DevTools Performance tab > Long Tasks; Web Vitals extension; React Profiler
- 3Common CLS source: cookie banner injected after 2s — 0.3+ CLS, fixed by a reserved-height container
- 4CWV monitoring stack: Search Console (free) + PageSpeed Insights (free) + Vercel Analytics ($10/mo)
- 5Mobile vs desktop CWV: mobile targets are stricter — slower CPU, 3G/4G, smaller viewport. Optimise mobile-first
- 6Craftwebstudio benchmark 2026: 770 pages × 92% Good CWV threshold, average mobile LCP 1.4s, INP 145ms, CLS 0.04
Related terms
Related services
Frequently asked questions
Do Core Web Vitals really impact rankings?▾
Yes — hitting the 75% good URLs threshold in Search Console gives a ranking boost on competitive queries. Impact is smaller on low-competition keywords.
Which Core Web Vital matters most?▾
LCP in most cases — the visual completeness signal. INP during user interaction. CLS often gets fixed automatically (image dimensions + font preload).
Are Core Web Vitals better on Next.js sites than WordPress?▾
Usually yes — SSR/SSG + edge CDN + automatic image optimisation are Next.js defaults. Achieving the same on WordPress requires a WP Rocket + Cloudflare + image-plugin stack.
Ready for a free consultation?
Get in touch — we reply within 24 hours with a scoped project estimate.