In our final week of looking at Core Web Vitals, we’re going to talk about Cumulative Layout Shift, or CLS for short.
Used by Google, this metric measures the visual stability of a page. It calculates how often users experience layout shifts, whenever elements move from their position on a page. The lower the CLS, the more stable the website experience is for users.
You may often see sudden layout movements when on a website. Reasons for this can include resources being loaded at different times, or elements being dynamically added above existing content. The culprits for layout shifts often include images with unknown dimensions or third-party code that resizes itself.
It can be tricky to pin down CLS related issues, as they can be personalised. One third-party piece of content may work for one person and not display for someone else – it depends on a number of factors, including the browser that’s used, the cookies on the machine and even the device used.
Google calculates the layout shift score by looking at the window and records any movement of elements between frames. There are two parts that make up the layout shift score: the distance fraction and the impact fraction. Both of these metrics make up the final CLS calculation.
A good way to think of impact fraction is by thinking ‘how much of my display has been affected by the element moving?’. For instance, if an image on a mobile site loads at the top of the page, then jolts down to the centre, you can say that the element’s visible area has taken 75% of the viewport total – 50% for the image then 25% for its shift. The impact fraction in this instance would amount to 0.75.
Distance fraction is a metric of CLS that measures the furthest distance an unreliable element has shifted in the window. To calculate this as a fraction, this distance is divided by the largest dimension of the viewport.
To provide good user experience, sites should have a CLS score of less than 0.1. A site between 0.1 and 0.25 should seek improvement, while a CLS score above 0.25 is considered poor for search engine optimisation (SEO).
Above is an example of how a web asset may look on a mobile phone. In this case, the viewport’s largest dimension is height. The unstable element has shifted by 33% of the height, indicated with the purple arrow. This makes the distance fraction 0.33.
The impact fraction, however, is indicated with the dotted rectangle box. The impact fraction here is larger than the distance the element has moved, as it has affected the whole rectangle of the display.
In this example, the impact fraction comes to 0.66 and the distance fraction is 0.33, so the layout shift score is 0.66 multiplied by 0.33, which comes to 0.2178. This would, therefore, fall under the ‘Needs Improvement’ category of Google’s CLS calculation.
The above image shows an example of where CLS has a large impact on user experience. The “Buy now!” button pushes the dark box down, so now some of its content is off the screen. Although the white box changes in size, its starting position doesn’t, so it’s not classified as an unstable element.
The “Buy Now!” button also isn’t classified as an unstable element, as it wasn’t in the first load. Technically, its starting position hasn’t changed either. However, the starting position of the dark box is classified as unstable. Its starting position has shifted from one frame to the other, as indicated with the rectangle. It shows that half of the viewport, 50%, has been affected by unstable elements. Converting percentages to decimals, the impact fraction is 0.5 for this example.
Indicated with the blue arrow, the distance fraction shows the dark box has shifted down approximately 15%, or by 0.15.
The CLS score is found by multiplying 0.5 and 0.15, resulting in a score of 0.075. This website would fall under the ‘good’ definition of CLS.
To clarify, a layout shift in respect to CLS is only bad if the user wasn’t expecting it. Sometimes, layout shifts can happen because of interactions. As such, layout shifts that occur within half a second of user input will be excluded from calculations with a ‘hadRecentInput’ flag assigned.
Ways to improve CLS
Improving CLS is a tricky task, as outlined earlier. Different users may experience different layout shifts – particularly if a website has gone from a development environment to live. But there are some best practices to follow that help ensure your site stays aligned with Google’s vision for the future of the web.
- Always include the size attributes on media elements or reserve the required space with CSS aspect ratio boxes. This ensures that the browsers allocate the right amount of space while media is loading.
- Ensure that content is never added above existing content – unless in response to user interaction.
- Avoid using animations that trigger layout changes. Instead, use transform animations to provide continuity from one state to another.
As we wrap up our blogs on Core Web Vitals, there are a few tools that are recommended to help with improving scores. Google offers an array of utilities and reports to help dive deeper into what your website needs to do better from this technical point of view.
PageSpeed Insights analyses the content of a page to generate metrics and suggestions for you to make it faster. You can look into the data and opportunities that Google has found for your website to see what’s holding your website back.
Google Search Console Report measures search performance, allowing you to fix issues when they arise. In the Core Web Vitals subsection, you’ll see the difference between mobile performance and desktop. By using data from the Chrome UX Report (real-world user data), you’ll see personalised reports into which pages have Core Web Vitals issues.
Combining PageSpeed Insights with Google Search Console reports, you’ll have hands-on data to work with and optimise your site with a user-centric focus. Google will be making Core Web Vitals part of their ranking algorithm in May 2021, so make these changes before it’s too late.
- What videos should you post on your website? - February 17, 2021
- Google Core Web Vitals: What is Cumulative Layout Shift (CLS)? - February 10, 2021
- Google Core Web Vitals: What is First Input Delay (FID)? - February 3, 2021