We have all encountered this situation: we tried to select an option on the website, just before we clicked, the page jumped, and we ended up clicking on something we didn’t want. Pooh!
This kind of website behavior is like a “lower, too slow” game, which makes us feel slow and frustrated. Fortunately, with the release of Google Core Web Vitals, website developers are now motivated to improve their website experience; a set of indicators that help website owners measure and improve the user experience of their web pages.
Cumulative Layout Shift is one of these key indicators, used to measure the “jumpiness” of a website and how it unexpectedly moves when elements are loaded. Let’s take a closer look at how this metric works and how you can ensure that your website follows best practices to rank higher on search engines and provide a better experience for your users.
What is cumulative layout offset?
Cumulative layout change (or CLS) is a measure of the degree to which a webpage has unexpectedly changed during its life cycle. For example, if a website visitor loads a page and loads a banner while they read it and the page jumps down, this will constitute a large CLS score.
Together with the maximum content drawing (the time required to load the maximum content) and the first input delay (the time required for page interaction or “clickability”), CLS is part of Google’s core Web Vitals. Google’s web crawlers measure CLS on every page they index.
What causes cumulative layout offset?
Page switching occurs when content loads at different speeds and causes the layout to change and change the content that the viewer is viewing. Slow ad loading, sudden appearance of videos of unknown size, or dynamic addition of DOM elements are all potential causes of CLS.
The example below shows what happens when the ad banner is loaded after the rest of the page has been loaded. The content is pushed down, and the user experience is negatively affected.
It is difficult to know if your users are experiencing CLS, because not every device or environment behaves in the same way. If you are loading your website in a development environment, you may already have elements cached, or they may be loading locally. Personalized web content based on cookies will behave differently for each visitor, especially based on their location. In addition, mobile users may have a very different experience-a small change in a web browser can be huge for someone viewing a website on a small screen. The only way to truly understand the user experience is to measure CLS, which we will introduce below.
Why is CLS important?
Understanding CLS is important for two reasons: visitor experience and search engine rankings.
Your visitors have high expectations for the performance of your website. In 2020, 93% of people reported that they left the site because the site loaded incorrectly.
Segmented loading or jumping sites with unexpected behavior can cause your visitors to find another site to browse. If they persist, high CLS scores may cause usability issues, such as choosing the wrong option, checking prematurely, or completely missing parts of the site.
Internet users who use a lot of smartphones to browse will only exacerbate this problem. When viewing your website on a small screen, any jumps and layout changes on the website will definitely have a significant impact on the mobile user experience.
Optimizing your website and reducing cumulative layout changes are critical to providing a good experience for customers.
Second, Google ranks websites based on their page performance. A better user experience will lead to higher search rankings. If your webpage does not meet the standards set by Google in its Core Web Vitals guidelines, your website will be penalized.
Google doesn’t want to direct people to underperforming websites. Being consistent with CLS best practices can help your website rank higher. Since 68% of online experiences start with search, ensuring that your website appears on the search results page is very important to generate inbound traffic.
How do you measure the cumulative layout offset?
The good news is that you don’t have to measure CLS yourself, because Google can very easily use its PageSpeed Insights tool or use the Lighthouse tool to analyze your page performance in the Chrome browser.
To analyze performance in PageSpeed Insights:
- Enter the website URL in Google’s PageSpeed Insights tool.
- Click “Analyze”.
- Check your performance. You can view mobile and desktop performance, and you can switch between the two using the navigation in the upper left corner.
The page analyzed below shows a good cumulative layout offset score of 0.001.
To analyze performance using Lighthouse tools:
- Open the website you want to analyze in Chrome.
- Navigate to developer tools by clicking 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 following page shows a CLS of 0.109, or “Needs Improvement”.
Lighthouse provided a detailed audit of the contribution to this score. To view audits, scroll down and select “Show CLS-related audits.”
More about influence score and distance score
When studying CLS, you may see two terms: “impact score” and “distance score.” These are the two variables Google uses to calculate CLS.
Layout offset score = influence score x distance score
Compared with the viewport, the influence score is related to the size of the unstable element. The distance score is the ratio of the amount of movement of unstable elements to the viewport.
Therefore, a high CLS will contain a large element that moves over a long distance. Small CLS is the result of small elements moving only a short distance.
CLS is the largest “burst” or set of layout offset scores that occur during the session window. Essentially, if a series of transitions occur within a 5-second window, this will be considered destructive and will result in a high CLS score.
What is a good CLS score?
A good cumulative layout score is less than 0.1. Reports from PageInsights or Lighthouse tools will automatically flag any poor scores and provide suggestions on how to optimize the page for better performance.
How to improve the cumulative layout offset
Website owners can follow some best practices to improve their CLS score:
1. Use CMS (Content Management System).
Especially tools integrated with Google Lighthouse or other diagnostic tools. This will ensure that you consider best practices when designing and flag any issues before launching the website.
2. Specify the size attributes of images and videos.
Rather than let them set their own height and width, it is better to specify the size attribute for your media. By setting these properties, you can tell the browser how much space to leave even if the image is not yet loaded.
3. Understand how advertising affects your layout.
Google Publisher Tag provides extensive guidance on how to reserve space for ads.
Load new content below the viewport. Loading content above the content the user is viewing usually causes the page to move.
4. Use transitions and animations to provide context about page changes.
For example, a “read more” link that scrolls the user down the page will not affect CLS because this is an expected layout transition.
A note about expected and unexpected layout shifts
CLS only considers unexpected changes. If the layout changes due to an operation initiated by the user, it will not affect the CLS. This is a useful tool when you don’t need to load everything at once. Instead, give users the opportunity to select the elements they want to view through the “read more” link or the “extended theme” accordion on the page.
Provide a better user experience through CLS optimization
Paying attention to CLS can not only provide a better user experience, but also improve your search result rankings. This is a win-win situation.
To meet Google’s CLS standards, first use a diagnostic tool to measure the current performance of your website. Consider the basic guidelines outlined above and put layout changes first when designing your website, especially in terms of transitions and content additions. Through these simple considerations, you will see overall better results.