adminA shopper taps your product in a search result. If the page takes too long to appear, jumps around while loading, or freezes when they choose a size, there’s a good chance they leave, and they may never come back.
Google measures exactly those moments with Core Web Vitals, and they feed into how it ranks pages. More importantly, they track closely with how much shoppers buy. This guide explains what the metrics mean, how React storefronts can improve them (and how they can hurt them if built carelessly), and a practical checklist for a faster, higher-converting store.
Key takeaways
- Core Web Vitals measure loading (LCP), responsiveness (INP) and visual stability (CLS).
- Fewer than half of mobile websites pass all three, so a fast store still stands out.
- Deloitte found a 0.1-second mobile speed gain lifted retail conversions by 8.4%.
- React shines at responsiveness: instant filters, cart updates and page transitions without full reloads.
- React can also slow a store down if JavaScript bundles grow too large. The build matters as much as the framework.
What Are Core Web Vitals? Google uses three metrics, measured from real visitors’ devices. To pass, at least 75% of page visits should fall in the “good” range for each one.
Metric What it measures Good Poor What shoppers feel
LCP How quickly the main content, 2.5 s or less Over 4 s “Is this page loading?” Largest Contentful usually the hero or product Paint image, appears
INP How quickly the page responds 200 ms or Over 500 “Did my tap work?” Interaction to Next to taps, clicks and key presses less ms
Paint
CLS How much the layout jumps 0.1 or less Over 0.25 “I clicked the wrong Cumulative Layout around while loading button!”
Shift
INP replaced the older First Input Delay metric in March 2024. It looks at every interaction during a visit, not just the first, which makes it especially relevant for interactive shopping pages.
Why Speed Still Matters
48% of mobile websites pass all three Core Web 62% of mobile sites have good LCP, the weakest of Vitals. the three metrics.
Web Almanac 2025 (CrUX, July 2025) Web Almanac 2025 (CrUX, July 2025)
+8.4% retail conversions from a 0.1-second +9.2% more spent by retail shoppers after the same improvement in mobile speed. speed gain.
Deloitte for Google, 2020 Deloitte for Google, 2020
For rankings, Google says Core Web Vitals are used by its ranking systems as part of page experience. To be honest about their weight: relevance and content quality come first, and speed is more of a tie-breaker between similar pages. But in competitive product searches, tie-breakers matter.
For revenue, the effect is more direct. The Deloitte study, run for Google across 37 brand websites and more than 30 million sessions, found that even a tenth of a second made a measurable difference to conversions and order value.
Where React Storefronts Shine
Traditional storefronts reload the entire page for almost every action. A well-built React storefront updates only the part of the page that changes, which helps in several ways:
- Faster interactions (INP): choosing a size, applying a filter or adding to cart updates instantly, without waiting for a new page from the server.
- Smoother navigation: moving from category to product page can happen without a full reload, and pages can be prefetched when a shopper hovers over or scrolls near a link.
- Stable layouts (CLS): components can reserve space for images, prices and reviews, and show skeleton placeholders instead of letting content jump into place.
- Smart loading: code can be split by page or component, so shoppers only download what they need.
- Reusable, consistent UI: product cards, buttons and carts behave the same everywhere, which reduces friction and bugs.
React isn’t automatically fast React can also make a store slower. The most common causes are large JavaScript bundles, rendering everything in the browser so the main content appears late (hurting LCP), slow hydration on budget phones, and too many third-party scripts. Good engineering choices, not the framework name, decide your scores.
The React Storefront Performance Checklist
Render key pages fast Make sure product and category content appears quickly, using server rendering, 1 pre-rendering or caching where possible, so shoppers and search engines see it without waiting for scripts.
Split and lazy-load your code 2 Load only what each page needs. Defer heavy features such as reviews widgets, zoom viewers and recommendation carousels until they’re needed.
Optimise images
3 Use modern formats (WebP or AVIF), correct sizes for each device, high priority for the main product image and lazy loading for images further down the page.
Reserve space for everything 4 Set width and height for images and placeholders for dynamic content to keep CLS near zero.
Keep the JavaScript lean
5 Audit dependencies, remove unused libraries and watch your bundle size with every release.
Tame third-party scripts 6 Chat widgets, trackers and ad tags are frequent INP and LCP problems. Load them later, and remove any you don’t truly need.
Cache and use a CDN 7 Cache pages and API responses on the server, and serve static files from a content delivery network close to your shoppers.
Measure real users 8 Track field data, not just lab tests, and review it after every major change.
Interaction Patterns That Lift Conversions
Speed is the foundation; good interactions turn it into sales. React makes these patterns easier to build:
- Instant filtering and sorting on category pages, without reloading.
- Add to cart without leaving the page, with a slide-out mini cart confirming the item.
- Live variant updates: price, stock and images change immediately when a shopper picks a size or colour.
- Optimistic updates: the interface responds straight away while the server confirms in the background.
- A persistent cart and wishlist that follow the shopper across pages.
- Fast search suggestions that show matching products as the shopper types.
How to Measure Your Store
Tool What it tells you
PageSpeed Insights Real-user Core Web Vitals (when available) plus lab diagnostics for any URL.
Google Search Console The Core Web Vitals report groups your pages into good, needs improvement and poor.
Chrome DevTools / Detailed lab testing to find what slows a specific page.
Lighthouse
Real user monitoring Libraries such as Google’s web-vitals let you collect metrics from your own visitors.
Remember: Google judges your store on field data from real visitors, not on a single lab score. Test on a mid-range Android phone over a mobile connection, since that’s how many of your shoppers browse.
How WentoCart Approaches Storefront Performance
WentoCart pairs a React storefront with a Laravel backend, using modern tooling chosen with speed in mind:
- Vite builds optimised, code-split production bundles and makes development fast.
- Tailwind CSS generates only the styles your pages actually use, keeping CSS small.
- A responsive, mobile-ready storefront with catalog browsing, search, product pages, wishlist and cart.
- Laravel’s caching, queues and database tools help keep server responses quick.
- Open code on your own server, so you can tune hosting, caching and images however your store needs.
As with any platform, your final scores depend on hosting, images and extras you add. Run the WentoCart demo through PageSpeed Insights to see it for yourself.
Frequently Asked Questions
Is React bad for SEO? No. Google can render JavaScript, and many React stores rank well. Problems appear when important content only loads after heavy scripts run, so make sure product information appears quickly.
What PageSpeed score do I need? Focus on passing the three Core Web Vitals with real-user data rather than chasing a perfect lab score. A store that passes all three is already ahead of most mobile websites.
Do I need a headless setup to get these benefits? Not necessarily. A platform with a built-in React storefront gives you many of the same interaction benefits without building and hosting a separate front-end application.
The Bottom Line
Speed is still worth money. A React storefront gives you the tools for instant, app-like shopping, especially on mobile, but only careful engineering turns those tools into great Core Web Vitals. Measure with real-user data, fix the biggest problems first, and keep your store lean as it grows.
Try a modern React storefront. WentoCart combines a React storefront, a Laravel backend and Vite and Tailwind tooling, free and open source. Test the live demo for speed, or download v1.0 today.