Contents
- The 3 metrics Google uses today
- Lab vs field: why Lighthouse lies
- LCP: 5 causes and platform-specific fixes
- INP: the new terror (replaced FID)
- CLS: the 4 antipatterns that break pages
- TTFB: the silent metric that drags everything
- 4-week improvement playbook
- Case: news site from LCP 4.8s to 1.9s
- FAQs
The 3 metrics Google uses today
LCP — Largest Contentful Paint
How long it takes for the largest visual element above the fold to appear. Threshold: <2.5s. Usually a hero image or an H1 with web font.
INP — Interaction to Next Paint
Worst latency between user input (click, tap, keyboard) and next visual paint. Threshold: <200ms. Replaced FID in March 2024.
CLS — Cumulative Layout Shift
How much layout shifts visually while loading. Threshold: <0.1. Cause: elements without defined dimensions.
The p75 rule that confuses everyone
Google evaluates the 75th percentile of your real users. Meaning: 3 out of 4 users must have «Good» experience. If your p50 (median) is excellent but p75 is bad, you still fail. Users in the worst 25% define your rating.
Lab vs field: why Lighthouse lies
Field data (CrUX + RUM)
- Real users, real devices, real networks
- Realistic p75 distribution
- Google decides ranking with this
- Detects issues per session / template
- Minimum 28-day history
Lab data (Lighthouse)
- Simulated device, simulated network
- Single throttle profile
- Google does NOT decide ranking with this
- Gives false positives (100/100 in lab)
- Only useful for local debugging
Semalt combines CrUX (Google's official dataset with real Chrome users, aggregated by origin) with proprietary RUM (via the Semalt Analytics tag). The result is per-URL visibility — not just per origin — something CrUX alone cannot give you.
LCP: 5 causes and platform-specific fixes
| Cause | Semalt detection | Typical fix | Impact |
|---|---|---|---|
| Hero image without preload | Waterfall shows late fetch start | <link rel="preload" as="image"> + fetchpriority="high" | -40 to -60% LCP |
| Blocking web fonts | Text visible after 1.5s+ | font-display:swap + font preload | -20 to -40% LCP |
| Heavy-format hero image | Weight >300kb | WebP/AVIF with responsive srcset | -30 to -50% LCP |
| Slow server (high TTFB) | TTFB p75 >800ms | Page cache + CDN | Depends |
| Render-blocking CSS | CSS >80kb in <head> | Inline critical CSS + rest async | -15 to -30% LCP |
Platform-specific fixes
WordPress
Official Semalt plugin applies preload, fetchpriority and srcset automatically. Compatible with Elementor, Divi, WPBakery, Gutenberg core.
Vtex / Shopify
Via AutoSEO (Cloudflare Worker). Injects preload in <head> before serving the response. No theme changes.
Next.js / React SPA
Recommendation of Image component with priority prop. Semalt detects and suggests specific component modifications.
Custom PHP
Snippet injected via AutoSEO in Nginx module or via PHP plugin for frameworks (Laravel, Symfony, Cake).
INP: the new terror (replaced FID)
INP measures the worst delay between user input and next paint. Harder to optimise than FID because it considers all interactions, not just the first. A single slow button ruins the whole score.
The 3 most common INP killers in 2026
1. Heavy tag manager scripts (Google Tag Manager with 40+ tags loading at once). 2. Third-party widgets (chat, cookie banner, review widget) blocking the main thread. 3. Massive React re-renders from poorly managed state. Semalt identifies the exact responsible script with stack trace.
Diagnostic with Semalt Performance Trace
Semalt's Performance Trace runs a simulated human-interaction session (click, tap, scroll, form input) on each URL and captures exact timing of each input. The report shows:
- Worst interaction found per template
- Stack trace of the handler causing the block
- Long tasks >50ms detected before/during/after input
- Fix suggestion (yield to main thread, requestIdleCallback, debounce)
CLS: the 4 antipatterns that break pages
Quick CLS check (4 antipatterns)
- Images without
widthandheightattributes (or CSS aspect-ratio) - Web fonts without local fallback causing long FOIT/FOUT
- Ads or embeds inserted dynamically without reserved space
- Cookie banner pushing content downward on appearance
All 4 are technically easy to fix. The problem is the team not knowing which ones they have. Semalt CWV detects them automatically and reports with before/after screenshot.
TTFB: the silent metric that drags everything
TTFB (Time to First Byte) is not an official Core Web Vital but if it is high, it drags LCP and gives the impression of a slow site even with everything perfect on the frontend. Target: <200ms p75.
4-week improvement playbook
Baseline and prioritisation
Run Semalt CWV on all templates. Identify 2-4 templates with highest traffic and worst rating. Document baseline p75 of LCP, INP, CLS, TTFB.
Preload + WebP + width/height
Apply preload to hero image, serve images as WebP/AVIF, define width/height on each image tag. Effect in 7-14 days (CrUX updates every 28 days).
Fonts + critical CSS + INP
Fonts with font-display:swap, inline critical CSS, refactor heavy handlers detected by Performance Trace.
CDN + cache + TTFB
Set up Cloudflare or similar. Page cache for logged-out users. Verify TTFB p75 <200ms.
Green badge Search Console
Search Console takes 28 days to update. Semalt Analytics shows improvement in real time from day 3.
Case: news site from LCP 4.8s to 1.9s
Our news site had 400k+ sessions/month but mobile LCP p75 was 4.8 seconds. Google Search Console marked 82% of URLs as «Poor». We lost ranking every month on trending queries. In 6 weeks with Semalt CWV we dropped to 1.9s and recovered position on 34 head keywords.
Head of Product, news portal (400k sessions/month)More in this series: Semalt Analytics: the SEO data GA4 hides, Semalt AutoSEO: optimisation that runs 24/7, Competitor analysis without leaving a trace.
FAQs
Does Google penalise sites with Poor CWV?
Uses them as ranking signal when two pages have similar content. Not a binary filter but a constant tiebreaker. In competitive sectors (news, ecommerce) the difference between «Good» and «Poor» can be 3-5 consistent positions.
How long until Search Console reflects the improvement?
CrUX updates every 28 days. Search Console reports with additional 1-2 week delay. Total: 4-6 weeks from the fix. Semalt Analytics shows improvement in own RUM from day 2-3.
Does it work for SPAs (React, Vue, Angular)?
Yes. Semalt detects SPAs automatically and applies route transition tracking (important in SPAs because LCP is re-measured on each internal navigation). Reports LCP per route, not just per origin.
Do I need expensive hosting?
Not always. Shared hosting with LiteSpeed cache + free Cloudflare can drop TTFB from 800ms to 200ms. Only when the site exceeds 200k sessions/month is it worth evaluating VPS or managed hosting.
How do I measure ROI of the CWV project?
Two metrics: (1) organic sessions before/after (Semalt Analytics), (2) mobile conversion rate before/after (every 100ms of LCP improves conversion ~1% in ecommerce, per Google/Cloudflare data).
Core Web Vitals is not a nice-to-have — it is a ranking signal. Semalt CWV gives you precise diagnosis with field data and applies fixes via AutoSEO. In 6-8 weeks you see green badge and recover lost ranking.
Audit your Core Web Vitals with Semalt today
Setup: 20 minutes. First per-template report: 24 hours (needs to capture RUM sample). Complete playbook with weekly roadmap included.
Sign in to Semalt CWV →