With most of Cloudflare’s speed features enabled (Polish, Auto-Minify, Broli, Mirage, Enhanced HTTP/2 Prioritization) the product images and thumbnails on our WooCommerce pages seem to load late and to cause our layout to shift badly because the images are in a vertical cascade of display:block that then after First Contentful Paint compress down to the 1 or 2 rows of thumbnails you’d expect.
In a plain WooCommerce install, the product’s Featured Content image and thumbnails stay hidden until they all load, then they all become opacity:1 at once. There is no layout shift. The height of the rows of product thumbnails does not shift. But through Cloudflare it looks like all our product images cascade vertically down the page, still opacity:0, until finally JS loads – at which point the images all compress into the 1 or 2 rows of thumbnails you would expect. That is the major layout shift – over maybe 1,500 pixels of height.
This usually would not matter except that Google gives us a poor score for “Cumulative Layout Shift” and inbound links with anchors don’t work right because the page shifts badly after the visitor has already been taken to the anchor.
For example: https://www.forceofnatureclean.com/shop/force-of-nature-starter-kit-gen-2/?disinfect=1
Could Cloudflare be delaying some WooCommerce JS that handles product images? We’re not sure what file to exclude – or honestly even if the Cloudflare is the cause.