Store speed and Core Web Vitals

A store page has a lot to do: show large product images, prices in the right currency, stock status, reviews, recommendations, a cart, a cookie banner and often a chat button. Every one of those adds weight. Speed is not a technical vanity metric; it is part of the shopping experience, and Google uses Core Web Vitals as one of its page experience signals. This guide explains the three metrics in plain terms, shows how to measure them properly, and gives you a prioritised list of fixes.

The three Core Web Vitals in plain English

Google assesses these at the 75th percentile of real page loads, separately for mobile and desktop. In practice, that means most of your visitors, including those on older phones and slower connections, should get a good experience, not just you on office Wi-Fi.

Why each one matters in a store

• LCP decides whether the shopper sees the product before losing patience. On product pages the LCP element is nearly always the main product photo.
• INP decides whether the variant picker, filters and add-to-cart button feel responsive. A delay after tapping makes people tap again, or leave.
• CLS decides whether people tap the wrong thing. A banner that loads late and pushes the "buy" button down is both annoying and costly.

Measure correctly: field data first, lab data second

There are two kinds of performance data, and you need both.

• Field data comes from real visitors using real devices. Google's Chrome UX Report collects it, and you can see it in Search Console's Core Web Vitals report and in PageSpeed Insights when your site has enough traffic. This is what counts.
• Lab data comes from a simulated test, such as Lighthouse in Chrome DevTools. It is repeatable and shows you why a page is slow, but it is only a model of reality.

A practical routine:

1. Open Search Console and check the Core Web Vitals report for mobile. Note which groups of URLs are flagged.
2. Pick one representative URL from each template: home, category, product, cart.
3. Run each through PageSpeed Insights. Look at the field data section first, then the diagnostics.
4. Open the page on a mid-range phone over mobile data and simply watch it load. You will often spot the problem faster than any tool.
5. After making a change, wait for field data to update, which takes several weeks, and use lab tests in the meantime to confirm the direction.

New stores often have too little traffic for field data. In that case, rely on lab tests with mobile throttling and real-device checks until traffic grows.

Fix images first

Images are the single largest part of most store pages, and they drive LCP. Work through this list:

1. Serve modern formats such as WebP or AVIF, with a fallback where needed.
2. Serve the right size. A phone does not need a 3000-pixel image. Use responsive images with srcset and sizes so the browser picks a suitable file.
3. Do not lazy-load the main image. Lazy loading is great for images further down the page, but the hero or primary product image should load immediately, ideally with a high fetch priority.
4. Always set width and height (or an aspect ratio) on images so the browser reserves space and the layout does not shift.
5. Compress before uploading. Many product photos straight from a camera or supplier are several megabytes. Resize and compress them, or use a platform that does it automatically.
6. Avoid image sliders above the fold where possible. If you use one, make sure only the first slide loads up front.

Tame third-party scripts

Each tracking pixel, chat widget, review badge, pop-up tool and heatmap adds JavaScript that competes for the phone's processor. This is the main cause of poor INP on store pages, and a common reason self-hosted plugin stacks become slow over time.

• List every script your pages load. In Chrome DevTools, the Network tab filtered to JS shows them all with their sizes.
• Remove what you do not use. Old tracking tags from past campaigns are common.
• Load through one tag manager and fire tags only where they are needed, for example a conversion tag only on the order confirmation page.
• Delay non-essential widgets such as chat until the visitor interacts or the page has finished loading.
• Prefer built-in features over separate add-ons. A pop-up, review or loyalty feature built into the platform usually loads less code than a third-party widget doing the same job.

Keep the layout stable

Layout shift comes from content that appears without space reserved for it. The common culprits in stores:

• Announcement bars and cookie banners inserted at the top after the page loads. Reserve their space, or overlay them at the bottom.
• Web fonts that swap in with different sizes. Use font-display settings and fallback fonts with similar metrics.
• Price, stock or currency text that changes after a script runs. Render the correct value on the server where possible.
• Review stars and recommendation carousels that load late. Give their containers a fixed minimum height.
• Images and embeds without dimensions, as mentioned above.

Server response, caching and hosting

Before the browser can draw anything, the server has to respond. Slow server response delays everything else. Check Time to First Byte in PageSpeed Insights; if it is consistently high, look at:

• Hosting quality: shared hosting built for small blogs often struggles with store databases.
• Page caching for anonymous visitors on pages that do not change per user.
• A content delivery network for images, CSS and JavaScript, so files come from a server near the visitor.
• Database load: heavy plugins running complex queries on every page view.
• HTTP/2 or HTTP/3 and compression, which most modern hosting supports.

On a hosted platform, much of this is handled for you, but it is still worth checking. Ask how pages are cached and whether images are optimised automatically.

A prioritised checklist for your store

If you only have one afternoon, do these in order:

1. Check Search Console for which page templates are flagged on mobile.
2. On the product page template, make sure the main image is not lazy-loaded, is properly sized, and has dimensions.
3. Remove unused tracking scripts and delay chat widgets.
4. Reserve space for banners, announcement bars and review widgets.
5. Compress your ten most visited product and category images.
6. Re-test with PageSpeed Insights and on a real phone.

Speed also supports search visibility in other ways: fast, stable pages are easier for crawlers to process, and clean HTML with structured data helps both search engines and AI answer engines understand your products. Origela's storefront themes are built with this in mind: structured data, a generated sitemap and per-language hreflang come as standard, and marketing features such as pop-ups and loyalty are built in rather than loaded from separate vendors. You can see what is included on the features page and compare the designs on the themes page.

For the bigger picture of what slows stores down over time, our article on the true cost of running an online store covers how add-ons affect both your budget and your page weight. If you are just getting started, read how to start an online store first.