How can we fix the Google CLS issue on our online stores?

[LB_B]

Google has made it very clear than a poor "CLS" rating will lower you in search starting next year. The components of the poor "CLS" rating appear to be well out of the ability of the average Shopify owner to fix as it involves a lot of coding, excessive DOM size and scripts.

Why is Shopify not aggressively addressing this issue? This is something that affects all stores! Rather than working on the latest and greatest the Shopify team should be focused on helping all their Shopify stores achieve excellent ratings with Google!!!

Google is saying loud and clear: solve these problems or your site will-not rank well next year!

[Mircea_Piturca]

Cumulative Layout Shift (CLS) issues are front-end related. It's your theme code that is causing this. It can be fixed using different techniques but it is something only you as a store owner can do.

Actually one of Shopify latest and greatest can help with this one. The new App Sections will allow APPs to deliver storefront code from server. The current way that APPs are injecting code is via JS/ScriptTag API and this is something that can cause CLS.

[donnamac]

@Mircea_Piturca 

Hi Mircea

When you say the "The new App Sections will allow APPs to deliver storefront code from server. The current way that APPs are injecting code is via JS/ScriptTag API and this is something that can cause CLS."  what does that actually mean?  What new APP Section are you speaking of?  We go to 'APPS' to see our installed ones, does what you say mean that there is a new way that section is going to be administered?  Has it already happened?

If you could give some clarification on that statement, it would be appreciated.  What does a shopkeeper need to do?  Anything? If the 'new' section is coming in the future, what should we look out for to see if there is any additional work we need to do on our end?

Thanks in advance.

[Mircea_Piturca]

Hi @donnamac 

Shopify announced some time ago a new API that will change how sections work and also bring the ability for APPs to seamlessly install custom sections in the online store.

You can read more at https://shopify.dev/tutorials/add-an-app-section-to-your-app

This is great and can also help out with CLS. Currently is an APP is injecting some content in your store, it will have to be via JavaScript. This process happens after the page load and in some cases triggers CLS from the injected content.

The new API will serve this content directly from the server.

You should not do anything at this point until these new APIs go live.

Hope this helps a bit

[donnamac]

@Mircea_Piturca 

Thanks.  Do you have an ETA on when the new API is to be 'live'?

[AronE]

this has become very important as time moves, we need speed! we need a fix for this,

no store can go on without apps so that creates all those issues, 

[dataunbound]

But this would only shift the content if the page does not account for the size of the to-be-rendered section before it loads. Even a good guess would mitigate the CLS.  

[Edwardon]

In google search console we see a large number of CLS issues, content layout shifts.

We've tested extensively across devices, and don't believe there is an actual UX issue, but there is something about our content (it relies heavily on react) that is causing google to detect CLS issues. Is this just a warning, or could it be impacting our search ranking?

[dataunbound]

It is not currently used for your search ranking but Google has announced that CLS be used in 2021.

They test on a simulated Moto G4 so no needs to do extensive tests across the environment.

CLS is also not 100% repeatable as it depends on the order and timing of various payloads on the web page. This is totally a form end issue. 

In my experience, a shift happened when too much of the page loads before some important piece of CSS has downloaded or the size of an image changes once the image is downloaded or some is CSS applied.