Archived topic
CLS issue on div.summary.entry-summary
7 replies · Started by Marin on November 11, 2020
Hi,
I'm getting CLS issues in Search Console. After I have run test in Chrome Dev Tools I found out those divs are causing problems. May I kindly ask you to have a look?
div.summary.entry-summary
div.woocommerce-product-gallery__image.flex-active-slide
Hi there,
This is the result I see from page speed insight:
https://www.screencast.com/t/G2n6AzC9A
I'm guessing that the product image is being lazy-loaded by WP Rocket.
Can you try to exclude it?
WP Rocket's support team should be able to help if you aren't sure.
It seems that main woo picture and galley pictures are not lazy loaded according to WpRocket support. They gave me next advice:
Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
I'm not quite sure how to achieve this :(
Hi there,
i ran a Pagespeed Insights test on the link you provided, the top two elements were the main product image and the first gallery thumbnail.
This a function of the Wooocommerce plugin not GP.
The Main Image does have Width and Height Attributes, so there is no reason that the lazy loading should not work.
The Thumbnails however do not and again this is something we cannot fix as its the responsibility of Woocommerce. This did prompt me to follow up with woo. You can see my GitHub comment here:
https://github.com/woocommerce/woocommerce/issues/25461#issuecomment-726815087
Thanks for urging WC to take care of this issue. Hope they'll move this issue from low to high priorities soon
You're welcome. Lets Hope!
WP Rocket brings solution to this issue with version 3.8.
Here is excerpt from release notes:
2) Adding Missing Width And Height Attributes On Images
You can now make the most out of width and height attributes on images by merely selecting the new “Add missing image dimensions” option.
⚡ Adding the missing image attributes is the most effective way to improve the Cumulative Layout Shift metric, one of the Core Web Vitals. Does it ring a bell, right?
Wow - thats kinda cool - thanks for sharing!
