Google CLS issue

Highlighted
Excursionist
19 0 8

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!

0 Likes
Highlighted
Shopify Partner
1366 24 246

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.

https://sections.design tips, tricks & Shopify sections
1 Like
Highlighted

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

0 Likes
Highlighted
Shopify Partner
1366 24 246

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

 

https://sections.design tips, tricks & Shopify sections
1 Like
Highlighted

@Mircea_Piturca 

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

 

0 Likes
Tourist
7 0 2

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, 

0 Likes
Highlighted

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.
0 Likes