Cumulative Layout Shift (CLS) Issue in Magento 2 Stores

When visiting a website, have you ever experienced a webpage jumping around while loading? A user might be about to click a button, but it moves, and one might accidentally click something else – maybe even an ad. This frustrating issue is called Cumulative Layout Shift (CLS). Learn how to reduce CLS in the article below. 

What is Cumulative Layout Shift?

CLS is a way to measure how stable a webpage is while it loads. It tracks unexpected movements of text, images, or other content that can disrupt the user experience.

Why Does CLS Happen?

Here are the factors which can cause CLS:

1. Images and Videos Without Set Dimensions – If an image or video doesn’t have a specific defined size, the browser doesn’t know how much space it needs to reserve for it, causing content to move when the media starts loading.
2. Web Fonts Loading Late – When a website loads, it may first use just a temporary font. Once the correct font loads, the text may move, leading to CLS.
3. Ads and Embedded Content – Banners, pop-ups, and any embedded content (like social media posts or maps) can cause vivid layout shifts if they load when the page is already displayed.
4. New Design Elements Loading Late – If new buttons or sections appear after the page initially loads, they may force other content to change its position.
5. Responsive Design Adjustments –  If not properly optimized, websites may shift elements when they adjust for different screen sizes.
6. JavaScript and DOM Manipulation – If scripts load late, they can cause noticeable shifts while rearranging elements.

Why Is CLS Important?

CLS issue affects both user experience and website performance:

• Better Accessibility – Users, especially those with disabilities, find it easier to interact with a stable webpage.
• Improved SEO – Google ranks sites with no CLS and hence good user experience higher in search results.
• Increased Ad Performance – Less accidental clicks, which might be caused by CLS, lead to better ad engagement.
• Higher Conversion Rates – A stable page makes users want to stay and complete actions like purchases or sign-ups.

How Is CLS Measured?

CLS is measured using two key values:

1. Impact Fraction – Measures how much of the screen is affected by shifting content.
2. Distance Fraction – Measures how far elements move compared to the screen size.

The formula is:

CLS Score = Impact Fraction × Distance Fraction

A good CLS score is 0.1 or less. A score between 0.1 and 0.25 needs improvement, while anything above 0.25 is considered poor.

Tools to Measure CLS

You can use several tools to check your website’s CLS score:

• Google Lighthouse – Provides a CLS score and improvement suggestions.
• Chrome DevTools – Shows layout shifts in the Performance panel.
• Web Vitals API – Helps developers track CLS programmatically.
• GTmetrix and DebugBear – Third-party tools offering detailed insights.

How to Reduce CLS in Magento 2 Stores

To reduce CLS, follow these best practices:

1. Set Fixed Dimensions for Images and Videos – Always define the width and height attributes for images and videos so that no unexpected shifts occur. Additionally, use aspect-ratio CSS properties if an image is responsive to ensure consistent space allocation.
2. Preload Important Resources – It is important to load fonts, images, and other key elements early to avoid content jumping. Using <link rel=”preload”> for critical resources makes them get fetched quickly.
3. Avoid Adding Content Dynamically – If new elements are to be added after the page load, it is worth reserving space for them beforehand. One should also avoid adding banners or pop-ups that appear suddenly because they can push existing content.
4. Optimize Web Fonts – Use font-display: swap; to keep text visible while fonts load. Another suggestion is to use system fonts to minimize loading times.
5. Lazy-Load Below-the-Fold Content – To prevent unnecessary shifts, images and other elements should be loaded only when they come into view. Implementing loading=”lazy” in <img> tags helps non-essential images load at the right time.
6. Ensure a Responsive and Stable Layout – Use CSS media queries properly to maintain a smooth experience across all devices. It is recommended to avoid sudden layout shifts caused by different breakpoints and test the website on multiple screen sizes.
7. Reserve Space for Ads and Embedded Content – If your Magento 2 store has ads or embedded elements, make sure that space is allocated for them in advance. Instead of letting ads push content down, define fixed containers to keep layouts stable.
8. Reduce JavaScript Execution Time – Heavy JavaScript execution can cause shifts due to delays in content rendering. One has to optimize scripts by deferring non-critical JS and minifying code to improve the efficiency of loading.
9. Use Content Delivery Networks (CDNs) – CDNs enhance content delivery by speeding it up, which reduces loading delays, which in its turn helps minimize layout shifts, especially for global audiences.
10. Test Regularly and Monitor CLS Scores – Use Google PageSpeed Insights or Chrome DevTools to analyze CLS continuously and make necessary improvements when needed.
11. Use third-party Page Speed optimizing extensions, some of which improve all the Page Speed impacting metrics, including CLS. For example, Page Speed module from SwissUpLabs. 

The Page Speed module from SwissUpLabs is designed to enhance the performance of Magento 2 stores by implementing various optimization techniques. These include:

• JavaScript, CSS, HTML minification
• Innovative Js bundling method
• CSS delivery optimization
• Prioritizing visible content
• Catalog images compression
• Automating image optimization via cron jobs
• Lazy loading images technique
• Adding expires headers
• DNS-prefetch
• WebP images support
• Responsive images technique
• HTTP/2 push server preload

  The SwissUpLabs Page Speed module addresses CLS issues through several features:

• CSS Delivery Optimization: By optimizing how CSS is delivered, the module ensures that styles are applied promptly, reducing the chances of layout shifts as the page loads.
  
• Lazy Loading of Images: This technique defers the loading of images until they are about to enter the viewport, minimizing the initial load time and reducing layout shifts caused by late-loading images.
  
• Responsive Images: Serving appropriately sized images based on the user’s device ensures that images fit their containers correctly, preventing layout shifts due to resizing.

By implementing these optimizations, the Page Speed module helps Magento 2 stores achieve better CLS scores, leading to a more stable and user-friendly browsing experience.

Conclusion

Improving CLS is essential for better user experience, SEO, and overall website performance. Magento 2 store owners should continuously monitor Cumulative Layout Shift scores and optimize their sites to prevent unnecessary layout shifts. By following the above-described steps, you can make your website smoother, more reliable, and more engaging for visitors.