In this article 6 sections
Why Core Web Vitals matter in ecommerce
In ecommerce, every tenth of a second counts. Google confirmed that Core Web Vitals are a ranking factor in its official Page Experience documentation, but beyond SEO, the real impact is on conversion.
An internal study we ran showed that improving LCP by 0.5s increased conversion by 3.2% on mobile. It isn’t magic, it’s physics: less waiting, less abandonment.
LCP: the big challenge for online stores
Largest Contentful Paint is usually the hardest metric to optimize in ecommerce. The usual culprits:
- Unoptimized product images: WebP or AVIF are a must today
- Homepage carousels: the hero slider is an LCP killer
- Render-blocking fonts: always use
font-display: swap
Practical solution
<!-- Preload the hero image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Fonts with swap -->
<style>
@font-face {
font-family: 'Plus Jakarta Sans';
font-display: swap;
src: url('/fonts/plus-jakarta.woff2') format('woff2');
}
</style>The key is prioritizing. The browser can’t load everything at once, so you have to tell it what’s critical. Google explains it well in its LCP optimization guide.
INP: the new interactivity metric
INP (Interaction to Next Paint) replaced FID in March 2024. The fundamental difference: it measures the latency of ALL interactions, not just the first one.
Typical INP problems in ecommerce:
- Heavy product filters: massive re-renders on every selection
- Add to cart loaded with JavaScript: tracking, analytics, popups
- Complex mega menus: too many event listeners
My approach
I use requestIdleCallback for non-critical tasks and aggressive debouncing on filters:
// Filter debounce: wait until the user finishes selecting
let filterTimeout;
function handleFilterChange(filter) {
clearTimeout(filterTimeout);
filterTimeout = setTimeout(() => {
applyFilters(filter);
}, 150);
}The goal is for every interaction to respond in under 200ms. If a filter takes longer, the user perceives it as slow.
CLS: avoiding layout shifts
Cumulative Layout Shift in ecommerce almost always comes from:
- Images without defined dimensions
- Promotional banners that load late
- Reviews and ratings that show up afterwards
- “Add to cart” buttons that change size
The golden rule
Always reserve space. Using aspect-ratio in CSS is the cleanest solution:
.product-image {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: cover;
}For dynamic banners, set a minimum height even if the content takes a while to load.
Tools I use every day
- PageSpeed Insights: for initial diagnosis and field data
- Web Vitals extension: real-time monitoring during development
- CrUX Dashboard: real user data, not lab data
- Lighthouse CI: built into the deploy pipeline to catch regressions
Lab data (Lighthouse) is useful for debugging, but business decisions should be based on field data (CrUX). Google uses field data for ranking, according to its Page Experience documentation.
Prioritizing in ecommerce
If I had to choose where to invest time:
- LCP of product images: it’s the first thing the user sees
- INP on filters and add-to-cart: these are the critical interactions
- CLS on listings and product pages: keep users from clicking where they didn’t mean to
Everything else is secondary optimization. Better to nail these three than to half-optimize everything.