Title: Optimize Cumulative Layout Shift Last modified: March 27, 2023 --- # Optimize Cumulative Layout Shift * Resolved [whdmiran](https://wordpress.org/support/users/whdmiran/) * (@whdmiran) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/) * Pagespeed Insights suggest to **Optimize Cumulative Layout Shift** for desktop page preview, and first suggestion is to add dimensions to image. When I look at html code for image, there are no image dimensions. But when I add width=” 640″ height=”360″, (edit as html), after being edited, image encounters error. When recovered it is again without dimensions. **Cumulative Layout Shift** is quite good on mobile but not so good at desktop. I am using Blocksy theme and Otter plugin Viewing 10 replies - 1 through 10 (of 10 total) * Thread Starter [whdmiran](https://wordpress.org/support/users/whdmiran/) * (@whdmiran) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16601864) * 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? * Plugin Author [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/) * (@hardeepasrani) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16603456) * Hey [@whdmiran](https://wordpress.org/support/users/whdmiran/), * Which block in particular are you doing this with? * Thread Starter [whdmiran](https://wordpress.org/support/users/whdmiran/) * (@whdmiran) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16604780) * Hello [@hardeepasrani](https://wordpress.org/support/users/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. * ![](https://i0.wp.com/i.ibb.co/C7h44GH/list-view.jpg?ssl=1) * Plugin Author [Hardeep Asrani](https://wordpress.org/support/users/hardeepasrani/) * (@hardeepasrani) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16607422) * Hey [@whdmiran](https://wordpress.org/support/users/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. * Thread Starter [whdmiran](https://wordpress.org/support/users/whdmiran/) * (@whdmiran) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16607453) * Hello [@hardeepasrani](https://wordpress.org/support/users/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 🙂 * Thread Starter [whdmiran](https://wordpress.org/support/users/whdmiran/) * (@whdmiran) * [3 years, 2 months ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16620019) * any thoughts about my previous post [@hardeepasrani](https://wordpress.org/support/users/hardeepasrani/)? I have two web pages, both using Blocksy theme. Structure is similar as one is in English ([https://www.energysuccesscoach.com/](https://www.energysuccesscoach.com/)) and another in Slovene language ([https://www.miranpeterman.com/](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. * [luciamarinescu](https://wordpress.org/support/users/luciamarinescu/) * (@luciamarinescu) * [3 years, 1 month ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16669038) * Hi [@whdmiran](https://wordpress.org/support/users/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](https://wordpress.org/plugins/optimole-wp/) 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! * Plugin Support [Stefan Cotitosu](https://wordpress.org/support/users/stefancotitosu/) * (@stefancotitosu) * [3 years, 1 month ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16670112) * Hi [@whdmiran](https://wordpress.org/support/users/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](https://wordpress.org/plugins/optimole-wp/), as it should increase the page performance with WordPress editor and the Otter Blocks. * I hope this will help. * Thread Starter [whdmiran](https://wordpress.org/support/users/whdmiran/) * (@whdmiran) * [3 years, 1 month ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16671201) * Hello [@stefancotitosu](https://wordpress.org/support/users/stefancotitosu/), [@luciamarinescu](https://wordpress.org/support/users/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/](https://pagespeed.web.dev/). More about CLS: [https://web.dev/cls/](https://web.dev/cls/) * [luciamarinescu](https://wordpress.org/support/users/luciamarinescu/) * (@luciamarinescu) * [3 years, 1 month ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16697932) * Hi [@whdmiran](https://wordpress.org/support/users/whdmiran/)! * Could you please tell us what blocks from Otter are you exactly referring to? * Thanks! Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Optimize Cumulative Layout Shift’ is closed to new replies. * ![](https://ps.w.org/otter-blocks/assets/icon-256x256.gif?rev=3452114) * [Otter Blocks - Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE](https://wordpress.org/plugins/otter-blocks/) * [Frequently Asked Questions](https://wordpress.org/plugins/otter-blocks/#faq) * [Support Threads](https://wordpress.org/support/plugin/otter-blocks/) * [Active Topics](https://wordpress.org/support/plugin/otter-blocks/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/otter-blocks/unresolved/) * [Reviews](https://wordpress.org/support/plugin/otter-blocks/reviews/) ## Tags * [cumulative layout shift](https://wordpress.org/support/topic-tag/cumulative-layout-shift/) * [image dimensions](https://wordpress.org/support/topic-tag/image-dimensions/) * 10 replies * 4 participants * Last reply from: [luciamarinescu](https://wordpress.org/support/users/luciamarinescu/) * Last activity: [3 years, 1 month ago](https://wordpress.org/support/topic/optimize-cumulative-layout-shift/#post-16697932) * Status: resolved