I Have a store that runs on the supply theme, The collection pages seem to cause a CLS issue in google console, As of this year the page rank is dictated by CLS too so its quite a serious issue. i can see it happening when i reload a collection page, it seems like the div that incapsulated the product list shift from right to left by about 30px when the page loads. Is there any way i can fix this ? https://parmegastore.com/collections/interior-mats
Hello @Parmegastore !
CLS is “Cumulative Layout Shift”. This is a measurement of the visual stability of your page.
Tips to resolve, Google CLS issue
1. 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 (LCP).
2. Try out Image Optimizer or TinyIMG Image Optimizer to “crunch” down your images effectively.
3. 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
Hope this helps!