We’ve all been out for it: we try to pick an option on a site, and just before we click, the page jumps off and we end up clicking on something we hadn’t intended. Doh!
As a game of “down low, too slow”, this website behavior makes us feel slow and frustrated. Fortunately, website developers are now encouraged to improve their website experience with the release of Google’s Core Web Vitals; a set of metrics that help website owners measure and improve the user experience of their web pages.
Cumulative layout change is one of those key metrics that measures a site’s ‘leaps and bounds’ and how it moves unexpectedly when elements are loaded. Let’s take a closer look at how this metric works and how you can ensure that your own site follows best practices so that you rank higher on the search engines and give your users a better experience.
What is cumulative layout change?
Cumulative Layout Shift (or CLS) is a measure of how much a web page changes unexpectedly over its lifetime. For example, if a visitor to a site loads a page, and while reading it, a banner loads and the page jumps, it would constitute a high CLS score.
Along with Largest Contentful Paint (the time it takes to load the largest piece of content) and First Input Delay (how long it takes for a page to be interactive or “clickable”), CLS is part of Google’s Core Web Vitals. Google’s crawlers measure CLS on each page they index.
What causes cumulative layout changes?
Page breaks occur when content loads at different speeds and causes the layout to change and change what the viewer is looking at. Slowly loading ads, videos of unknown size that appear suddenly, or DOM elements that are added dynamically are all possible causes of CLS.
The example below shows what happens when an ad banner loads after the rest of the webpage loads. The content is pressed down and the user experience is negatively affected.
It can be difficult to know if your users are experiencing CLS because not all devices or environments work the same way. If you’re loading your site in a development environment, you may have cached items or they may be loading locally. Personal web content based on cookies will behave differently for each visitor, especially depending on their location. Plus, mobile users can have a very different experience – a small shift in a web browser can be monumental for anyone viewing the site on a small screen. The only way to understand your users’ experience is to measure CLS, which we will review below.
Why is CLS important?
Understanding CLS is important for two reasons: your visitors’ experience and your search engine ranking.
Your visitors have high expectations when it comes to the performance of your site. In 2020, 93% of people reported leaving a site because it was not loaded correctly.
Jumpy websites that load in pieces or with unexpected behavior will cause your visitors to find another website to browse. And if they persist, a high CLS score is likely to cause usability issues like choosing the wrong option, checking out too early, or completely missing parts of your site.
This problem is only exacerbated by the large number of Internet users browsing their smartphones. When you see your site on a small screen, any jumps and layout changes on the site will surely have a big impact on the mobile user experience.
Optimizing your site and reducing your cumulative layout change is crucial to giving customers a great experience.
Second, Google ranks sites based on their page performance. A better user experience results in a higher search ranking. If your site does not meet the standards set by Google in its Core Web Vitals guidelines, your site will be penalized.
Google does not want to lead people to sites that are not doing well. Adapting to CLS best practices can help your site move up the rankings. And since 68% of online experiences start with a search, it’s important to ensure that your site appears on the search results page, in order to generate inbound traffic.
How do you measure cumulative layout change?
The good news is that you do not have to measure CLS yourself, because Google makes it really easy to analyze your page performance with their PageSpeed Insights tool or in the Chrome browser using Lighthouse Tools.
To analyze performance in PageSpeed Insights:
- Enter a site URL into Google’s PageSpeed Insights tool.
- Click on ‘Analyze’.
- Check your performance. You can review both mobile and desktop performance, which you can switch between using the navigation in the upper left corner.
The page analyzed below shows a good cumulative layout shift score of 0.001.
To analyze performance using Lighthouse tools:
- Open the site you want to analyze in Chrome.
- Navigate to Developer Tools by clicking on the three dots in the upper right corner of the browser window, select “More Tools” and then “Developer Tools”.
- When the console opens, select “Lighthouse” from the options at the top.
- Click “Generate Report”.
The page below shows a CLS of 0.109, or “needs improvement.”
Lighthouse provides a detailed review of what contributed to this score. To review the audit, scroll down and select “View audits relevant to CLS.”
More about shock fraction and distance fraction
Two terms you may see when examining CLS are “impact fraction” and “distance fraction.” These are the two variables that Google uses to calculate CLS.
layout shift score = power fraction x distance fraction
Impact fraction relates to the size of the unstable element compared to the viewport. Distance fraction is the amount that the unstable element moves relative to the viewport.
So a high CLS would consist of a large element moving a long distance. A small CLS would be the result of a small element moving only a small distance.
CLS is the largest “burst” or group of layout shift scores that occurs during a session window. In essence, if a lot of shifts happen within a five-second window, this will be considered disruptive and result in a high CLS score.
What is a good CLS score?
A good cumulative layout score is anything less than 0.1. The reports from PageInsights or Lighthouse tools will automatically mark any bad results, as well as give advice on how to optimize the page for better performance.
How to improve cumulative layout change
There are a few best practices that website owners can follow to improve their CLS score:
Use a CMS (content management system).
Especially one that integrates with Google Lighthouse or other diagnostic tools. This ensures that you design with best practice in mind, and mark any issues before starting your site.
2. Specify size attributes for photos and videos.
Instead of letting them set their own height and width, dictate size attributes for your media. By setting these attributes, you tell the browser how much space to set aside, even if the image is not yet loaded.
Understand how ads can affect your layout.
The Google Publisher Tag provides comprehensive instructions on how to reserve space for ads.
Load new content under the viewport. Loading content over what the user sees will often cause a page to move.
Use transitions and animation to provide context around page changes.
For example, a “Read more” link scrolling down the page will not affect CLS because it is an expected layout change.
A note on expected vs unexpected layout change
CLS only takes into account unexpected changes. If the layout changes due to a user-initiated action, it does not affect the CLS. This is a useful tool to use when you do not need to load everything at once. Instead, offer users the option to choose which items they want to see through “read more” links or “expand topic” accordions on your page.
Offer a better user experience with CLS optimization
Being aware of CLS not only provides a better user experience, but it also boosts your search result rankings. It’s a win-win.
To meet Google’s standards for CLS, start by using a diagnostic tool to measure your site’s current performance. Take into account the basic guidelines outlined above, and keep layout changes at the top of your mind when designing your website, especially around transitions and content additions. With these few simple considerations, you will see better results across the board.