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!
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.
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.
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
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
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.
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?
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.