Cumulative layout change: what it is and how to measure it

It’s happened to all of us: we try to choose an option on a website, and right before we click the page jumps up and we end up clicking on something we didn’t want. Oh !

Like a game of “down low, too slow”, this website behavior makes us feel slow and frustrated. Fortunately, there is now an incentive for website developers to improve their site experience with the release of Google’s Core Web Vitals; a set of metrics that help site owners measure and improve the user experience of their web pages.

Cumulative Layout Offset is one of those key metrics that measures a website’s “speed” and how it unexpectedly moves as items load. Let’s take a closer look at how this metric works and how you can ensure that your own website follows best practices in order to rank higher in search engines and provide a better experience for your users.

What is cumulative layout offset?

Cumulative Layout Shift (or CLS) is a measure of how much a web page unexpectedly changes during its lifetime. For example, if a website visitor loads a page, and while reading it a banner loads and the page jumps down, that would be a significant CLS score.

With the largest painting of content (the time it takes to load the largest piece of content) and the first entry delay (the time it takes for a page to be interactive or “clickable”), CLS is part of Google Core Web Vitals. Google’s crawlers measure the CLS on every page they index.

What are the causes of cumulative layout shift?

Page changes happen when content loads at different speeds, changes the layout, and changes what the viewer is watching. Slow loading ads, videos of unknown size suddenly appearing, or dynamically added DOM elements are all potential causes of CLS.

The example below shows what happens when a banner ad loads after the rest of the web page loads. The content is pushed down and the user experience is negatively affected.

Source

It can be difficult to know if your users are encountering CLS because not all devices or environments work the same. If you load your website in a development environment, items can be cached or they can be loaded locally. Personalized cookie-based web content will behave differently for each visitor, especially depending on their location. Additionally, mobile users can have a very different experience – a small change on a web browser can be monumental for someone viewing the site on a small screen. The only way to really understand your users’ experience is to measure CLS, which we’ll cover below.

Why is CLS important?

Understanding CLS is essential for two reasons: your visitors’ experience and your search engine rankings.

Your visitors have high expectations when it comes to your site’s performance. In 2020, 93% of people said they left a website because it wasn’t loading properly.

Jittery websites that load in chunks or with unexpected behavior will lead your visitors to find another website to browse. And if they stick around, a high CLS score is likely to cause usability issues, like choosing the wrong option, checking too early, or missing parts of your website.

This problem is only exacerbated by the large number of Internet users who browse on their smartphones. When viewing your site on a small screen, any jumps and layout changes on the website are sure to have a big impact on the mobile user experience.

Optimizing your site and reducing your cumulative layout lag is essential to providing a good customer experience.

Second, Google ranks sites based on the performance of their pages. Better user experience translates to higher search rankings. If your page does not meet the standards set by Google in its Core Web Vitals guidelines, your site will be penalized.

Google doesn’t want to direct people to sites that aren’t performing well. Aligning with CLS best practices can help your website move up in rankings. And since 68% of online experiences start with a search, making sure your site appears on the search results page is important to driving inbound traffic.

How to measure cumulative layout offset?

The good news is, you don’t need to measure CLS yourself, as Google makes it easy to analyze your page performance with its PageSpeed ​​Insights tool or in the Chrome browser using Lighthouse Tools.

To analyze performance in PageSpeed ​​Insights:

  1. Enter a website URL into Google’s PageSpeed ​​Insights tool.

  2. Click on “Analyze”.

  3. Check your performance. You can examine the performance of mobile devices and desktops, which you can switch between 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:

  1. Open the website you want to crawl in Chrome.

  2. Access Developer Tools by clicking on the three dots in the upper right corner of the browser window, choosing “More Tools”, then “Developer Tools”.

  3. When the console opens, choose “Lighthouse” from the options at the top.

  4. Click on “Generate report”.

The page below shows a CLS of 0.109, or “need improvement”.

Lighthouse provides a detailed audit of what contributed to this score. To review the audit, scroll down and choose “View relevant audits for CLS”.

Learn more about impact fraction and distance fraction

Two terms you might see when searching for CLS are “impact fraction” and “distance fraction”. These are the two variables that Google uses to calculate the CLS.

layout offset score = impact fraction x distance fraction

The impact fraction relates to the size of the unstable element relative to the window. The distance fraction is the amount of displacement of the unstable element in proportion to the window.

Thus, 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 occur during a session window. Essentially, if a bunch of changes occur within a five second window, that would be considered disruptive and result in a high CLS score.

What is a good CLS score?

A good cumulative layout score is less than 0.1. Reports from the PageInsights or Lighthouse tools will automatically report any bad scores and provide advice on how to optimize the page for better performance.

Source

How to improve cumulative layout offset

There are a few best practices that website owners can follow to improve their CLS score:

1. Use a CMS (content management system).

Especially the one that integrates with Google Lighthouse or other diagnostic tools. This will ensure that you are designing with best practices in mind and flag any issues before you launch your site.

2. Specify the size attributes for images and videos.

Rather than letting them set their own height and width, dictate the size attributes of your media. By setting these attributes, you tell the browser how much space to reserve, even if the image is not yet loaded.

3. Understand how advertisements can influence your layout.

Google Publisher Tag offers detailed advice on how to reserve space for ads.

Load the new content below the window. Loading content on top of what the user is viewing will often cause a page to move.

4. Use transitions and animations to provide context around the page changes.

For example, a “Read More” link that scrolls the user to the bottom of the page would not impact CLS because it is an expected layout change.

A note on the expected vs unexpected layout change

CLS only takes into account unexpected changes. If the layout changes due to user-initiated action, there is no impact on CLS. It’s a useful tool to use when you don’t need to load everything at once. Instead, give users the option of choosing what items they want displayed through “learn more” links or “expand on topic” accordions within your page.

Provide a better user experience with CLS optimization

Paying attention to CLS not only provides a better user experience, but also improves your search results ranking. It’s a win-win.

To meet Google’s standards for CLS, start by using a diagnostic tool to measure your website’s current performance. Consider the basic guidelines outlined above and keep layout changes in mind when designing your website, especially when it comes to transitions and content additions. With these few simple considerations, you will see better results on all levels.

Originally posted Nov 25, 2021, 7:00:00 AM, updated Nov 25, 2021

Don’t forget to share this post!

Warning

HubSpot Inc. published this content on 25 November 2021 and is solely responsible for the information it contains. Distributed by Public, unedited and unmodified, on 25 November 2021 12:29:03 PM UTC.