Default variation image loads late and defeats LCP preload

Hello,

We are seeing an LCP problem on a standard WooCommerce variable product using WoodMart 8.6.4.

Environment:
– WoodMart 8.6.4
– WordPress 7.1.3
– PHP 8.5.11
– max_input_vars 10000
– Cloudflare WordPress plugin 4.14.5 with APO enabled
– WoodMart Preload LCP Image enabled
– WoodMart and LiteSpeed image lazy loading disabled
– Disable native WordPress lazy loading set to Off
– No custom product-gallery template override

The product uses a normal WooCommerce configuration: a featured image, variation-specific images, and complete default product attributes.

Actual behavior:
The server-rendered gallery initially uses Bone-to-be-free-600×1068.png and marks it fetchpriority=high. After variation JavaScript initializes, the primary gallery image changes to 12495446681519561191_v2_2048_custom-1536×1536.jpeg. The replacement image becomes the actual LCP element, but it is discovered and requested late.

The variation image URL exists in the variation data in the HTML, but it is not rendered as the initial primary gallery image. Even with Preload LCP Image enabled, the page produces no an HTML image preload link (rel=preload, as=image) for either image.

Repeated throttled cold-mobile traces produced LCP around 8.7-8.9 seconds. The final image request was discovered roughly 6.5 seconds after navigation.

Verification completed:
– Updated WoodMart to 8.6.4
– Corrected max_input_vars to 10000
– Re-saved the LCP setting afterward
– Purged the exact product URL in Cloudflare
– Tested a freshly generated origin response
– Confirmed the initial image still differs from the image displayed after default-variation initialization

Expected behavior:
For a variable product with complete default attributes and a valid default-variation image, we expect the default variation image to be server-rendered as the initial gallery image, or for WoodMart to preload the image its variation script will immediately display.

Questions:
1. Should WoodMart 8.6.4 server-render the configured default variation image as the initial gallery image?
2. Is this related to the native WooCommerce Variation Gallery support added in WoodMart 8.6?
3. Should Preload LCP Image generate an image preload on single-product pages?
4. Is there an official setting, patch, filter, or supported hook for this behavior?
5. Can it be corrected while preserving variation switching, thumbnails, zoom, responsive srcset, and standard WooCommerce fallback behavior?

We would prefer a theme-level fix or supported hook rather than a product-specific workaround or direct template override.

Hi there,

Thank you for the detailed report and test results.

This is standard WooCommerce behavior. We tested the same setup with a default WordPress theme and the problem happens there too, without WoodMart.

As you can see in this screenshot: https://monosnap.ai/file/RhDqlDHCsGTzpUJ6zWcspRlLUhyhRQ

WooCommerce first loads the main product image. The image of the default variation loads later, after the JavaScript that handles variations has started.

So this comes from how WooCommerce itself works, not from the WoodMart theme.

Kind regards,
XTemos Studio

Thank you. I understand that WooCommerce initializes the default variation image through JavaScript.
After enabling WoodMart’s Preload LCP Image option, purging the product cache, and repeating the same test in three isolated cold mobile sessions, LCP improved from a median of 8.776 seconds to 0.593 seconds. Desktop cold LCP improved from 7.202 seconds to 0.300 seconds.
That appears to confirm that WoodMart’s preload feature successfully mitigates the underlying WooCommerce behavior, so the LCP concern is resolved for now.
The remaining issue is mobile CLS. Three isolated mobile traces consistently measured approximately 0.15. Chrome attributes the main 0.1238 shift to the WoodMart product carousel and summary moving during a non-composited margin-bottom animation.
Could you please advise whether that animation can be disabled or changed to prevent the product gallery and summary from shifting, while preserving variation switching and gallery behavior?

Hi there,

Thanks for the new test results. We’re glad the Preload LCP Image option fixed the LCP problem.

The CLS comes from your product images. The featured image (Bone-to-be-free-600×1068.png) is a tall portrait image, but the default variation image (12495446681519561191_v2_2048_custom-1536×1536.jpeg) is square. When WooCommerce switches to the variation image, the gallery height changes to fit the new image. That pushes the carousel and the content below it, and the browser records it as a layout shift.

The theme can’t prevent this, because the gallery has to adjust to the size of the image it shows. To remove the shift, all images in the product gallery (featured, gallery and variation images) should be the same height. You can do this in one of these ways:

– Crop your existing images to the same aspect ratio.
– Upload new images that all share the same aspect ratio.

Cropping the images or uploading new ones gives the cleanest result. Variation switching, thumbnails and zoom will keep working the same way.

Kind regards,
XTemos Studio

[Author]

Posts