If you read the words ‘cumulative layout shift’ and are left feeling baffled, don’t fret! As one of Google’s new ranking factors for 2021, cumulative layout shift (CLS) is a website metric that impacts user experience on a website but is also set to have an effect on SEO. As technical SEO experts, we’re here to help break it down and do all the hard work for you. Learn more about what cumulative layout shift is, what causes it and why it should be incorporated into your SEO strategy:
What is cumulative layout shift?
Cumulative layout shift (CLS) is where elements of a webpage ‘shift’ whilst a page is loading, which can include images, fonts, buttons and so on. CLS has been introduced as one of Google’s new Core Web Vitals to ensure that webpage layouts provide a seamless user experience without any unanticipated interruptions or jumps. If you’ve ever been on a slow website in the past, you might have seen buttons jumping around or fonts changing suddenly as you wait for the page to load – that’s CLS.
As you can probably tell, cumulative layout shift isn’t something you want on your website. That’s why it’s important to know what causes it and how to minimise it to ensure users find and stay on your website.
What causes cumulative layout shift?
According to Google there are a number of factors that could potentially cause cumulative layout shift. These are as follows:
Images without dimensions
Images and videos should always have width and height size attributes so the browser knows how much space to allocate to them whilst the page loads. This means text around the images won’t jump around the page once the image has loaded, causing a smoother user experience. In the past, some developers used CSS to resize images rather than setting fixed width and height attributes. However, using this method means page space would only be taken into account once the image started downloading, causing unwanted jumps.
Ads, embeds and iframes without dimensions
If you have ads running on your site, it’s important to consider how these can impact cumulative layout shift and user experience. If ads have dynamic sizes, this can cause content on the webpage to be pushed further down. Ways to prevent this from happening include reserving static space for the ad slot, which can be done by looking at historical data to assess the most likely size required for the ad slot.
Dynamic content
Dynamic content in the form of an embedded widget, such as a social media post, newsletter pop-up or a YouTube video, can be unpredictable and skew the page load process. Google recommends reserving adequate space in the viewport so page content does not shift upon loading.
Web fonts causing FOUT or FOIT
Cumulative layout shift can be caused when a fallback font is swapped with a new font (FOUT – flash of unstyled text), or when invisible text shows whilst a new font is rendering (FOIT – flash of invisible text). A recommended way of combatting this is using rel=”preload” on your main web fonts. When a font is preloaded, it’s more likely to appear on the first paint which reduces CLS.
How does cumulative layout shift impact SEO?
As a technical SEO agency we know that user experience and SEO have always gone hand in hand, however now even more so that cumulative layout shift is set to become a ranking factor in 2021. If Google perceives your website to have poor CLS, it will now penalise your SEO rankings. If your website takes a long time to load and elements on the page frequently shift, that’s going to detract users from your website.
Cumulative layout shift should be monitored alongside other SEO efforts, which can be done in the Core Web Vitals tab in Google Search Console and when looking at Page Speed Insights. Any mobile or desktop CLS issues will be flagged in Search Console with the affected URLs. When looking at your website in Page Speed Insights, you will find a breakdown of CLS scores across the website which are marked as good, needs improvement or poor. The larger the score, the more cumulative layout shift is present on your website.
When it comes to your SEO strategy in 2021, we highly recommend keeping a watchful eye on CLS and reducing it where possible. If you’re looking for a helping hand, our technical SEO and web development services in Bournemouth include all the essential ingredients for UX and SEO success. Get in touch with our friendly team today by calling 01202 798820 or send an email to hello@upperdog.co.uk.