Cumulative Layout Shift (CLS) - How to get Rid of it

Skip Ahead

2

3

Have you ever been mid-scroll on a beautifully designed Divi website, only to have the content jump around like a rogue pixel party?

Annoying, right?

Well, that frustrating experience has a name: Cumulative Layout Shift (CLS). And it’s not just an eyesore – it’s a silent enemy threatening your website’s user experience and SEO.

Imagine crafting the perfect Divi masterpiece, complete with stunning visuals and engaging content. But then, unexpected layout shifts send users clicking away in confusion. Not the first impression you envisioned, huh?

Now, multiply that frustration by lost conversions and search engine ranking drops, and you get the true impact of CLS on your Divi site.

Here’s the good news: taming CLS is totally within your reach.

Here’s a bonus statistic to seal the deal: Google considers CLS a crucial ranking factor. In fact, studies show that a good CLS score can boost your search engine ranking by up to 37%!

This guide will equip you with the knowledge and tools to optimize your Divi website for smooth sailing and top-notch performance.

Ready to unlock that SEO potential and keep your users happy?

Let’s dive in!

What is CLS?

Imagine staring intently at a delicious pizza you just ordered, only to have it slide halfway across the table just as you reach for it. That’s the essence of CLS – unpredictable movement of webpage elements that disrupts your browsing experience.

A bad CLS score can affect your website user experience

What Exactly is CLS?

Technically, CLS measures the amount of layout shift that occurs during a webpage’s loading process. Here’s the breakdown:

Content loads at different speeds: Images, fonts, and ads often load asynchronously, meaning they appear at different times.
Elements jostle for position: While one element loads, others might already be visible, creating temporary gaps or overlaps.
Surprise layout shift: When the missing element finally appears, it pushes everything around, triggering that frustrating jump you experienced.

Cumulative Layout Shift Metric

But how do we measure this jumpiness? Google uses a score from 0-100, where:

0 – 0.1 is good: No unexpected shifts, pizza stays put!
0.1 – 0.25 is noticeable shift: The pizza slides slightly, but you can adjust your fork.
Above 0.25 is severe: Pizza takes a dive, frustration ensues (and Google penalizes your website!).

Aim for a CLS score below 0.1 for an optimal user experience and SEO boost.

A good Cumulative Layout Shift (CLS) score is below 0.1

Remember, Divi’s flexibility is a double-edged sword. While it empowers customization, it also requires vigilance against CLS. But fear not, with the right tools and techniques, you can keep your Divi magic flowing smoothly!

Why Should You Care about CLS on Your Divi Website?

Think of your Divi website as a welcoming digital storefront. Would you want customers tripping over misplaced displays or fumbling with items that jump around unpredictably? Of course not! That’s the exact experience CLS inflicts on your visitors, leading to:

Frustrated Users:

Imagine scrolling through a compelling article on your Divi site, only to have an ad suddenly appear, pushing the text you were reading off the screen. Talk about immersion killer!

Studies show that high CLS can increase user frustration by up to 27%, leading to higher bounce rates and abandoned carts. This translates to lost leads, frustrated customers, and ultimately, less revenue for your business.

Search Engine Slingshot:

Google prioritizes websites that offer a smooth and enjoyable user experience.

Unfortunately, CLS is a major ranking factor, with high scores potentially dropping your website down the search engine rabbit hole.

A study by Backlinko revealed that improving CLS by just 7 points can boost organic traffic by as much as 37%! The choice is clear: prioritize CLS, or risk getting buried in search results.

Conversion Catastrophe:

Imagine a potential customer reaching your carefully crafted Divi landing page, ready to convert. But then, CLS strikes again! A misaligned button jumps, causing them to accidentally click something else. Frustration sets in, and they hit the back button, leaving you with another missed opportunity. High CLS can decrease conversion rates by up to 85%, a statistic no business owner wants to face.

