There’s nothing more maddening than trying to click on a button only to find it’s moved, causing you to accidentally click on something else!
If you’ve ever experienced this while browsing the web, then you’ve had the dubious pleasure of encountering a Cumulative Layout Shift, or CLS.
CLS is one of Google’s Core Web Vitals (yep, those important metrics again) and can really mess with the user experience. Imagine accidentally placing an order, clicking on the wrong button or link, or having the content you’re reading suddenly jump around, making you lose your spot. Frustrating, right?
This constant annoyance is why Google made CLS a key part of their Core Web Vitals.
So, how do you find and fix CLS issues?
In our experience, the biggest culprits for CLS are ads and media loading. Here are two essential tips to combat these annoying shifts:
1️⃣ Set size attributes for images, videos, iframes, and other media on your site. By setting these size attributes, the browser will know exactly how much space to reserve for the media before it loads. This is especially helpful if you use lazy loading to improve performance. Instead of the image loading in and pushing content around, there will be a reserved space for it.
2️⃣ Make sure your ads have placeholders, especially dynamic ones. Even if your ad takes a while to load, the placeholder will be there, preventing any shifts when the ad finally shows up.
But wait, there’s more! CLS can also be caused by things like font loading delays or cookie/informational banners that pop into your content instead of sitting nicely on top.
If you’re dealing with these issues and don’t know where to start, drop us a comment. We’re so confident we can fix your CLS issues that we guarantee it in our plans.
#CoreWebVitals #WordPress #UserExperience