CLS (Cumulative Layout Shift) issues with X navbar

[calinda]

Hi Themeco,
Thank you for the X Theme, it’s awesome!

I’m having Google Search console errors regarding the CLS. Indeed, the navbar resizes during loading, see screenshots attached.
I couldn’t find any similar issue on the forum. Can you help me solve this?

URL : https://www.sellandsign.com/fr/

Thanks
Best Regards

[alexander]

Hi @calinda,

We’ve had known issues that sound similar to what you’re reporting here and they’ve been addressed in today’s point releases. Can you please update to the latest versions of X and Cornerstone? Let us know if you’re still having any issues afterwards and we’d be happy to investigate further. Thanks!

[calinda]

Hi @alexander,
Thank you for your reply. I just upgraded to the newest versions of X (8.0.6) and Cornerstone (5.0.6):

But after a hard reload I still have the issue.
Please let me know what you think.
Best Regards

[tristup]

Hi @calinda,

I have tested your site in different browsers and didn’t find the issue you mentioned in your previous post. Can you please check it once again by clearing your browser cache or open the website in private/incognito mode of the browser.

Hope that works.
Thanks

[calinda]

Hi @tristup,
Thanks for checking. Indeed I still get the issue. It occurs both on mobile or web versions, but is more visible on mobile.
Here is the Google Chrome Performance Profile. Please check around 2 seconds .

Profile-20201218T135333.json

Best Regards,
Alex.

[kory]

@calinda, thanks for writing in and I’m sorry to hear that you seem to be having some issues. After looking at your site for a bit, I am suspecting that this layout shift issue is being caused by a third party lazyloading script you are using on your site. There are some classes / styles being applied to images as they are loaded in that could affect the layout adversely in this way.

Fortunately, in this release we have included WordPress’ native image lazyloading script, which was added in v5.5 of WordPress (more on that here, if you’d like: https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/).

I would recommend removing any third party lazy loading scripts you have running on your site and using the native implementation instead. I have not encountered any issues with layout shifting on my installations using this native method. Hopefully this helps to point you in the right direction!

[calinda]

@kory : Thanks! I deactivated Smush lazy loading and it solved the issue!

[alexander]

Thanks for confirming! Glad to hear that solved it.