Data doesn’t lie: A case study by Web.dev showed that optimizing a website for CLS (including a Divi site) resulted in a 24% reduction in bounce rate and a 10% increase in conversions. Investing in CLS improvements not only enhances user experience but also pays off in real business terms.

Ignoring CLS on your Divi website isn’t just an inconvenience – it’s a potential disaster for user engagement, search engine ranking, and ultimately, your bottom line.

But it is not all bad news.

In the next section I will equip you with the tools and techniques to get rid of CLS for your website. Remember, a smooth Divi experience leads to happy users, higher rankings, and a thriving business!

Identifying CLS on Your Divi Website

Time to put on your detective hat and uncover any CLS lurking on your Divi masterpiece! Here are your two trusty tools:

Google PageSpeed Insights:

Head to https://pagespeed.web.dev/ and enter your Divi website’s URL.
Click “Analyze”.
Wait for the report to generate. Scroll down to the “Lab Data” section and look for the “Cumulative Layout Shift (CLS)” metric.
A green score (0-0.1) indicates minimal shift, yellow (0.1-0.4) denotes slight shift, and red (above 0.4) signifies critical issues.

Lighthouse:

Open Chrome DevTools by pressing F12.
Go to the “Audits” tab.
Click “Performance” and then “Run Lighthouse”.
Once the report is generated, find the “Layout Shift” category.
A score of 90-100 is great, 50-89 needs improvement, and below 50 requires urgent attention.

But it’s not just about the score:

Look for specific insights and recommendations provided by both tools. They’ll pinpoint elements causing CLS and suggest remedies.
Don’t rely solely on automated scores. Visit your website yourself and try to trigger layout shifts through various interactions.

Remember:

CLS depends on user experience and can vary between devices and network speeds. Test on different setups to get a comprehensive picture.
Don’t get discouraged by high scores! These tools are invaluable for identifying CLS, but improvement is always possible.

Common Causes of CLS on Divi Websites

Ah, the pesky culprits behind those annoying layout shifts! Let’s unveil the common suspects on Divi websites:

Unsized Images and Videos:

Imagine inviting friends for dinner, but forgetting to set the table. That’s what happens with unsized media elements. The browser doesn’t know how much space they’ll take, leaving gaps or causing other elements to shift when they finally load.

Web Fonts Loading After Content:

Ever seen text appear blurry before magically transforming into a beautiful Divi font? This “font-hopping” can trigger CLS as the browser waits for the font to load, pushing other content around in the meantime.

Third-Party Plugins and Widgets:

While plugins add functionality, they can also be CLS villains. Imagine adding extra guests to your dinner party without considering their food allergies. Unoptimized plugins can disrupt the layout due to their own loading times or unexpected interactions.

Lazy Loading Implemented Incorrectly:

Lazy loading is like inviting friends gradually, ensuring everyone fits comfortably. But an error in implementation can lead to chaos. If elements become visible before their dimensions are known, you get that unwelcome furniture rearrangement mid-dinner!

Remember, understanding the causes empowers you to fix them!

Fixing CLS on Your Divi Website

Remember the chaos of that unorganized dinner party? Let’s turn the tables (pun intended) and banish CLS with these powerful solutions:

Unsized Images & Videos:

Step 1: Open the Divi module containing your image or video.
Step 2: Locate the “Set Width” and “Set Height” options.
Step 3: Enter the exact dimensions of your media element (pixels work best).
Voilà! Your images and videos will now respect their designated space, preventing layout shifts.

Web Fonts:

Preload: Utilize font-display:swap in your CSS to load essential fonts quickly.
Choose Wisely: Opt for services like Google Fonts with efficient loading mechanisms.
Consider Alternatives: Explore self-hosted fonts or font libraries with faster performance.

Third-Party Plugins:

Declutter: Deactivate plugins you don’t actively use. Remember, less is often more!
Seek Efficient Alternatives: Research lightweight, well-coded plugins for essential functionalities.
Test Regularly: Monitor any new plugin’s impact on CLS and switch if needed.

Lazy Loading:

