Cumulative Layout Shift: What It Is and How to Measure It

Page shifts happen when content loads at different speeds and causes the layout to change and alters what the viewer is looking at. Advertisements loading slowly, videos of unknown size suddenly appearing, or DOM elements being dynamically added are all potential causes of CLS.

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

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

The good news is that you don’t 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 website URL into Google's PageSpeed Insights tool.
• Click 'Analyze.'
• Check your performance. You can review both mobile and desktop performance, which you can switch between using the top left corner navigation.

• Open up the website you want to analyze in Chrome.
• Navigate to Developer Tools by clicking the three dots in the top right corner of the browser window, choosing “More Tools” and then “Developer Tools.”
• When the console opens, choose “Lighthouse” from the options along the top.
• Click “Generate Report.”

These are the two variables that Google uses to calculate CLS in the formula below:

layout shift score = impact fraction x distance fraction

• Impact fraction relates to the size of the unstable element in comparison to the viewport.
• Distance fraction is the amount the unstable element moves as a ratio of 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.

A good cumulative layout score is anything less than 0.1. The reports from PageInsights or Lighthouse tools will automatically flag any poor scores, as well as provide advice on how to optimize the page for better performance.

1. Use a CMS (content management system).

This will make sure that you’re designing with best practices in mind, and flag any issues before you launch your site.

2. Specify size attributes for images and videos.

Rather than letting them set their own height and width, dictate size attributes for your media.

3. Understand how ads can influence your layout.

Google Publisher Tag offers extensive guidance about how to reserve space for ads.

4. Use transitions and animation to provide context around page changes. 

CLS only takes into account unexpected changes. If the layout changes because of a user-initiated action, there is no impact on CLS. This is a helpful tool to use when you don’t need to load everything all at once. Instead, offer users the opportunity to choose which elements they want to view through “read more” links or “expand topic” accordions within your page.

Paying attention to 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 website’s current performance. Take into account the basic guidelines outlined above, and keep layout shifts top of mind when designing your website, especially around transitions and content additions. With these few simple considerations, you’ll see better results across the board.