Poor CLS score in page speed insight and Lighthouse

Question

Regarding Core Web details performance, the CLS index has been raised to critical in Google Search Console. I've run a number of tests on page speed insight and Lighthouse and have already improved certain elements (webp images, etc.), but on one of my pages (the product details page, which is called up for 50,000 products), I can't manage to improve the CLS. My CLS is ok on desktop but not on mobile. Here's a screenshot of the HTML element that creates the loading lag. Do you have any idea what I can add to my CSS to reserve the space and stop the lag?

Answer 1

Thanks for providing a link to your page. I ran a Lighthouse test in PageSpeed Insights: https://pagespeed.web.dev/analysis/https-www-bibelotandco-fr-sculpture-en-bois-representant-un-bedouin-sur-son-dromadaire-xxe-l6043-225329/hv34dg0pdd?form_factor=mobile

It's clear from the real-user data that the website as a whole has CLS issues: 75% of user experiences have a layout shift score of at least 0.22, which is way beyond the "good" threshold of 0.1. The test page itself doesn't seem to have enough popularity to have its own real-user data, but I think the results are representative enough.

The Lighthouse audit of your page shows a CLS score of 0.238, which is very close to your 75th percentile origin-level CLS performance. So that tells me that this is either a coincidence, or Lighthouse has reproduced a very common layout shift issue.

The "Avoid large layout shifts" audit detected 9 elements that moved, with the most significant ones being the product details. A major clue is in the filmstrip that shows snapshots the page as it loads.

The page is blank for a few seconds as it loads, then we see the product details, then we see the product image. As the product image slider appears, it pushes the product details down.

Looking at the HTML for the slider, I see it has a class of owl-carousel that is initially set to display: none. Then when the owl-loaded class is applied some time later, the element is set to display: block.

Per MDN, the none value:

Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead.

Changing the hidden/loaded classes to use the visibility property with hidden and visible preserves the space for the slider so that when it's loaded and made visible, the layout doesn't shift.

Answer 2

Thank you very much and I have to say that I'm encountering a very strange phenomenon. In fact, during my tests I had left a class="desktop" (this class doesn't exist in my css) in my img tag like this

img class="desktop" width="670" height="500"
src="https://www.bibelotandco.fr/assets/img/slider_bg.png"
class="img-fluid" alt="slider-bg"
data-magnify-src="https://images.bibelotandco.fr/uploads/images/sculpture-en-bois-representant-un-bedouin-sur-son-dromadaire-xxe-l6043_imgx2000_9875.jpg"

(because I'm displaying a transparent slider) under the image before displaying the picture tag with real image.

With this, I end up with a CLS of 0 in the web vitals chrome extension and scores of 0.02 or 0.03 in lighthouse and as soon as I remove this class I'm back to 0.036 in web vitals and 0.286 in lighthouse. Even if I leave a class="" class empty, I get the right scores and as soon as I remove it, I'm back to the wrong score...I've done the test many times and I always get the same results...so there must be an explanation you may have...for me, the mystery is complete!

with class without class