WORDPRESS DEVELOPER
THEMES & PLUGINS
WOOCOMMERCE
AVAILABLE FOR FREELANCE & CONTRACTS
NEPAL & REMOTE
← Back to All Articles

Optimizing Core Web Vitals & PageSpeed for Custom WooCommerce Themes

A practical engineering guide to achieving 95+ Google PageSpeed scores on complex WooCommerce stores through asset deferral, speculative prerendering, and optimized database queries.

Optimizing Core Web Vitals & PageSpeed for Custom WooCommerce Themes

The Commerce Performance Dilemma

Speed is direct revenue in e-commerce. A 100-millisecond delay in load time can hurt conversion rates by up to 7%. Yet standard WooCommerce stores frequently suffer from script bloat, unoptimized product archives, and layout shifts caused by external tracking scripts.

When engineering high-volume stores like Kursi Nepal and Annapurna Foods, our target was simple: achieve sub-second initial server response time and maintain a 95+ Google PageSpeed mobile rating across all catalog pages.

1. Eliminating WooCommerce Bloat on Non-Store Pages

By default, WooCommerce enqueues cart fragments, generator tags, and payment gateway scripts on every single page of your site, including pure editorial and landing pages. Deregistering these conditionally provides an immediate performance boost:

<?php
function ferran_conditional_wc_assets() {
    if (function_exists('is_woocommerce') && !is_woocommerce() && !is_cart() && !is_checkout()) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');
        wp_dequeue_script('wc-cart-fragments');
    }
}
add_action('wp_enqueue_scripts', 'ferran_conditional_wc_assets', 99);

2. Stabilizing Cumulative Layout Shift (CLS)

To eliminate CLS, always define explicit width and height attributes on product card image elements, or use modern CSS aspect-ratio: 4 / 3 wrappers with background placeholder skeletons.

3. Modern Speculative Prerendering

Using the native <script type="speculationrules"> HTML API allows browsers to prefetch category archives conservatively when users hover over product categories, creating instantaneous navigation transitions.

← EXPLORE ALL ARTICLES