Most store owners check their site on a good phone, on office Wi-Fi, after it's already cached. Their customers check it on a mid-range Android phone, on mobile data, from a link in an Instagram ad — cold. Core Web Vitals are Google's way of measuring that second experience, and they affect both search visibility and whether people stay long enough to buy.
The three numbers, in plain words
- LCP (Largest Contentful Paint): how long until the main thing on the page — usually the hero image or headline — is visible. Aim for 2.5 seconds or less.
- INP (Interaction to Next Paint): how quickly the page responds when someone taps something, like a size or “Add to cart”. Aim for 200 milliseconds or less.
- CLS (Cumulative Layout Shift): how much the page jumps around while loading. Aim for 0.1 or less.
Google judges these on real visitors, at the 75th percentile. That means your slowest quarter of customers decide your score, not your average.
How we measure
We look at two kinds of data, because they answer different questions:
- Field data from Google Search Console and PageSpeed Insights tells you what real visitors experience. It is the score that matters, but it updates slowly.
- Lab data from Lighthouse or WebPageTest, run with a mid-range phone profile and a throttled 4G connection, tells you why a page is slow and lets us test fixes immediately.
We always test three templates: the home page, a busy collection page and a product page. Those three carry most of your traffic.
Fixing LCP: make the first screen cheap
On stores, LCP is almost always an image. The usual fixes, in order of impact:
- Size the hero image for phones. A 3000-pixel banner sent to a 400-pixel-wide screen is the most common problem we see. Serve responsive sizes and modern formats like WebP or AVIF.
- Don't lazy-load the first image. Lazy-loading is great below the fold and harmful above it. The hero should load eagerly, with high fetch priority.
- Remove sliders from the first screen. Carousels load several large images and scripts to show one. A single strong image almost always converts as well.
- Load fonts sensibly. Preload the one or two font files you need and use
font-display: swapso text appears immediately.
On a phone over 4G, every kilobyte above the fold is a decision. Spend it on the product, not on a slider.
Fixing INP: do less on every tap
INP problems come from JavaScript doing too much when someone interacts:
- Audit your apps. Each review widget, chat bubble and upsell popup adds scripts that compete for the same phone processor. Remove what you don't use and delay what isn't needed immediately.
- Keep variant selection light. Changing a size shouldn't re-render the whole page.
- Load chat widgets on demand, when someone taps the chat icon, instead of on every page view.
Fixing CLS: reserve the space
Layout shift is the easiest of the three to fix:
- Give every image and video width and height attributes, or an aspect ratio in CSS.
- Reserve space for announcement bars, cookie notices and review stars before they load.
- Avoid inserting banners above content after the page has rendered.
A realistic budget for a product page
| Resource | Budget we aim for |
|---|---|
| Hero / first product image | Under 150 KB, correctly sized |
| Web fonts | Two files, preloaded |
| Third-party scripts before interaction | As few as possible, deferred |
| Total page weight on first view | Kept small enough to feel instant on 4G |
These are targets, not rules — a fashion store with rich imagery will spend more on pictures and less elsewhere. What matters is that someone chose where the bytes go.
Make it a habit, not a project
Speed decays. A new app here, a larger banner there, and six months later the store is slow again. We add a simple check to every launch and retainer: the three key templates are measured monthly, and any new app is tested before it goes live.
If your store feels slow on your own phone over mobile data, it is slower for your customers. We're happy to run the three-template check and tell you, in plain language, what we'd fix first.
Leave a Reply