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!
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
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.
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.
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.
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.
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 😞
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.
Make the shift from discounts to donations, and witness your business not only thrive fina...By Holly Dec 4, 2023
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023