Skip to content
Core Web Vitals Part 3: Cumulative Layout Shift (CLS)
June 04, 2021 | 7 min read
- 1. QuikRead
- 2. What is Cumulative Layout Shift?
- 3. What’s a good CLS score?
- 4. Does your CLS score affect your SEO?
- 5. Why you should worry about Cumulative Layout Shift
- 6. What is causing Cumulative Layout Shift?
- 7. Layout shifts in detail
- Layout shift score
- Impact fraction
- Distance fraction
- 8. Expected vs. unexpected layout shifts
- 9. How to measure CLS
- 10. Final Thoughts
1. QuikRead
Have you ever been reading a post on the internet and everything on the website abruptly changes? The text suddenly shifts, and you’ve lost your spot. Worse, you’re about to press a link or a button, but the link changes in the split second before your fist lands—BOOM—and you end up pressing something else!
Much of the time, these types of encounters are just irritating, but in some situations, they can be extremely harmful.
Unexpected web content movement often occurs as services are loaded asynchronously or DOM objects are dynamically introduced to the page above existing content. The culprit may be an image or video of undefined proportions, a font that renders bigger or smaller than its fallback, or a third-party ad or widget that dynamically resizes itself.
What makes this dilemma even worse is that how a site works in development is often not the same as how users experience it. Personalized or third-party software often behaves differently in testing than in output, test images are often already cached in the developer’s window, and API calls that run locally are frequently so swift that the latency isn’t visible.
The Cumulative Layout Shift (CLS) metric assists you in addressing this issue by determining how often it occurs for actual users.
2. What is Cumulative Layout Shift?
CLS is a metric that calculates the sum of all individual layout shift scores for any accidental layout shifts that aren’t caused by user interaction during the page’s lifespan.
When a visible element moves from one rendered frame to the next, this is known as a layout transfer.
3. What’s a good CLS score?
A CLS score can be as low as 0 for completely static pages and rises as the page’s structure changes.
Your layout would be more consistent if you get a lower ranking. The below are the official CLS ratings used by Google’s efficiency tools:
- CLS is less than 0.1, which is a good sign.
- CLS between 0.1 and 0.25, needs to be improved.
- CLS greater than 0.25 is considered bad.
Maintain a CLS score of less than 0.1, according to Google.
You Might Be Interested In: Magento 2 Speed Optimization Services
4. Does your CLS score affect your SEO?
When Google’s Page Experience Update goes live in June 2021, CLS will become a ranking consideration. That is, your CLS score (along with the LCP and FID metrics) would have an effect on your SEO. Though it is most definitely a minor consideration, the CLS score (along with the other Web Vitals) can have an effect on the traffic you get from Google and other search engines.
Furthermore, CLS correlates with consumer experience metrics. Although Google says it does not use metrics like dwell time or bounce rate for ranking purposes, other search engines, such as Bing, confess to using those metrics in their ranking algorithms.
For these reasons, maximizing CLS should be a top priority in your SEO strategy.
5. Why you should worry about Cumulative Layout Shift
As previously said, CLS will become a ranking consideration in the near future.
More specifically, a high CLS score indicates that your users are having difficulty navigating your website.
The negative consequences of various style changes range from slight irritation to mistakenly buying the incorrect thing. It may lead to negative feedback for the website, discouraging people from returning to the platform and repelling new customers.
6. What is causing Cumulative Layout Shift?
Cumulative Layout Shift occurs for five reasons, according to Google:
- Images that do not have dimensions: When responsive Web design became popular, developers abandoned the use of ‘width’ and ‘height’ measurements in favor of resizing images with CSS. The issue here is that page space could only be reserved after the image had been downloaded, which could result in a major layout change as the image resized to match the viewport.
- Advertisements embed, and iframes with no measurements: This one is a bit more difficult to handle. Ads that trigger CLS can be dealt with by styling the element where the ad will appear. If you format the div to have unique heights and widths, for example, the ad would be limited to certain dimensions. If there is a shortage of supplies and an ad does not appear, there are two options. If an ad-containing feature does not display an ad, you may specify that an alternate banner ad or placeholder image be used to fill the space.
- Content that is inserted dynamically: Dynamically injected content includes YouTube videos, Google Maps, and compact social media updates. Since they don’t know how big the change would be, these embedded widgets can be unpredictable. For example, a social media post may include photographs, videos, and several lines of text, all of which can change over time. As a result, sites that have embeds don’t always assign enough room on the website, causing layout changes.
- FOIT/FOUT caused by web fonts (Flash of Invisible Text and Flash of Unstyled Text): Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) can also be caused by downloaded web fonts. Using rel=”preload” in the download link for the web font will help avoid this. Lighthouse can assist you in determining the cause of CLS.
- Actions that wait for a network response before upgrading the DOM.
- CLS can infiltrate during development: During the development stage, a cumulative layout change can occur. What can happen is many of the assets required to render the page may end up in a browser’s cache. Since the design components have already been downloaded, the next time a developer or publisher views the page under development, they will not note a layout change. That is why doing measurement in the lab or in the field is beneficial.
7. Layout shifts in detail
The Layout Instability API defines layout shifts, which register layout-shift entries if an element visible inside the viewport changes its start location (for example, top and left in the default writing mode) between two frames. Such elements are referred to as chaotic elements.
It should be noted that layout changes occur only when current elements change their starting location. If a new element is added to the DOM or an existing element’s size changes, it does not count as a layout shift—as long as the transition does not cause other identifiable elements’ start positions to change.
Layout shift score
The layout shift score is calculated by the browser based on the viewport scale and the displacement of unstable elements in the viewport between two rendered frames. The layout change score is the sum of two measurements of movement: the impact fraction and the distance fraction (both defined below).
layout shift score = impact fraction * distance fraction
Impact fraction
The impact fraction assesses the effect of unstable elements on the viewport region between two frames.
The impact fraction for the current frame is the sum of the visible areas of all unstable components for the previous frame and the current frame expressed as a fraction of the total area of the viewport.
There’s an aspect in the picture above that takes up half of the viewport in one frame. The element then shifts down by 25% of the viewport height in the next frame. The red, dotted rectangle represents the element’s apparent region in both frames, which is 75 percent of the overall viewport in this instance, giving it an impact fraction of 0.75..
Distance fraction
The distance that unstable elements have traveled relative to the viewport is measured by the other half of the layout change score equation. The distance fraction is equal to the greatest distance any unstable element has traveled in the frame (horizontally or vertically) divided by the largest dimension of the viewport (width or height, whichever is greater).
The largest viewport dimension in the example above is the height, and the unstable part has shifted by 25% of the viewport height, resulting in a distance fraction of 0.25.
Since the impact fraction is 0.75 and the distance fraction is 0.25, the layout shift score is 0.75 * 0.25 = 0.1875 in this case.
8. Expected vs. unexpected layout shifts
Not all interface changes are harmful. In reality, many complex web applications change the starting location of elements on the website on a regular basis.
Layout adjustments initiated by the user
A layout change is only harmful if the consumer is not anticipating it. Layout changes that occur in response to user experiences (clicking a link, pressing a button, typing in a search box, and so on) are normally acceptable, as long as the change happens near enough to the interaction that the relationship is clear to the user.
For example, if a user interaction initiates a network request that may take some time to complete, it’s better to make some room and display a loading indicator right away to prevent an awkward interface change until the request is completed. If the user is unaware that something is loading or has no idea when the resource will be available, they may attempt to click something else while waiting—something that could move out from under them.
Layout changes that occur within 500 milliseconds of user input will be marked with the hadRecentInput flag, allowing them to be removed from calculations. The hadRecentInput flag is only set for discrete input events such as touch, release, or keypress. Continuous interactions, such as scrolling, dragging, or pinching, and zooming, are not called “new feedback.”
Transitions and animations
When done correctly, animations and transformations are an excellent way to refresh the content on the website without surprising the user. Content that changes suddenly and randomly on the website nearly often causes a negative user experience. However, content that shifts progressively and predictably from one place to the next will also assist the user in better understanding what is going on and guiding them between state changes.
The CSS transform property enables you to animate objects without causing layout changes:
- Instead of changing the height and width properties, use transform: scale().
- To move elements around, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.
9. How to measure CLS
Since CLS can be calculated in a lab as well as during real-world experiences, you should and should examine both your CLS lab score and your CLS Real User Data.
CLS – Lab Data
The term “Lab Data” refers to the use of tools to replicate the user’s experience. It’s exactly like lab science – it’s almost true, except it’s in a simulated environment, and the outcomes just account for a narrow variety of conceivable scenarios.
The performance tools mentioned below enable you to view your CLS lab results.
- Lighthouse,
- Webpagetest,
- Chrome DevTools,
- Chrome Web Vitals extension.
CLS – Real User Data
Real User Data is information derived from actual user experiences. It is a collection of data gathered by Google and other third parties that helps you to see the big picture. Real User Data can be compared to lab findings. Chrome User Experience Report, or CrUX, is Google’s primary collection of Real User Data.
CrUX data can be obtained using the following methods:
- Google’s BigQuery,
- Google Data Studio,
- PageSpeed Insights,
- CrUX API,
- Google Search Console (Core Web Vitals report).
10. Final Thoughts
Though CLS isn’t the most important of Google’s Core Web Vitals, it will be a ranking factor beginning early next year. What effect would this have? Well, SEOs and designers are likely to collaborate more closely from the start, meaning that page components do not trigger abrupt jumps when they load. They will boost both the UX of their pages and their chances of ranking for keywords by refocusing on CLS.
