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.  

[larsonreever]

My recommendation is to switch your site to AMP Standard mode, and then work on resolving any AMP compatibility issues that might pop up. Then you should see much better values.

The Core Web Vitals are what Google has determined – through analysis of real-world user behavior – are the most important aspects of good user experience. There are three of them: LCP, FID, and CLS.

CLS  is “Cumulative Layout Shift”. This is a measurement of the visual stability of your page. We’ve all encountered websites where, as elements load, the layout of the page shifts to accommodate them. A lazy-loaded image shifts text down, an ad loading late creates a break in the page, and so on.

Most of the time, a layout shift will merely disrupt the user’s experience by moving the text they’re reading. In some more extreme cases, however, an abrupt shift can move an element the user was about to click on, causing them to click on something they didn’t intend.

Google uses an equation derived from two factors to rate a site: how much of the page is taken up by elements that move, and how far those elements move when they move.  

Tips to resolve, Google CLS issue

Here are some actions you can take.

• Use a Next-Gen Image Format.
• Shopify already supports WebP natively, but you may want to use an app to optimize images you upload so that they’re as small as possible. Small image files mean more compression is available in the WebP conversion, which means faster loading times, and thus faster time to Largest Contentful Paint.
• Try out Image Optimizer or TinyIMG Image Optimizer to “crunch” down your images effectively.
• Rearrange Above the Fold Elements. Part of the measurement of the Largest Contentful Paint is fully rendering everything that appears above the fold on your site. Unfortunately, lazy-loading images tend to slow down the Largest Contentful Paint measurement.
• Optimize Scripts. Remove Preloaders.
• Use CSS Sprites.
• Invest in a CDN and Cache.

[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.