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 for your readers.
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”.
Tools to measure CLS
For CLS, here are a few examples of tools you can use to get a sense of your score:
Identify which elements are contributing to CLS
There are several different ways to go about detecting layout shifts.
We recommend turning things over to your developer at this point — or you could run the following tests and provide your developer with the results so they can start making improvements.
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.
AdThrive is helping with ad-related CLS!
The bad news — ads can be a contributing factor to poor CLS scores.
The good news — our ad code team pioneered an industry-first innovation for the AdThrive Ads WordPress plugin to solve for ad-related CLS on your site!
Dig deeper on CLS:
- Web.Dev | Optimize CLS
- Web.Dev | Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts
- Simon Hearne | How to avoid layout shifts caused by web fonts
Your Core Web Vitals roadmap
Knowledge is power! Start here:
Dig deeper to understand each metric and why it’s important for user experience:
- What is Largest Contentful Paint (LCP)?
- What is First Input Delay (FID)?
- What is Cumulative Layout Shift (CLS)? [You are here!]
Benchmark your site’s Core Web Vitals so you understand your starting position:
Make a step-by-step plan to improve Core Web Vitals:
- Your four-step playbook for diagnosing and improving Core Web Vitals
+ a handy one-sheet to go over with your developer or host
Tackle low-hanging fruit:
- How to choose the right hosting service for a speedy site
- 5 tell-tale signs you’ve outgrown your hosting service
- How a good host can help boost page speed and improve Core Web Vitals + a checklist for hosting optimizations
- Use a CDN to help speed up your site
- 23 optimizations to improve your page speed and Core Web Vitals scores