blog single

Core Web Vitals: what changed and what to do

Performance traces for a website on a monitor

Published on:

February 13, 2025

TAG:

PERFORMANCE

BY:

Edgeless Team

Read Time:

6 MIN READ

post detail

Core Web Vitals have become part of how teams talk about website quality, but the conversation often stops at a score. The metrics are more useful than that. Each one describes something a visitor feels, and each one points to a different kind of fix. Understanding the three is enough to run a sensible performance program.

The three metrics, in plain terms

Largest Contentful Paint measures how long the main content takes to appear. On most pages that is a hero image or a large heading. Interaction to Next Paint measures how quickly the page responds after a tap or click. Cumulative Layout Shift measures how much the page moves while it loads.

The thresholds are a guide rather than a grade. A good Largest Contentful Paint is under 2.5 seconds, a good Interaction to Next Paint is under 200 milliseconds and a good layout shift score is under 0.1. Those numbers are measured at the 75th percentile of real visits, which means a quarter of your visitors have a worse experience than the number suggests.

What changed with interaction timing

Interaction to Next Paint replaced First Input Delay as the responsiveness metric. First Input Delay only measured the wait before the browser could start handling the first interaction. The newer metric looks at the whole delay between an interaction and the next frame the visitor sees, across the visit, and reports a high value when the page feels sluggish.

In practice this raised the bar for pages with heavy JavaScript. A page can load quickly and still feel slow when someone taps a menu, because the main thread is busy with scripts. Long tasks, large bundles and third party tags are the usual causes, and they show up in the interaction metric rather than the load metric.

Field data beats lab scores

Lighthouse and similar tools run in a controlled environment. They are useful for finding problems and for testing a fix before release, but they do not represent your visitors. Field data from real devices, networks and locations is the number that matters, and it is available in Search Console and in most analytics tools.

Segment the field data by device and by page group. A site average can hide a mobile problem on one template. Check the pages that carry commercial intent separately from blog pages, because a fast article does not help if the contact page is slow.

The fixes that usually move the number

Serve correctly sized images in a modern format and preload the hero image.
Set width and height on media so the layout does not shift.
Split long JavaScript tasks and load non critical code after the main content.
Remove or defer third party tags that nobody uses.
Self host fonts, limit weights and preload the one used above the fold.
Reserve space for ads, embeds and consent banners before they load.
Use a CDN and cache HTML at the edge where the platform allows it.

Developer reviewing a page performance waterfall — Fix the largest element first, then the longest task. Improvements compound when the same template is used across pages.

Interaction problems need a different method

Load problems are usually visible in a waterfall. Interaction problems need a trace. Record a session on a mid range phone, tap the main controls and look for long tasks on the main thread. A menu that takes a second to open is almost always waiting behind script that has nothing to do with the menu.

Common culprits are chat widgets, consent managers, analytics bundles and client side rendering of content that could have been sent as HTML. Moving work to the server or to build time often improves both the load metric and the interaction metric at once.

Images and fonts in practice

Images are still the most common cause of a slow largest element. A hero photo exported at 3000 pixels wide and displayed at 900 is a large download for no visual gain. Export at the display size for each breakpoint, use a modern format and let the browser choose the smallest suitable file.

Do not lazy load the hero. A lazy loading attribute on the largest image tells the browser to wait until layout before it fetches the file, which pushes the paint later. Load the hero eagerly, preload it with the correct responsive hint and lazy load only the images below the fold.

Fonts behave the same way. Every weight is a file, and a font loaded from a third party adds a connection before the text can paint. Host the files yourself, use two weights at most and preload the one used in the heading. A swap period with a similar fallback font is usually better than invisible text.

Third parties and consent

A consent banner that loads the tag manager before the banner itself is a performance problem with a compliance flavor. Load the consent tool first, keep it small and defer every tag that is not strictly necessary until consent is recorded. The page can render without the marketing tags, and it should.

Audit the tag list every quarter. Campaigns end, agencies change and tools are replaced, but the tags stay. Each one adds script, network requests and a maintenance obligation. A short list of tags with an owner and a review date is easier to defend than a container full of experiments from three years ago.

Where an embed is essential, such as a booking widget or a map, load it on interaction or after the main content. A placeholder that reserves the space prevents layout shift while keeping the initial load light. The visitor who needs the widget will still get it, and the visitor who does not never pays for it.

Talking about results

Translate the metrics for the people who fund the work. Largest Contentful Paint is how long the page takes to look ready. Interaction to Next Paint is how long a tap takes to respond. Layout shift is how much the page jumps while reading. Those descriptions are accurate enough for a decision and much easier to act on than a percentile.

Report the pages that matter, not the site average. A fast blog archive and a slow contact page average out to a number that describes neither. Group pages by template and report the group that carries the commercial task.

A routine that keeps scores honest

Check the field data monthly for the five most important templates. Run a lab test before every release that touches the layout or adds a script. Keep a budget for page weight and script count, and treat an exception as a decision that needs a name attached.

When a metric worsens, connect it to a change. Most regressions come from a new tag, a larger image, a font weight or an added component. A short changelog of front end changes makes that connection quick, and quick diagnosis is what keeps a small regression from becoming the new baseline.

A performance score is a summary. The useful work is finding the one element, script or layout decision that makes a real visitor wait.
Edgeless Team

Do not chase a perfect score. Chase a page that appears quickly, responds when touched and stays still while it loads. Those three outcomes are what the metrics measure, and they are what visitors notice.

We measure field performance, trace the slow interactions and fix the causes in the order that improves the visitor experience fastest.

Explore web development

Start with the template that carries the most revenue, not the home page by default. Fix it, measure the field data for a month and repeat. Performance improves when the routine is small enough to survive a busy quarter.

Core Web Vitals

Performance

SEO

Core Web Vitals: what changed and what to do

Let's Talk About Your Project