Cumulative Layout Shift (CLS) is a problem whereby your page content shifts around (mainly in the vertical direction) in the first second or so of initial page loading in the browser. CLS is graded on Google PageSpeed Insights because it can look odd to visitors if your site content shifts a lot during load time. This shifting is often due to the lack of Height and Width set on a large image at the top of your page. Without Height and Width on the image, the initial load will be without the image and that area may be vertically smashed until the image finally loads. Adding Height and Width acts as a placeholder to keep content vertically locked in size before the image appears. (If the blank space where your image should be is the same height as your image, then no shift occurs when your image finally loads.)
My TIP shows you ONLY how to fix images. Content other than images can also cause a shift, but that is outside the scope of this TIP. And yes, this fix will keep your images responsive.
10-Step FIX:
- Identify the image causing the shift, usually toward the top of your web page. Reload the page several times in the browser to spot the area that is vertically collapsed until the image loads. (It’s easier to see the problem when reloading your live web page in the browser than it is when reloading your site from a local Blocs preview.)
- While in the LG breakpoint in Blocs, select the image (Slide 1 of a Carousel is fine too).
- Blocs Right sidebar > Custom Attributes > + > Name = width & Value = pixel width (shown under the bottom left or right corner of your image in Blocs – the leftmost number – just the number only with no “px”!)
- Add another Attribute: Name = height & Value = pixel width (shown under the bottom left or right corner of your image in Blocs – the rightmost number – just the number only with no “px”!)
- Right sidebar > Classes > double-click the class assigned to your selected image or create a new Class.
- Dimensions > Width > 100%
- Dimensions > Height > auto
- Click Done to close the Class Editor.
- Page Settings > Code > add the following code but substitute the name of your style, and don’t forget the period to the left of it:
–
<style type="text/css">
.type-the-name-of-your-img-style-here {
aspect-ratio: attr(width) / attr(height);
}
</style>
–
- Export. Upload. Test. Done!
NOTE: The above fix works on multiple images too, but just keep in mind that you only need to worry about images that are located “above the fold” (the very top of your website visible in the browser). For multiple images, you just need to comma-separate the Class names in the code I gave you before, as follows (where img1/2/3 must be changed to be the exact names of your own Classes on the respective images – and don’t forget the periods at left of each class name!):
<style type="text/css">
.img1, .img2, img3 {
aspect-ratio: attr(width) / attr(height);
}
</style>
Again, this tip doesn’t solve all Cumulative Layout Shifts, but it does help to resolve the most likely one to affect your site. It did on my site.
Lastly, you can find much more information and the source of the CSS code I used here.
SUPPLEMENT: If you find some graphics are becoming bigger than they were before you did the 10 steps above, you can usually fix that by adding “Max” pixel Width & Height in one of your existing classes on each image, or you can create a new class to add that. So for example, if your pic shows 443x310 in the bottom left or right corner in LG, you can set your Width Max = 443px and Height Max = 310px. In my own sites, that tends to work well across all breakpoints. If after doing that you still find your page content changing vertically as the graphic loads, you may need to add “Min” pixel data too for the Height and Width, using the same px values you use in the Max fields.