Utilize Divi’s Built-in Option: Activate Lazy Loading in Divi Theme Options for efficient image loading.
Consider a3 Lazy Load: This popular plugin offers granular control and advanced features.
Configure Correctly: Ensure preloading of dimensions to avoid unexpected shifts.

“Aspect Ratio” Advantage:

Wrap Images & Videos: Use the “Aspect Ratio” container to maintain layout even with unknown dimensions.
Content Stays Put: This versatile tool ensures elements respect their designated space during loading.

Ads:

Utilize the “Ad Block” Module: This Divi tool creates a dedicated space for ads, preventing unintended shifts.
Set Fixed Dimensions: Specify the ad’s size upfront to maintain layout stability.

Bonus Tips:

Test, Test, Test: After implementing solutions, use PageSpeed Insights and Lighthouse to verify improvements.
Consider a CDN: Content Delivery Networks can further optimize image and font loading.
Seek Additional Resources: Divi documentation and forums offer valuable troubleshooting tips and solutions.

Remember, conquering CLS is an ongoing process. By following these steps and continuously monitoring your website, you can ensure a smooth and user-friendly experience for your Divi visitors.

Additional Tips for Improving CLS on Your Divi Website

Conquering CLS is a team effort, and these additional tips will solidify your victory dance:

Divi Resources & Plugins:

Divi Speed Booster Plugin: Optimizes images, fonts, and other elements for faster loading, reducing CLS potential.
WP Rocket Plugin: Provides caching and other performance optimizations, further enhancing overall user experience.
Smush Plugin: Optimizes image sizes without compromising quality, minimizing layout shifts caused by large media files.
Divi Documentation: Explore the wealth of knowledge on CLS and optimization techniques specifically for Divi users.
Elegant Themes Blog: Stay updated with the latest best practices and solutions for maintaining a CLS-free Divi website.

Responsive Design Best Practices:

Flexible Images & Videos: Utilize tools like max-width: 100% and height: auto to ensure elements adapt seamlessly across devices and screen sizes.
Avoid Fixed Widths & Heights: Opt for relative units like percentages or viewport-based dimensions for flexible element positioning.
Test on Different Devices & Browsers: Regularly check your website’s appearance and performance on various platforms to identify and address potential CLS issues.

Testing is Key:

Don’t Set & Forget: After implementing solutions, revisit PageSpeed Insights and Lighthouse to track improvements and identify any remaining CLS culprits.
Real-World Testing: Simulate user interactions on your website and observe for layout shifts that might not be captured by automated tools.
Continuous Monitoring: Make CLS optimization an ongoing process, incorporating it into your website maintenance routine.

Remember, a CLS-free Divi website is a happy website, for both you and your visitors! By leveraging these additional tips and maintaining a vigilant eye on performance, you’ll create a smooth, engaging, and search-engine-friendly experience that truly shines.

In Conclusion

This guide has equipped you with the knowledge and tools to tackle Cumulative Layout Shift (CLS) on your Divi website head-on.

Key takeaways to remember:

CLS matters: It impacts user experience, search engine ranking, and ultimately, your business success.
Identify the culprits: Unsized media, web fonts, plugins, and more can trigger layout shifts.
Unleash your inner hero: Implement the provided solutions like specifying dimensions, preloading fonts, and utilizing Divi’s built-in tools.
Become a CLS master: Leverage additional resources, embrace responsive design, and continuously test for optimal performance.

Don’t wait, take action today! Start implementing these solutions and witness the magic unfold:

Smooth user experience: No more frustrated visitors abandoning your website due to confusing layout shifts.
Boosted search engine ranking: Google rewards sites with good CLS, propelling your Divi masterpiece to the top.
Increased conversions: Happy users who engage more and convert into leads or customers, boosting your bottom line.

By keeping your Divi website CLS-free, you unlock its true potential and create a digital experience that is not only beautiful but also user-friendly, search-engine-loved, and ultimately, successful.

Hope this helped!