WooCommerce 10.6 turns on WooCommerce product image lazy loading by default for the Product Image block. Every image the block renders now ships with loading="lazy" attached, with nothing to configure on your side.
For initial page load and mobile that is good news. A sensible default is still a default, though, and defaults tend to need adjusting per layout. Lazy loading an image that sits above the fold is the quickest way to wreck your Largest Contentful Paint score. So the part worth learning here is how to override it.
What WooCommerce product image lazy loading changes
Older versions of the block ignored the loading attribute entirely, so you were stuck with Core WordPress filters or a custom block override. Both routes worked, and both left something behind: a pile of workarounds or a heavier DOM. The native handling landed in PR #62829.
The problem with a blanket default is the first product image on a single product page, which is almost always above the fold. Lazy load it and the browser waits for the layout calculation before it even starts the download. An eager image starts downloading right away. On a product page, that gap is often what separates a green performance report from a red one.
Using the woocommerce_product_image_loading_attr filter
WooCommerce 10.6 ships a woocommerce_product_image_loading_attr filter for exactly this. You decide in code which images stay lazy and which load eagerly.
The snippet below forces the main product image, the first one, to load immediately so it stops dragging your LCP down. I covered the previous round of these gains when writing about WooCommerce 10.5 performance updates.
/**
* 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 );Picking which images load eagerly
The filter accepts lazy, eager and auto. Return anything else and the browser falls back to its own default. Archive pages need the same attention: if the first two products in your grid are always visible on mobile, a counter that flips those IDs to eager is worth writing.
Eager-loading everything puts you back where you started. I have watched a site get slower after someone fixed LCP by eager-loading 20 images, because all 20 were fighting over the same bandwidth. Use the filter on the images you can name.
If this is eating your dev hours, or you are chasing odd layout shifts on product pages, I can take it on. I have been wrestling with WordPress since the 4.x days and I know where the bottlenecks tend to sit.
What this means when you upgrade
Making WooCommerce product image lazy loading the default raises the floor for the average store, which is the point of shipping it that way. If you build custom themes for high-traffic shops, the filter matters more to you than the default does, because you are the one who knows which image the visitor sees first.
