Getting a WooCommerce store into the green on Core Web Vitals
The changes that move LCP, INP and CLS on real stores, ranked by impact.
· 2 min read
Most slow WooCommerce stores are slow for the same handful of reasons. Here's the order I tackle them in.
1. Measure field data, not just lab scores
Lighthouse is useful, but Google ranks on field data from CrUX. Start with PageSpeed Insights' "Discover what your real users are experiencing" panel and note which metric is failing on mobile.
2. Fix LCP: the hero image and the server
- Serve the hero image in AVIF or WebP at the right size, with
fetchpriority="high". - Get your TTFB under 600ms with full-page caching for logged-out users and object caching (Redis) for the rest.
// Preload the LCP image on product pages
add_action( 'wp_head', function () {
if ( ! is_product() ) return;
$img = wp_get_attachment_image_url( get_post_thumbnail_id(), 'woocommerce_single' );
printf( '<link rel="preload" as="image" href="%s" fetchpriority="high">', esc_url( $img ) );
}, 1 );3. Fix INP: tame third-party JavaScript
Chat widgets, review carousels and tag managers are usually behind poor INP. Delay non-critical scripts until the user interacts, and remove anything nobody can justify keeping.
4. Fix CLS: reserve space
Set explicit dimensions on images, and give embeds, banners and the cart fragment a fixed-height placeholder.
Don't forget cart fragments
wc-cart-fragments runs an AJAX request on every page load. Since WooCommerce 7.8 it only loads where it's needed. Check that a plugin hasn't turned it back on everywhere.
Done in this order, these steps usually get a store into the green within a sprint.