How to fix Cumulative Layout Shift (CLS) error

[ae3]

Hi,

How to fix the Cumulative Layout Shift (CLS) error website name is : https://edubaicart.com

Thank you

[oscprofessional · Accepted solution]

@ae3 ,

Hi  ,

I have gone through your store. Your store looks good.

I have checked your site in the page insight chrome tool. your website score is very low.

• Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
• Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
• Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

Cumulative Layout Shift measures the movement of visible elements within the viewport.

Refer this URL.

https://web.dev/optimize-cls/

By fixing these issues, your website speed score can definitely improve.

If anything is missed out or unclear then don't hesitate to ask.  Let us know in details.

Have a nice day !

[ae3]

Thank you

[Giorgia1]

Hey! This is exactly the issue I am having on my site based on Google inspecting traffic. I am not a dev so I am not sure I understand how to fix the problem. I hope you don't mind me asking for clarification: when you say Always include size attributes on your images and video elements do you mean the file name should include the size of he file? And since I am in the process of bulk compressing all my photos, can I fix this in bulk? Is there a Shopify app you reco using for this? One that would help me re-name correctly all the files? Thanks for your help! 🙂

[ae3]

Please Share your website URL!

[ccruz]

Uh, yeah. More on how and ideally not manually(pic by pic).
gabysbags.com

[oscprofessional]

@Giorgia1 ,

Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

You may notice the width and height above do not include units. These "pixel" dimensions would ensure a 640x360 area would be reserved. The image would stretch to fit this space, regardless of whether the true dimensions matched or not.

When Responsive Web Design was introduced, developers began to omit width and height and started using CSS to resize images instead:

img {
 width: 100%; /* or max-width: 100%; */
 height: auto;
}

Shopify Image Element Explicit width and height: 

<img class="lazyload" 

src="data&colon;image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ preview_image.width }}'%20height='{{ preview_image.height }}'></svg>" 

data-src="{{ image_100x  | img_url: '100x' }} 100w" 

data-srcset="{{ image_1200x }} 1200w,

             {{ image_980x }} 980w,

             {{ image_480x }} 480w”

width="{{preview_image.width}}"

height="{{preview_image.height}}" 

alt="{{ preview_image.alt }}">

If your store  images are calling from different file liquid code then It can be difficult to add hight width. If it is coming in loop or in blog, then it is possible to add. I think there is no app for this...

You can give me the store access I will check your issue.  Can you share the store URL.

[Giorgia1]

hello! I think I understand that could be fixed more easily than having to re-name all 1000 files I have right? 🙂

my store is www.decointerni.com

thanks so much for your help!

[Coelho63]

Hi, I reall y need support with CLS     https://lojamanuelcoelho.com/