What is Cumulative Layout Shift?
Cumulative Layout Shift (CLS) is one of three Core Web Vitals to be introduced by Google Search in January 2021 as new key ranking factors. Each is designed to assess a separate user experience metric of a website: namely Loading, Interactivity, and Visual Stability. The aim is to provide a more simplified way of quantifying what Google considers to be the most important aspects of user experience. In essence, the Core Web Vitals are meant to help developers, designers, and SEOs concentrate on the very fundamentals of good UX.
Cumulative Layout Shift
CLS measures the layout stability of a webpage, to ensure that user experience runs smoothly and interactions flow as naturally as possible, without any interruptions or unexpected jumps. This is being introduced as a key metric because unstable layouts can lead to negative user experiences on both mobile and desktop, resulting in high bounce rates. Unstable layouts can be caused by new design elements loading later on a page, forcing an unexpected shift in the visual layout and users inadvertently clicking where they didn’t intend to.
Whilst unexpected shifts can be caused by new design elements, expected shifts include animations and transitions, as well as “user-initiated layout shifts” such as typing into a search box or selecting an option on a menu. To ensure these are not considered a part of CLS, Google’s calculations exclude layout shifts that have occurred within 500 ms of user input.
What causes Cumulative Layout Shift?
According to Google, there are 5 reasons why Cumulative Layout Shift happens:
- Images without dimensions
When responsive Web design came about, developers stopped using ‘width’ and ‘height’ dimensions and started using CSS to resize images. The problem with this is that page space could only be allocated once the image had downloaded, meaning there could be a significant layout shift as the image resized to fit the viewport.
- Ad embeds and iframes without dimensions
Ad containers can cause multiple issues for CLS. The size of ad containers influence how much click-through revenue is generated (depending on the device and platform used), but can be sub-optimal for user experience; this is because they can push page content further down. This can happen when an ad container is first inserted into a page, when it’s resized, when the ad tag library loads, and then the ad actually fills the container.
- Dynamically injected content (DIC)
Youtube videos, Google Maps, and portable social media posts are all categorised as dynamically injected content. These embedded widgets can be unpredictable, as they’re not aware of how large the amend will be. A social media post, for instance, could consist of images, videos, and multiple lines of text – and all of these aspects can change over time. As a consequence, platforms providing embeds don’t always reserve enough space on the page, which can cause layout shifts.
[Case Study] SEO storytelling to sell your SEO projects
- Web fonts causing FOUT or FOIT
Downloading fonts can cause layout shifts either when a fallback font is swapped with a new font (FOUT – Flash Of Unstyled Text), or when ‘invisible’ text is shown until a new font is displayed (FOIT – Flash Of Invisible Text).
How can we measure Cumulative Layout Shift?
CLS score is calculated by multiplying the share of the screen that shifted unexpectedly by the distance it travelled. (CLS = Impact Fraction x Distance Fraction) – in terms of the distance fraction, it can be either width or height, whichever is greater.
For website designers and developers, CLS can be measured either with simulated data (‘in the Lab’) or with real user data (‘In the Field’) – which you use depends on whether your site is still in the staging phase or is already live.
Lab tools include:
In-the-field tools include:
- Chrome User Experience Report
- PageSpeed Insights
- Google Search Console (via the Core Web Vitals report)
Cumulative Layout Shift & SEO
Why should SEOs care about CLS?
User experience has long been a key ranking factor for search, but it’s set to become even more so with Google’s introduction of Core Web Vitals. Having said this, CLS shouldn’t be considered the most important of the new metrics. All three vitals are currently used in Lighthouse, which provides a hint about their relative importance to each other:
With a weighted importance of only 5% in Lighthouse, it’s highly unlikely that CLS will be on an equal footing with Largest Contentful Paint (LCP) and First Input Delay (FID), which respectively measure loading performance and interactivity.
This isn’t an excuse to ignore CLS. It’s still considered ‘core’ and will influence keyword rankings once it comes into force in January 2021. SEOs should prepare by running diagnostics on the tools mentioned above, identifying problems, and implementing recommended solutions to achieve good CLS scores for their sites.
The best place to start is in Chrome DevTools – go into the performance panel, and then open up the Experience row. Once here, you’ll find layout shifts categorised by shift score and affected areas.
[Case Study] SEO storytelling to sell your SEO projects
How to fix CLS issues
It depends entirely on which problems you’re facing, but here are some of the most common fixes to a poor CLS score:
- When using custom fonts, make sure to include font-display values (auto, swap, block, fallback, and optional). Alternatively, rel=“preload” can be used to load a font before a DOM tree is constructed and rendered.
- Picture and video elements should have width and height attributes defined using a proportional aspect ratio. Responsive elements need to have the same aspect ratio for each viewport – use aspectratiocalculator.com to work them out.
- Allocate placeholder images to collapsable ad spaces on your webpages. This reserves the space for when the ad loads and avoids layout shift for that element.
- Use a placeholder or skeleton UI to reserve space for a DIC, so that it doesn’t trigger page content to shift once it’s loaded. To avoid this entirely, try to avoid injecting dynamic content above existing content other than when needed for user interaction.
CLS consideration
Whilst CLS isn’t the most important of Google’s Core Web Vitals, it will still be a key ranking feature from early next year. How will this change things? Well, SEOs and designers are likely to be working more closely together from the off, ensuring that page elements don’t cause sudden jumps as they load. With a renewed focus on CLS, they can improve both the UX of their sites and the chance of ranking for keywords.
