Optimize Cumulative Layout Shift

I changed all images to webp and it improved overall page speed index.

Still I have problems with image size. I would like to add inside html (edit image as HTML) image dimensions.

When I add: width=”640″ height=”360″ in code

example: … wp-content/uploads/2023/03/test.webp” alt=”testing” class=”wp-image-7055″ width=”640″ height=”360″ />

I get error. “Attempt recovery”. After successful recovery image html is again without dimensions. How to fix that?

Hey @whdmiran,

Which block in particular are you doing this with?

Hello @hardeepasrani
I took one block and simplified it, customized it to my needs … I have some experiences with Elementor and I tried to apply similar way of doing.

Hey @whdmiran,

Yes, that’s not how Gutenberg blocks work, you can’t edit the HTML of the blocks else they will break. Instead you can add an HTML block put your HTML there if needed.

Let me know if it makes sense.

Hello @hardeepasrani
I understand. Thank you. Few more things:

1. It would be great if Otter would automatically take dimensions from image (width and height) as they are important for cumulative layout shift.

2. Under image is an option to add alt text, but again, if you look at html it is not placed inside alt=””, but it is created something else (I forgot now how it is called)

3. When you change image dimensions it would be nice to have an option to lock image ratio. If I enter desired height of the image, width is not changed automatically unless I change size of the image with mouse.

Thank you ??

any thoughts about my previous post @hardeepasrani?

I have two web pages, both using Blocksy theme. Structure is similar as one is in English (https://www.energysuccesscoach.com/) and another in Slovene language (https://www.miranpeterman.com/). One I am using Otter plugin and another Elementor and surprisingly Elementor is 5 point better for mobile performance and 16 points better (scored 99) for desktop performance. Higher are Speed Index, Largest Contentful Paint, Cumulative Layout Shift.

I am very much interested how to improve this numbers since I decided to give a try Guttenberg blocks and found Otter, because of online reviews that blocks are faster and performance friendlier than Elementor. Maybe this is a topic for a forum or FB group, but I think Otter doesn’t have them.

Hi @whdmiran!

We checked the CLS score on your site and since you’re mentioned that the score is lower due to the images, you could try to install Optimole to optimize your images. It will improve the performance of the site and may help with the CLS score as well.

I hope this helps!

Hi @whdmiran,

I checked the pages you mentioned in the Google Lighthouse report to see the performance on the Desktop. Since the main difference is made by the images, you can try this plugin, as it should increase the page performance with WordPress editor and the Otter Blocks.

I hope this will help.

Hello @stefancotitosu, @luciamarinescu
Thank you for your answer and trying for help me out. My understanding of CLS is that is problematic if web page changes layout. This happen when images don’t have defined dimensions (in html code), width and height. It means page layout is not predictable. Inside Otter code there are no image dimensions nor it is possible to add them as a code.

Try and replace all the image blocks with html blocks that include image dimensions, and you will see the difference. I tested it.

Optimole will not help me much since I am using .webp images.

I did testing with https://pagespeed.web.dev/.

More about CLS: https://web.dev/cls/

Hi @whdmiran!

Could you please tell us what blocks from Otter are you exactly referring to?

Thanks!