Cumulative Layout Shift (CLS) Overview
What is Cumulative Layout Shift (CLS)? Has this ever happened to you? You try to click a button or link on a website when all of a sudden the page shifts, and you find you’ve clicked something else entirely! Or...
What is Cumulative Layout Shift (CLS)?
Has this ever happened to you? You try to click a button or link on a website when all of a sudden the page shifts, and you find you’ve clicked something else entirely! Or maybe you’re trying to read an article on your favorite blog when an image finally loads, shifting the text, and you lose your spot!.
Cumulative Layout Shift (or CLS) measures the visual stability of your site, with a low score demonstrating a minimal amount of page shift and a good user experience.
What causes poor CLS?
There are lots of reasons your site might experience these unexpected movements, including:
- Images without dimensions
- Dynamically-injected content — such as ads or video embeds — pushing existing content out of the way
- Late-loading web fonts causing FOUT (flash of unstyled text) or FOIT (flash of invisible text)
How to measure and assess your CLS score
CLS reflects the total of all the little shifts that occur during the lifespan of the page. These shifts are counted any time a page element moves its position, except when in response to user input.
To measure CLS, you can use both field (real world) and lab (simulated experience) tools. You can read more about the different tools, and which to use when, right here.
You want to strive for a CLS score of .1 or less to be classified as “good” by Google. A score above .25 is categorized as “poor”. There is no maximum value for CLS.
Tools to measure CLS
For CLS, here are a few examples of tools you can use to get a sense of your score:
Field tools
Lab tools
Identify which elements are contributing to CLS
There are several different ways to go about detecting layout shifts.
One of the simplest ways to look for CLS issues is to run your page through GTmetrix’s Avoid Large Layout Shifts content audit.
Another great tool is WebPageTest. Under Advanced Settings, select “First View and Repeat View”. Then enter your site’s URL at the top and click “Start Test”.
Next to each test you can click “Filmstrip View” which will show you a collection of screenshot images that show what’s happening on your page.
Under Thumbnail Interval, select “0.1 sec” to get a clear view of how things are loading as your page renders. Then scroll through the images to see where major shifts are happening.
Getting to “Good”: four steps to improve your CLS score
One way to optimize for CLS is to reserve space for every element on the page, so when the elements load, the page doesn’t shift.
- Always include width and height size attributes on all your media (images, videos, infographics, etc.)
- Improve your font loading strategies
- Reserve sufficient space for embeds and iframes
- Avoid inserting new content above existing content (such as banners, newsletter sign-up forms, etc.) unless it loads in response to user interaction
Check out Google’s guide for more details about optimizing CLS on your site.
CafeMedia is helping with ad-related CLS
The bad news — ads can be a contributing factor to poor CLS scores.
The good news — CafeMedia is hard at work to fix ad-related CLS issues on your site.
Our product and engineering team are working through testing now and will be releasing some innovative new solutions soon!