Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) is a member of the new Core Web Vitals released by Google this May. The goal of this metric is to measure visual stability.

More basically:

Does this page jump around?

Notice how this page shifted around while loading? That shift contributes to our CLS score (refresh to see it again). Any shift on the page can contribute to CLS if it causes the start position of an element to change.

How is CLS calculated?

Cumulative Layout Shift can be calculated with a simple formula:

layout shift score

=


impact fraction * distance fraction

The impact fraction is the percentage of the viewport that's impacted by the shift.

The distance fraction is the greatest distance any element has moved divided by the viewport's largest dimension (height or width).

Google has a great example here: https://web.dev/cls/#layout-shift-score

This result should be within the ranges below:

CLS range from Good to Poor. Good is less than .1. Needs Improvement is less than .25. Anything over is Poor.

Which elements impact CLS?

Any element in the viewport that causes a shift in an element's start position can cause your CLS to go up.

This means a few things:

  • Pay attention to all shifts, but especially ones in the initial viewport (AKA above the fold).
  • Ensure all component loading states take up the same amount of space as their final states.
  • Pay extra attention to the output of SSR/SSG output and the page after it's hydrated.

How can I debug CLS issues?

Debugging SSR/SSG output

The difference between your server-side rendered page and your page's final state may be causing a CLS issue.

To debug this, try loading your page with JavaScript disabled. This will allow you to see what's loading during SSR (or SSG) and what's not.

As a rule of thumb, all components should have placeholders during SSR that take up the same amount of space as their finished state.

Finding the shifting elements

If you can't spot elements causing CLS issues by eye, consider using the performance profiling tools built into Chrome.

By checking the box for Enable advanced paint instrumentation, the profiler will mark elements that cause CLS issues as well as the target for your largest contentful paint (LCP).

gif showing the usage of the chrome profiler to spot CLS shift issues

Quick fixes for CLS

  • Use placeholders for elements while they are loading.
  • Be sure your lazily loaded images have a placeholder or height and width specified.
  • Debug the output of your SSR (mentioned above) and try to get it to match the final state as closely as possible.

How can I track my CLS score?

There are currently four ways to track your Web Vitals:

  • Page audits (Lighthouse and PageSpeed Insights)
  • A Chrome extension
  • Google Search Console
  • Manual tracking

Read our guide on tracking your site's vitals.

Your Web Vitals on this page

Cumulative Layout Shift (CLS)
0
UnderUnder .1
Largest Contentful Paint (LCP)
0sec
UnderUnder 2.5 sec
First Input Delay (FID)
0ms
UnderUnder 100 ms
Time to First Byte (TTFB)
0sec
UnderUnder 600 ms

This site is not tracking your personal information.

Learn more at Fathom Analytics.

© 2020 Drew Bredvick. All rights reserved.