Core Web Vitals: how page speed affects conversion

What are Core Web Vitals?

Core Web Vitals are the three metrics Google uses to measure the real loading and interaction experience of a page. LCP measures how long the main content takes to appear. INP measures how quickly the page responds to clicks, and CLS measures visual stability while the page loads.

A page passes the assessment when at least 75% of visits fall within the “good” threshold for all three metrics. The data comes from the Chrome User Experience Report, which aggregates the experience of real Chrome users over the previous 28 days.

Since March 2024, INP has replaced FID as the interactivity metric. The change made the assessment stricter. FID only measured the delay of the first interaction, whereas INP takes into account practically every interaction during the visit.

Do Core Web Vitals affect rankings?

Yes, they are part of the page experience signals Google takes into account, but their weight is moderate. Content relevance remains the deciding factor. A fast page will not outrank a more useful one, although between two comparable results the experience can tip the balance.

The indirect effect matters more. A slow website loses visitors before it finishes loading, reduces pages viewed per session and converts less. That loss affects all traffic, organic or paid, and makes every visit more expensive.

In SEO projects, speed is treated as a baseline requirement. It does not attract traffic on its own, but it prevents the traffic earned by content and links from going to waste. Pages that rely on JavaScript to display their main content tend to have a worse LCP. They are also harder to read for the crawlers that feed AI assistants, as the guide to SEO for AI search engines explains.

How does speed affect conversion?

Each metric holds back conversion at a different point in the journey. A slow LCP causes visitors to leave before they see the offer. A high INP makes users hesitate when they tap “Add to basket”, and a high CLS leads to mistaken clicks on forms and checkout steps.

LCP mainly affects the landing. On mobile, someone arriving from an ad or a search result expects to see something straight away. If the main image or the headline is slow to appear, they go back. That bounce often is not even recorded as a session, because the analytics tag has not loaded yet.

INP matters at decision points, such as filtering a product listing, choosing a size or submitting a form. When the page is slow to react, the user clicks again or assumes something has gone wrong. In a checkout process, that moment of doubt is enough to abandon.

CLS erodes trust. A button that moves just as the user is about to tap it comes across as careless. The same happens with a banner that pushes the form down the page, and both cause errors in the steps where a mistake is most costly.

The most reliable way to understand the impact on a specific business is to measure it with its own data. Recording the Core Web Vitals of each visit in the analytics tool makes it possible to compare the conversion rate of fast sessions with that of slow ones. It is worth segmenting by device and page type, because the causes vary from one template to another. This is the usual starting point in our analytics and CRO projects.

Which pages should you improve first?

Start with the templates that combine high traffic, high commercial value and metrics in the red. In an online shop these are usually product pages and category listings. On a services website, they are campaign landing pages and service pages with a form.

Working by template rather than by URL is what makes the effort pay off. A fix to the product page template improves thousands of pages at once, and Search Console already groups URLs with similar issues.

Listings deserve special attention because they concentrate filters, pagination and product loading. Their performance depends to a large extent on the category architecture of the online shop. On the landing pages of Google Ads and Meta Ads campaigns, every visitor lost to slowness is a click that has already been paid for.

Which improvements to prioritise for each metric

The improvements with the highest return are usually few, and they recur on almost every website. This is the order in which we tackle them in web development projects, from least to most effort.

To improve LCP

• Identify the real LCP element of each template on mobile, which is sometimes the cookie notice rather than the main image.
• Serve the main image in AVIF or WebP, at the right dimensions and with a srcset for each screen size.
• Prioritise its loading with fetchpriority="high" and do not lazy-load it.
• Reduce server response time with full-page caching and a CDN.
• Host fonts on your own domain, limit the number of variants and load them with font-display: swap.

To improve INP

• Audit third-party scripts and remove the ones nobody uses, such as old heatmaps or pixels from finished campaigns.
• Load the rest on demand; the chat, for example, can load when its button is clicked.
• Break up long JavaScript tasks so the browser can respond in between.
• Simplify the DOM on long listings and avoid recalculating the whole page when a filter is applied.

To improve CLS

• Declare width and height, or aspect-ratio, on images, videos and iframes.
• Reserve space for notices, promotional banners and blocks that load later.
• Display the consent notice as an overlay on the content, without pushing it down.
• Adjust fallback fonts so they take up the same space as the final ones.

Common mistakes in speed audits

Working towards the Lighthouse score

A score of 95 on a laptop with a fibre connection says little about the user buying from a mid-range phone with patchy coverage. Google assesses field data. It is common to find websites with a good lab score that fail the assessment in Search Console.

Forgetting the cookie notice

In Europe, the consent notice required by the GDPR appears on each user’s first visit. If it is a large block of text, the browser may treat it as the LCP element. If it is inserted by pushing the content down, it drives up CLS, so it is best to load it early, as an overlay and at a contained size.

Turning the tag manager into a dumping ground

Every tag runs code in the user’s browser. Over the years, duplicate pixels and forgotten testing tools pile up and degrade INP. A periodic review helps, as does moving part of the tracking to the server, as is done with the Meta Conversions API for ecommerce.

Lazy-loading the main image

Many templates and plugins add loading="lazy" to every image by default. On the hero image, the effect is the opposite of what was intended. The browser delays the request until it has calculated the layout, and LCP gets worse.

How do you measure Core Web Vitals with real data?

Real-user data is available in the Core Web Vitals report in Search Console and in PageSpeed Insights, both of which show the 75th percentile of Chrome users. To relate that data to conversion, you also need to record the metrics of each visit in your own analytics tool.

How to implement the improvements step by step

The order of work matters as much as the fixes themselves. A performance improvement project usually follows these phases.

1. Measure the starting point by template and device, using field data.
2. Match those metrics against the traffic and conversion of each template to set priorities.
3. Diagnose in the lab the specific cause of each metric in the red.
4. Apply the fixes in a staging environment and check that they do not break tracking or consent.
5. Release by template and annotate the date of each change in analytics.
6. Monitor how the field data evolves over the following four weeks.
7. Set a performance budget within the development process so that new features do not undo the gains.

Every tenth of a second the offer takes to appear is time the visitor spends deciding whether to stay.

Juan Berges, CEO of The Baller Company

Where to start

The most cost-effective first step is to open the Core Web Vitals report in Search Console, filter by mobile and find the highest-traffic template that fails the assessment. For that template, compare the conversion rate of fast and slow visits before investing in development. If the difference is significant, the first fixes almost always lie in the main image and in third-party scripts.

Frequently asked questions