Optimizing Core Web Vitals: A Guide for 2026

What Are Core Web Vitals?

Core Web Vitals are three metrics defined by Google that quantify the user experience of a website. They measure the three aspects most important to users: How fast does the page load? How quickly does it respond to input? And how stable does the layout remain during loading?

Google introduced these metrics in 2020 and has used them as a ranking signal since June 2021. They're not a dominant ranking factor, but together with mobile-first indexing they form the technical foundation. When content quality is otherwise equal, they can make the difference between page 1 and page 2. And for user experience, they're decisive: A slow, janky page loses visitors before they've read the first sentence.

The Three Metrics in Detail

LCP — Largest Contentful Paint

LCP measures how long it takes until the largest visible element on the page has loaded. This could be an image, a video thumbnail, or a large text block. The target time is a maximum of 2.5 seconds.

LCP is the metric users feel most directly. When they click a link and stare at a white page for 4 seconds, they're gone — no matter how good your content is.

How to optimize LCP:

Compress images consistently. Use modern formats like WebP or AVIF instead of PNG or JPG. A typical hero image can be reduced from 2 MB to 100 KB — without visible quality loss. Load the LCP element with high priority: Set fetchpriority="high" on the most important image. Avoid render-blocking resources: CSS and JavaScript that block rendering delay the LCP. Load non-critical CSS asynchronously and defer JavaScript with defer.

INP — Interaction to Next Paint

INP replaced the older FID metric (First Input Delay) in 2024. INP measures the total response time to user interactions — not just the first one, but all of them. A button click, opening a menu, scrolling through a list — INP captures how long it takes for the page to visually respond to the interaction.

The target value is a maximum of 200 milliseconds. Anything above that feels sluggish to users.

How to optimize INP:

Reduce JavaScript execution time. Heavy scripts that block the main thread are the most common INP killer. Break long tasks into smaller ones (under 50ms per task). Remove unused JavaScript — many websites load megabytes of code they never execute. Use requestIdleCallback for non-urgent tasks.

CLS — Cumulative Layout Shift

CLS measures how much the page layout shifts during loading. Everyone has experienced this: You want to click a button, and suddenly the page jumps down because an image or ad has loaded. That's exactly what CLS measures.

The target value is a maximum of 0.1. Anything above means your layout visibly jumps during loading.

How to optimize CLS:

Define fixed dimensions for all images and videos. Without defined width and height, the browser doesn't reserve space — and the layout shifts once the image loads. Load fonts with font-display: swap and ensure web fonts don't cause layout shifts. Don't insert content dynamically above existing content — new elements should always appear below the currently visible area.

How to Measure Your Core Web Vitals

Google PageSpeed Insights

Go to pagespeed.web.dev and enter your URL. You'll get both lab data (simulated tests) and field data (real user data, if enough traffic is available). Field data is what matters — Google uses it for ranking. As a new website, you'll initially only have lab data.

Google Search Console

Under "Core Web Vitals" in Search Console, you'll see the status of all your pages — split by mobile and desktop. Pages with problems are marked red, pages needing improvement yellow, and good pages green.

Chrome DevTools

In the Lighthouse tab of Chrome DevTools, you can run detailed performance audits. Here you can see exactly which resources are extending load time and get specific recommendations.

Why Static HTML Delivers Perfect Core Web Vitals

Here's an advantage you already have as a Proof of Reach reader: Static HTML pages — exactly what we build here — naturally have excellent Core Web Vitals.

No WordPress with 30 plugins loading JavaScript. No PHP assembling pages on the server. No CMS overhead. A single HTML file with embedded CSS loads in milliseconds. That's the simplest path to a perfect performance score.

This website (proofofreach.de) uses exactly this approach: Static HTML, minimal CSS, no external JavaScript. The result is Core Web Vitals in the top percentile — and that's exactly the proof we can show our clients.

Checklist: Improve Core Web Vitals in 30 Minutes

Optimize images (10 min): Convert all images to WebP. Set width and height attributes. Add loading="lazy" for images below the fold. Set fetchpriority="high" on the LCP element.

Clean up JavaScript (10 min): Remove unused JavaScript. Move all scripts to the end of the body or load them with defer. Check if external scripts (analytics, widgets) block the main thread.

Stabilize layout (10 min): Define fixed dimensions for all media elements. Reserve space for dynamic content (ads, lazy-loading). Use font-display: swap for web fonts.

FAQ

Last updated: March 25, 2026