Cumulative Layout Shift (CLS) issue on Product Pages

Hi, I have tested the storefront URL and my URL again. The content layout shift is happening on both the website and I have proof of that. I created a custom network speed of 100kbps in the developer console to test both the URLs.

Check these two images:
Storefront: https://ibb.co/YQ8SCZm
Astra: https://ibb.co/kDVjDKx

During the Initial load, the second image is placed right after the first image on both themes. The only difference is that In Astra the second image width is small. Because of this, the CLS issue is happening only on the product pages with more than one image. I have verified this in Google Search Console.

Earlier I had a confusion that the second image is actually the gallery slider thumbnails but that’s not the case. The slider is not even loaded in the DOM during these tests.

With the storefront theme, the change is happening fast, because of fewer plugins used and the default theme. All the tests were done with all optimization disabled.

I am attaching a few product URLs, so you can test and provide a solution.
https://expiry.link/0c5vm
https://expiry.link/pcltu
https://expiry.link/9c6dy
https://expiry.link/lxezq

Okay, I actually contacted Astra before creating this thread. The Astra support advised me to contact Woocommerce as the gallery is added by Woocommerce.

The gallery is not properly added during the initial load which results in CLS. I don’t know how I am going to fix it.

Thank you for the help!

Hi @kaushiksomaiya,
Always test using the Developer Console Lighthouse tab. It will give a more detailed report and correct result. In page speed insights, the Image never loads, so CLS is always Zero.

Anyway, I have applied a fix, and It’s not the best, but it worked for me.
To fix this issue, I just used the max-height CSS property and added a custom CSS.

Please remember this works for me and may not work for your theme.
My solution works for websites with Square Images. Inspect the DOM to customize it for your theme.

/*CSS for CLS Start*/
/*For Desktop*/
@media screen and (min-width: 922px) {
	.woocommerce-product-gallery {
	  min-height: 630px;
          max-height: 630px;
 }
}
/*For Mobile*/
@media screen and (max-width: 921px) {
 .woocommerce-product-gallery > .flex-control-nav li {
	height: calc(25vw - 1.5em) !important;
 }
}
@media screen and (max-width: 500px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 56px) + 1em);
 }
}
@media screen and (min-width: 545px) and (max-width: 921px) {
	.woocommerce-product-gallery {
	max-height: calc((25vw - 1.5em) + (100vw - 117px) + 1em);
 }
}
/*CSS for CLS End*/

Code Explanation
For Desktop:
I just added a min-height and max height to fix it. Inspect the DOM to find a perfect min and max height for the image gallery.

For Mobile:
I used only the max-height property.

1. First set the gallery thumbnails size by using height: calc(25vw – 1.5em) !important;
2. (25vw – 1.5ew) returns the height of slider thumbnails on different mobile screen sizes.
3. (100vw – 117px) or (100vw – 56px) return the main image height minus the padding around it.
4. 1em is the bottom margin of the main Image.
5. Inspect the DOM to calculate the total padding around the main Image.
6. Two media queries for mobile because the padding around is different below 500px and between 500px and 921px.

Check this Image for visual representation: https://ibb.co/N2zVF4B
I hope I was able to explain my solution. You can modify this code to make it more simple.