Branding
Preparing for the 2021 Google update (Part Three): CLS Core Web Vitals
Welcome to the third instalment in our multi-part feature on Google’s 2021 Page Experience update. If you missed our previous article, where we started looking at Web Core Vitals, you can find it right here.
All caught up? Let’s pick up where we left off…
Imagine this: You click on a search result from Google or Bing or your favourite search engine. The page seems to load quickly and you quickly see a link you want to navigate too. You click on it and just as you do so, BAM! The link jumps down the page and you have inadvertently clicked an ad.
You mumble some sort of expletive and jump back to where you were. The advertiser paid for your click (and got nothing positive from it), you’re frustrated with the website, and no one gains anything from the interaction.
This kind of thing is now being penalised by Google for the bad user experience it creates. The whole concept of being user-focused really is what’s driving search engines in today’s world. After all, users are the only leverage that search engines really have. It’s what they’re trading. So it only makes sense that they’d work to keep their users happy.
Checking your site for CLS issues and how to fix them
Cumulative Layout Shift (CLS) is one of the three major Core Web Vitals we started looking at last time, and measures visual stability / instability for ensuring a positive user experience. It’s a fairly straightforward task to check your site for Cumulative Layout Shift issues. Just head over to Google’s Page Speed Insights tool and have it check your site. You may want to check a few different page types, so try out a few URLs where the content differs.
If your CLS is anything above 0.25, then it’s time to get to work, as it essentially means that your page falls outside of Google’s own measurements for acceptable visual stability. You can try the following fixes to resolve the issue:
1. Disable sticky headers
Sticky headers are great for keeping your website’s navigation menu in reach at all times, but they cause on-page content to shift up and down.
2. Disable logo shrinking
If you’ve set your logo to scale down in size while scrolling down the page, then this could also be contributing to your CLS score.
3. Always include size attributes on image and video elements
The same thing goes for your logo image. Lack of image size attributes for the logo is the second most popular cause of CLS issues from my experience. If you’re using WordPress, upon uploading an image WordPress automatically adjusts the size.
4. Never insert content that can appear above existing content
This ensures any layout shifts that occur are expected. For example, the annoying “subscribe now” or general newsletter popups.
5. Disable animations
Opt for transform animations over animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state. Alternatively, stay away from animations altogether if the page does not warrant it.
There are many more potential causes for CLS issues, but we’ve covered the most common issues here. In fact, the vast majority of CLS problems stem from animation effects and image tags not having their dimensions declared. You’ll probably find that once you’ve corrected these, your CLS score drops significantly and users are far less frustrated with your site.
Need help getting found online?
Get in touch to find out more about our digital marketing and SEO services.
