Is Cloudflare delaying appearance of images in WooCommerce product pages and causing major layout shift?

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:

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.

I’m on a pretty fast connection an didn’t notice any CLS. The HTML loaded in 1.8 seconds, but everything else loaded super fast. JS and CSS were already in cache, and images were EXPIRED, but still loaded quickly (~250ms).

Thanks sdayman.

These 2 screenshots of this WooCommerce product page might help.

  1. The first shows the page in progress where the thumbnail images remain opacity: 0 but cascade down the page. This is the problem.

  2. The second shows the same page when fully loaded, after that cascade has been rolled up to how WooCommerce wants it to look.

I could only see this layout shift in super slow motion by setting in Google Chrome > Google Developer Tools > Network > Online, where I set the page to load super slow. It helped me see the Layout Shift.

I don’t think anything in your list of options would cause this, but I do see you’re running Rocket Loader. Sometimes that interferes with page performance.

I also see more CLS on mobile than on Desktop.

Have you compared the load with Cloudflare Paused (on Overview page, lower right corner)?

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.