[FIXED] How to deal with CLS score with div elements? (web vitals)

Issue

I'm running an online store on prestashop. I've already handled all of the necessary adjustments for images and videos and I'm working on minimizing loading time, however I've noticed that a lot of my CLS score comes from the main div containers on my product page

This seems to be the case with all prestashop sites, at least the ones I've tested with PageSpeed Insights. What would be a good way of handling this? Adding aspect-ratio doesn't seem to work plus it obviously breaks everything since the heights of these containers are dynamic. Adding min-height doesn't seem to be doing anything either.

Example product page: https://vipkoszulka.pl/3303-94167-pielegniarka-koszulka-long-z-kieszeniami-medyczna.html

Solution

WebPageTest has a useful Web Vitals diagnostic page where you can see the before/after of individual layout shifts. Two of the most significant shifts are when the breadcrumbs at the top load and push the product image down, and when the product image loads and pushes the rest of the content down:

The product image has a style of height: auto; width: 100%;:

<img id="itzoom-products" class="js-qv-product-cover" src="https://vipkoszulka.pl/10826-large_default/pielegniarka-koszulka-long-z-kieszeniami-medyczna.jpg" alt="" title="" style="width:100%;" itemprop="image">

So the browser doesn't know how much space to reserve for the image until it loads, causing the layout shift. You should set explicit height/width styles for the image so that the area can be reserved before the image loads.

Aside: the product image, which is also your LCP, has an intrinsic size of 1500px by 1300px, despite only appearing as 300px by 286px on mobile. A lot of bytes could be saved—potentially also improving your LCP—by using a smaller image!

Similarly for the breadcrumbs, if they're asynchronously added they should have space reserved by setting a height/width. It will appear blank until loaded, but as far as Web Vitals are concerned it would alleviate the CLS issues.

You can read more about CLS optimizations in this guide: https://web.dev/optimize-cls/

Answered By - Rick Viscomi

Answer Checked By - David Goodson (PHPFixing Volunteer)