WooCommerce 10.6 just dropped a change that developers have been asking for since the Gutenberg era began: WooCommerce product image lazy loading is now enabled by default for the Product Image block. Specifically, every image rendered via this block now carries the loading="lazy" attribute out of the box.
While this is a massive win for initial page load times and mobile performance, any seasoned developer knows that “default” often translates to “I need to fix this for my specific layout.” Furthermore, if you’re lazy loading images that appear above the fold, you’re likely tanking your Largest Contentful Paint (LCP) scores. Consequently, understanding how to control this behavior is crucial for any high-performance store.
Why WooCommerce Product Image Lazy Loading Matters
In previous versions, the Product Image block didn’t natively handle the loading attribute, forcing developers to rely on Core WordPress filters or custom block overrides. This often led to messy workarounds or bloated DOMs. Therefore, this native integration (detailed in PR #62829) streamlines the process significantly.
However, the trap lies in the “one size fits all” approach. Specifically, the first product image on a single product page is almost always above the fold. If that image is lazy-loaded, the browser waits until the layout is calculated before starting the download. In contrast, an eager loaded image starts downloading immediately. This distinction is the difference between a “Green” and “Red” performance report.
Using the woocommerce_product_image_loading_attr Filter
To handle these “gotchas,” WooCommerce 10.6 introduces the woocommerce_product_image_loading_attr filter. This allows you to programmatically decide which images should stay lazy and which should be forced to load eagerly.
For instance, if you want to ensure the main product image (the first one) loads immediately to protect your LCP, you can use the following snippet. We previously discussed similar performance gains in our look at WooCommerce 10.5 performance updates, and 10.6 continues that trend.
/**
* Change loading attribute for specific product images.
*
* @param string $loading_attr Default is 'lazy'.
* @param int $image_id The attachment ID.
* @return string
*/
function bbioon_optimize_product_image_loading( $loading_attr, $image_id ) {
global $product;
// If we're on a single product page and this is the main featured image
if ( is_product() && $product && (int) $product->get_image_id() === (int) $image_id ) {
return 'eager';
}
return $loading_attr;
}
add_filter( 'woocommerce_product_image_loading_attr', 'bbioon_optimize_product_image_loading', 10, 2 );Refining the Strategy
It’s important to note that this filter accepts lazy, eager, and auto. If you return any other value, the browser will fall back to its default behavior. Furthermore, don’t forget your archive pages. If you have a grid where the first two products are always visible on mobile, you might want to use a counter to set those specific IDs to eager as well.
Specifically, over-optimizing by eager-loading everything will bring you right back to the performance bottlenecks we were trying to solve. Therefore, use this filter surgically. I’ve seen sites where “fixing” LCP by eager-loading 20 images actually made the site slower due to bandwidth contention.
Look, if this WooCommerce product image lazy loading stuff is eating up your dev hours or you’re seeing weird layout shifts, let me handle it. I’ve been wrestling with WordPress since the 4.x days, and I know exactly where the bottlenecks hide.
Final Takeaway on WooCommerce 10.6
This update is a step in the right direction for the ecosystem. By making WooCommerce product image lazy loading the default, the Core team is forcing better performance standards on the average store. However, for those of us building custom, high-traffic themes, the new filter is the real headline. Use it to balance “fast” with “correct.”
