Insights › Technical SEO
Core Web Vitals: the three numbers Google uses to judge your page
Core Web Vitals are the three metrics Google uses as a ranking signal: how fast the largest element paints, how quickly the page responds to input, and whether the layout jumps around while loading. Here's what each one means, what a passing score is, and how generated apps fail them.
Aug 8, 2026 · 6 min read
The short version
Core Web Vitals are three real-user metrics Google uses as a ranking signal: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness), and Cumulative Layout Shift (visual stability). A generated app typically fails at least two of them because the default build bundles are large, the font loading is unoptimized, and images ship without dimensions. The good news: the fixes are usually one-line config changes.
The three metrics
LCP — Largest Contentful Paint
How long it takes for the largest visible element (hero image, heading block, video poster) to render. This is the loading metric: a visitor sees something, but how long until they see the main thing?
- Good: under 2.5 seconds
- Needs improvement: 2.5–4.0 seconds
- Poor: over 4.0 seconds
The most common LCP killer in a generated app: a large hero image that loads late because it's lazy-loaded unnecessarily, or a web font that blocks rendering because font-display: swap isn't set.
INP — Interaction to Next Paint
How quickly the page responds to a tap, click or keypress across the whole visit. This replaced First Input Delay (FID) in March 2024.
- Good: under 200 milliseconds
- Needs improvement: 200–500 milliseconds
- Poor: over 500 milliseconds
The most common INP killer: a long JavaScript task on the main thread — a large bundle parsing, a heavy framework hydration, or an unoptimized third-party script that blocks the event loop.
CLS — Cumulative Layout Shift
How much the visible content jumps around during loading. A high CLS is the page where you go to tap a button and an ad loads above it, shifting the button under your thumb.
- Good: under 0.1
- Needs improvement: 0.1–0.25
- Poor: over 0.25
The most common CLS cause: images without explicit width and height attributes, dynamically injected content (banners, cookie notices) that push the page down, and web fonts that cause a flash of unstyled text that reflows the layout.
How generated apps fail
| Problem | Which metric it hits | Fix |
|---|---|---|
| Unoptimized hero image (large file, no responsive srcset) | LCP (slow paint) | Compress, use responsive images, set fetchpriority="high" on the LCP element |
| Large JS bundle (500 KB+ of framework) | INP (slow response), LCP (parse blocks paint) | Code-split, tree-shake unused imports, defer non-critical scripts |
| Images without width/height | CLS (layout jumps as images load) | Add explicit width and height on every <img> |
Web font without font-display: swap | LCP (text invisible until font loads) | Add font-display: swap to @font-face |
Third-party scripts in <head> (analytics, chat widgets) | INP (blocks main thread), LCP (blocks paint) | Load third-party scripts with async or defer |
| Cookie banner injected after load | CLS (pushes content down) | Reserve space for the banner with a fixed-height container |
The difference between lab and field data
Lighthouse and PageSpeed Insights give you lab data — a synthetic measurement on a simulated device and network. Core Web Vitals in Search Console are field data — real measurements from actual Chrome users. Lab data tells you if a fix improved things; field data tells you if it mattered for real visitors.
A generated app often scores well in dev (fast machine, local network, no third-party scripts) and poorly in the field (mobile device, 4G, real scripts). The only measurement that counts is the deployed URL on a real device.
How to check
- 1
Google PageSpeed Insights
Paste your URL. The lab data shows exactly what's slow; the field data (if available) shows what real users experience.
- 2
Search Console → Core Web Vitals
Shows CrUX (Chrome User Experience) data for your site, grouped by metric and status. This is the data Google uses for ranking.
- 3
Lighthouse in Chrome DevTools
Audit tab → run a performance report. It gives a per-metric breakdown with specific fix suggestions.
Actuant loads your deployed URL in a real browser and measures page weight, third-party requests, render-blocking resources and image optimization — the inputs that determine your Core Web Vitals scores.
Keep reading
HTTPS mixed content: what it is, why it blocks your page, and how to fix it
Mixed content is when an HTTPS page loads an HTTP resource — an image, a script, a font. Browsers block it, search engines penalize it, and visitors see a broken lock icon. Here's how to find every mixed-content request and fix each one.
Open Graph tags: the minimum set that makes every link preview work
Open Graph tags power the preview card when you share a link — the image, title and description that shows on Twitter, Slack, iMessage and everywhere else. Without them your link unfurls blank. Here's the six tags you need and the image rules that decide whether they work.