Moderate Cls

[Sheiden]

Hi, Ive always experienced slow cls speeds on my website, I was just wondering what is the cause to this. Can I get some help?

[kazi]

Hello @Sheiden  can you share your store URL?

[oscprofessional]

Hello @Sheiden ,

Certainly! Slow Core Web Vitals, like Cumulative Layout Shift (CLS), can be caused by various factors. Here are some common reasons and potential solutions:

1. Large or Unoptimized Images: Images that are not properly optimized for the web can significantly slow down your website. Consider compressing images or using formats like WebP for better performance.

2. Render-Blocking Resources: CSS and JavaScript files that block rendering can delay the display of content on your website. Minimize and defer these resources where possible to improve loading times.

3. Excessive DOM Size: A large Document Object Model (DOM) can increase CLS, especially if elements shift around as they load. Simplify your DOM structure and avoid dynamically injecting content that causes layout shifts.

4. Ads and Third-Party Scripts: Ads and scripts from third-party providers can introduce unexpected layout changes and slow down your site. Limit the number of third-party scripts and use asynchronous loading to prevent them from blocking rendering.

5. Improper Font Loading: Loading custom fonts asynchronously or using font-display: swap; can prevent layout shifts caused by font loading.

6. Slow Server Response Time: If your server takes too long to respond to requests, it can delay the rendering of your website. Optimize server performance and consider using content delivery networks (CDNs) to improve response times.

7. Cache Policy: Implementing effective caching strategies can reduce the time it takes to load your website for returning visitors.

8. Too Many HTTP Requests: Minimize the number of HTTP requests by combining CSS and JavaScript files, using sprites for icons, and reducing the number of external resources.

9. Poor Hosting Provider: If you're on a shared hosting plan or your server is underpowered, it could be impacting your website's performance. Consider upgrading to a better hosting provider or plan.

10. Browser Compatibility Issues: Your website may perform differently across different browsers. Test your website on multiple browsers and devices to identify and fix any compatibility issues.

Start by analyzing your website using tools like Google PageSpeed Insights or Lighthouse in Chrome DevTools to identify specific areas for improvement. Addressing these issues should help improve your website's CLS and overall performance.

Could you share the URL of your store so that we can identify where the CLS issue is occurring?

[INA_MSWEB]

Hello,

Welcome to the Shopify Community!

I am San From MS Web Designer

I would love to help you with some expert feedback here.

- Kindly Provide your Store URL,
- Also, Mention Which Shopify theme you are using

- How many Apps are you using?

Note: If your store is protected with ‘store Font password,’ please Send it here.

If you have any concerns feel free to ask me!

Regards,
San

[iCart_App]

Hello @Sheiden 

You can try these factors: It might be helpful to you-

1. Reduce layout shifts caused by ads, embeds, and iframes by:
   • Reserving space for ads before loading them.
   • Moving ads out of view until they load.
   • Using placeholders when ads are unavailable.
   • Specifying width and height for images and videos.
2. Avoid inserting new content above existing content to prevent unexpected layout shifts.
3. Prevent invisible web fonts from affecting layout by writing CSS that accounts for space variation.
4. Always specify image and video dimensions to avoid layout changes as they load.