How to fix CLS Cumulative Layout Shift Speed - 100% of my pages rank poor

[lflounge]

I am using the Dawn theme and 100% of my product pages fail Google Core Web Vitals miserably because of CLS being on average .72 for the group of 782 pages. I believe this is because I bring in some dynamic info into the product pages, and I also may not have specific width/height set for my images...so knowing that those 2 things are problems, what I DON'T KNOW is how to fix that, particularly to keep it mobile responsive? Obviously mobile is my main concern since that covers 90% of users. Here is an example product page where the CLS is coming in at .70 - https://lflounge.com/products/exclusive-drop-loungefly-disney-100-decades-1920s-mickey-mouse-steambo... - Appreciate any assistance with what code adjustments I can make to improve this!

[flareAI]

Hello @lflounge,

This is Gina from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot.

There are a few ways to improve CLS (Cumulative Layout Shift) on your product pages and address the issues you mentioned:

1. Specify image dimensions
One of the common reasons for layout shift is that the browser doesn't know the size of the images beforehand, so it needs to reflow the page when the image loads. To fix this, you should specify the dimensions (width and height) of your images in your HTML or CSS. In your example page, some images don't have dimensions specified, which could be causing layout shift.

2. Lazy loading
If you have a lot of images or other resources on your product pages, lazy loading can help to improve CLS by delaying the loading of images until they're actually needed. This prevents them from pushing other elements around as they load. There are many lazy loading libraries available that you can use.

3. Minimize DOM size
Large amounts of DOM elements can also contribute to layout shift. You can minimize the size of your DOM by removing unnecessary HTML, CSS, and JavaScript. Use a tool like Google Chrome DevTools to analyze the size of your DOM and identify areas that can be optimized.

4. Optimize CSS
Poorly optimized CSS can also lead to layout shift. Use a tool like Google PageSpeed Insights or Lighthouse to identify opportunities for optimizing your CSS, such as removing unused CSS, reducing the number of external stylesheets, and using CSS preprocessors.

5. Use browser caching and CDN
Using browser caching and a content delivery network (CDN) can help to reduce the loading time of your product pages, which can reduce the chances of layout shift. By caching your resources on the user's device and distributing them across multiple servers, you can improve the loading speed of your pages.

Remember to test your changes thoroughly before implementing them on your live site. You can use Google PageSpeed Insights or Lighthouse to measure your CLS and other Core Web Vitals, and see how your changes are affecting your page performance.

Gina

[rose57]

I'm a merchant who also has a 100% fail rate with Google CLS issues, and both Shopify and our theme developer have been no help. Your list of potential fixes is an enormous amount of work. It seems to me that Shopify and theme developers should be responsible for this issue, not the merchants who are already paying for what should be optimized, working websites. I have no idea where to start with our issues. We tried an app that was supposed to speed up our site and solve CLS issues, and all it did was completely throw off the alignment of all of our pages. It was a Shopify approved app, and it was a disaster.

We have received not one bit of helpful insight from Shopify or the developer of our theme, Providence. We would have to hire an expert developer for potentially thousands of dollars to even diagnose what's going on. Very disappointed in the response to this issue. 

[YogiBa]

Hi Gina,

This is interesting - Use browser caching and CDN
Using browser caching and a content delivery network (CDN) can help to reduce the loading time of your product pages, which can reduce the chances of layout shift. By caching your resources on the user's device and distributing them across multiple servers, you can improve the loading speed of your pages.

I had thought Shopify use a CDN, handle the browser caching etc for their merchants as part of the service, is this not the case?

With regard to Dawn Theme, does this CLS issue reported for Core Vitals on mobile recently Dec 2023, have anything to do with the theme version?

[Maya9]

Have you folks checked to see if there's been any change in your scores since these posts? I came here because I just noticed this issue. In my case my mobile pages are all good at least but for desktop version all are poor and it seems to have started on March 25th (see attached screen shots). What the hey is going on? 

Absolutely agree that fixes should not be on the merchants. Site functionality and optimization were the selling points of this platform and the related theme developers. 

[Yesman415]

I'm having the same experience. Using a theme developed by Out of the Sandbox called Mobilia.

 

[Maya9]

Hi there, were you able to implement a fix to resolve this issue? I'm still having the same problem with the desktop version of my site.

[oreoorbitz]

The cause of the issue is that it seems that the product page content doesn't load right away.

Add a min-width: 100vh; to the page container of the pdp, that'll fix that specific issue of CLS, though there might be other elements causing CLS after you fix your current cause of CLS.

[Maya9]

Thanks for your suggestion. What specific code should we add and where exactly? I'm assuming "pdp" stands for product page but have no idea where to locate the page container or where to insert the code 😞

[oreoorbitz]

It depends on the theme you are using and your specific situation, if you are not familiar with coding enough to do it you would want to hire someone.

[GONZNZ]

Hi Orean, how to contact you as i am unable to find any way to consult you.