Avoid Cumulative Layout Shift

Posted in: Newspaper
Post count: 155

Hi!

I’m facing a problem with both FCP and CLS as seen in this screenshot:
https://paste.pics/BG3C2

Both issues seems to be coming from the Newspaper theme:
– the Largest Contentful Paint is pointed to a td-block
– the Cumulative Layout Shift is coming from the menu in desktop view in my website: https://osaopaulo.org.br

What can I do about it?

Post count: 18283

Hello !

I have investigated this on your side and it appears that the problem is only on the middle grid as you can see here: https://www.screencast.com/t/1VMX0M4vQPsa ; My suggestion is to test and replace the block first, or to remove and re-add it and see if the issue still occurs.

Let me know the result !

Thank you !

Post count: 155

Hi, Vlad!

The problematic block is the one highlighted in this screenshot:
https://paste.pics/BH2WY

I did what you told me (to remove and re-add the block), but got no luck..

About the second issue: “the Cumulative Layout Shift is coming from the menu in desktop view in my website: https://osaopaulo.org.br”. Is there anything to do about it?

Here is a screenshot pointing to the menu.. https://paste.pics/BH2YS

Post count: 35449

Hi,
What you can try for the problem from that block is to use an flex element that has option for width and height and set some fix size normally this should improved the situation -> https://i.imgur.com/l6xP5pd.png also I do not think that 0.007 CLS from menu has a big impact, but I’m agree that is better if it can be remove.
Hope that the coming theme update to solved as many CLS problems.
Thank you!

Post count: 155

Hi, Calin!

I can’t use the Flex Block 1, for that to me accomplish the same design I’d have to put a lot o CSS fixes, and it would be a worse solution for my problem… I am bound to use the Flex Block 2, which doesn’t have the property to fix width and height.

I’ll wait and hope for the next update then…

And yes, 0.007 is not a lot, but is something, and if you add 0.007 here, 0.007 there, 0.01 somewhere else, it gives you a lot.

Right now, my CLS on mobile is 0.377 and and my CLS on desktop is 0.007. The desktop one is fine (not perfect) but the mobile is terrible..

Post count: 155

Also, let me ask again, for this is the third time I ask the same question in the same topic:
About the second issue: “the Cumulative Layout Shift is coming from the menu in desktop view in my website”. Is there anything to do about it?

Is there a solution for the menu issue?

Post count: 18283

Hi,

The CLS metric has been recently added to the way Google analyzes the web pages. Since then, our web developers are constantly seeking for solutions meant to improve the web vitals, including the CLS. At this moment, we have presented you all the possible solutions we could think of. We understand that you would like to achieve a CLS of less than 01 on your pages, as we would also love to achieve this. I’m sorry for any inconvenience, but I’m afraid that now we are not able to provide other solutions for removing the CLS in your menu for the desktop view. Please keep an eye on our future updates.

Thank you so much for your understanding!

Post count: 155

“Recently added” is a subtle way of saying “almost a year ago”, right? Because the new Web Vitals was introduced on April 30, 2020..

But no worries, I’ll keep an eye on the future update, hoping that your devs fix this issue for us.

Thanks for your time!

Viewing 8 posts - 1 through 8 (of 8 total)
The forum ‘Newspaper’ is closed to new topics and replies.