CLS stands for “Cumulative Layout Shift” and it is a metric used to measure the visual stability of a webpage during its loading process.
In simpler terms, CLS measures the amount of shifting or movement of page elements during the time it takes for a webpage to fully load. This can occur when images or other content are loaded after the initial layout has been rendered, causing the layout to shift or “jump” as the new content is added.
The cumulative layout shift is measured based on the total number of changes.
CLS is important because it can affect user experience by making it difficult to interact with a webpage, causing frustration or confusion. A high CLS score indicates that a webpage is less visually stable and may require optimization to improve user experience.
Have you ever been reading an article when the content suddenly moved down because some new ads appeared? Have you ever tried to click a button only to end up on a different page because a new, large image obscured the text?
All these instances are examples of layout shifts, which occur when certain page elements are unreliable and move around the page.
Elements shift places for various reasons. When a new image or advertisement loads above the fold (at the top of the page), for example, the content below the fold must move down to make room.
It’s easy to picture how frustrating this is for end users.
In light of this, one of the three metrics used by Core Web Vitals to evaluate the quality of a website’s UX is the Cumulative Layout Shift. In June 2021, CLS was launched as one of the Page Experience ranking factors alongside Largest Contentful Paint and First Input Delay.
The Cumulative Layout Shift is a highly relevant metric for user experience and the new ranking factor, making up 25% of the PageSpeed score. Thus, it may also have an impact on your SEO rankings.
What should my CLS Rating be?
As previously stated, the CLS is the sum of all unexpected content shifts on the page. Your CLS grade may or may not pass Google’s assessment based on the sum of all shifts.
CLS is measured on a scale from 0 to 1, with a score of 0 indicating no shifting of content during loading and a score of 1 indicating significant shifting of content. A good CLS score is generally considered to be less than 0.1.
A good CLS score should be less than or equal to 0.1. A CLS score between 0.1 and 0.25 means that the performance “needs improvements”. The grade is “poor” if the CLS is greater than 0.25.
How Can I Learn What My Website’s Cumulative Layout Shift (CLS) score is?
You can measure CLS using various tools, including web performance analysis tools and browser developer tools. Here are some steps to measure CLS:
- Use a web performance analysis tool: There are various web performance analysis tools available online that can measure CLS. These following tools provide a detailed report on the performance of your website, including the CLS score. Some popular options include:
- Lighthouse (only for laboratory data)
- PageSpeed Insights
- Chrome DevTools (only Lab Data)
- Google Chrome User Experience Report (CrUX)
- Google Search Console – Core Web Vitals Report
- WebPageTest (only Lab Data)
- GTmetrix (only Lab Data)
- Use browser developer tools: Most modern web browsers have developer tools that can help you measure CLS. Here’s how you can do it using Google Chrome:
- Open Google Chrome and navigate to the webpage you want to measure.
- Right-click on the page and select “Inspect” from the context menu. This will open the Chrome DevTools panel.
- Click on the “Performance” tab in the DevTools panel.
- Click on the “Record” button to start recording the performance metrics.
- Reload the page and wait for it to fully load.
- Click on the “Stop” button to stop recording.
- Scroll down to the “Layout Shifts” section in the “Summary” tab of the Performance panel to see the CLS score.
Let’s look at how PageSpeed Insights and Search Console can assist you in detecting and measuring Cumulative Layout Shift.
Using PageSpeed Insights to Measure and Locate CLS
PageSpeed Insights is one of the best tools for detecting and measuring Cumulative Layout Shift. The tool calculates the CLS score from lab and field data, allowing you to compare controlled and user data. PageSpeed Insights also displays the elements that may be causing a layout shift. After running a diagnostics on your website look for the Diagnostics section.
Navigate to the Diagnostics section and look for “Avoid large layout shift” to determine the root of the problem.
If you have multiple elements listed in this section, you should begin by addressing those that contribute the most to your poor grade. By addressing the most pertinent issues, it is likely that you will receive a score high enough to pass Google’s evaluation.
It is possible to receive a poor Field grade and an excellent Lab grade. In this case, you should also ensure that your Field Data CLS score is high. Remember that Field Data pertains to the actual user experience.
Lab Data, unlike CLS, only considers layout changes during page load. Field Data, on the other hand, counts all layout changes throughout the entire visit, from page load to page close. Consequently, it is more indicative of your website than the Lab Data. Google’s use of field Data to determine search rankings is no accident.
Locating and Measuring LCP on Search Console
In addition to measuring the CLS score and identifying the elements causing layout shifts, you should assess the performance of the entire website.
The Core Web Vitals report in Search Console is the most efficient way to identify all URLs affected by a particular issue. For example, on the Details tab of the Mobile or Desktop report, you may see “CLS issue: more than 0.1 (mobile)”.
By clicking on the specific row, a list of URLs that require maintenance for the same reason will appear.
Once the issue has been resolved, it will be simple to validate the fix for all pages affected by the same issue.
Let’s now examine what causes a poor CLS score and how to remedy it.
What Variables Influence CLS and Lead to a Low Score?
Common causes of a low Cumulative Layout Shift grade in WordPress include:
- Images and videos lacking dimensions
- Ads, embeds, and iframes lacking dimensions
- Web Fonts responsible for Flash of Unstyled Text (FOUT) or Flash of invisible text (FOIT)
- Actions await a network response prior to DOM update (especially for ads)
- Dynamically injected content (e.g., animations).
Keep in mind that CLS has the greatest impact on mobile, the most important and difficult device to optimize for performance. There are multiple causes, including a smaller viewport, a difficult mobile network, and a weaker central processing unit (CPU).
1. Images and videos lacking dimensions
The absence of dimensions in images and videos frequently results in layout shifts.
If the width and height size attributes are left blank, the browser will not know how much room to set aside when loading these elements. The space set aside probably won’t be sufficient. As a result, once these elements have loaded completely, they will take up more space than anticipated, shifting the content that has already been displayed.
This problem can be fixed by using various methods to include image dimensions on both image and video elements. We have you covered in the corresponding section!
2. Ads, embeds, and iframes lacking dimensions
Ads, embeds, and iframes all suffer from the same “dimension” problem. Again, not allocating enough room causes these dynamic elements to push down the already displayed content. As a result, the page’s layout will change in new ways.
This issue can be solved by giving the ads set dimensions and using particular strategies to control the space set aside for such elements.
3. Web Fonts responsible for Flash of Unstyled Text (FOUT) or Flash of invisible text (FOIT)
Web fonts have the potential to change the page’s layout and make the user experience rather unpleasant. What matters is how slowly the fonts load. You might experience two distinct problems: FOUT, also referred to as Flash of Invisible Text (FOIT).
On the one hand, the text on the page appeared to be in a “not-so-good” style (FOUT). The custom font takes some time to load, which is why. You will see the backup font while this is happening. The default font will be replaced once the custom one is finished. The content will then inevitably change, and you’ll notice the font on the page changing.
On the other hand, you could hold off until some text was displayed. It is as a result of the custom font still loading (FOIT). Only after the custom fonts have been rendered will you be able to see the content on the page. Once loaded in full, that content might change the layout.
Preloading fonts is the primary solution to this problem, as you’ll see in a moment.
4. Actions await a network response prior to DOM update (especially for ads)
A layout change can also be brought on by animations and dynamic content injected onto the page, such as banners, ads, or Instagram feeds. Again, this is due to a lack of space set aside for such components.
You now understand how crucial it is to set aside space for elements that engage users without detracting from their experience.
Let’s examine the solutions to these issues.
How to Correct Cumulative Layout Shifts of More Than 0.25 or 0.1 Seconds on Desktop and Mobile
Here are some ways to improve your WordPress site’s CLS score, both with and without plugins, if you want to prevent significant layout changes:
- Make sure that all image and video elements have width and height size attributes.
- Preload Fonts (And Optimize Them)
- Manage Ad Slot Size and Space
- Manage Embed and Iframe Space
- Manage Dynamic Content,
- Use the CSS Transform Property for Animations
You will comprehend how to correct the Search Console status after going over each point.
You can find details about the performance impact of each of our suggestions, ranging from low to high.
The greater the impact, the more likely it is that implementing that particular recommendation will result in an increase in the Cumulative Layout Shift grade.
Some best practices to prevent significant layout changes focus more on managing space for ads and other important components rather than offering a specific solution
1. Make sure that all image and video elements have width and height size attributes
One of the easiest ways to fix CLS in your WordPress CMS is to include the width and height attributes on your image and video elements:
By default, WordPress tacks on an image’s dimensions. This should therefore be an action that is resolved mechanically. Use the Block Settings Panel on your right to set image space.
2. Preload Fonts
We outlined how a negative impact on the CLS grade can be seen if web fonts take too long to load. Preloading fonts is recommended to prevent unexpected layout changes.
The browser will prioritize the downloading of fonts, if you instruct it to do so via the preload attribute. The fonts will be loaded as quickly as possible by the browser during the rendering process. Therefore, it is likely that the fonts will be included in the browser’s first meaningful paint, which occurs after the majority of the page’s content has loaded. This would prevent any changes to the overall structure.
3. Manage Ad Slot Size and Space
Ad layout shifts can be avoided by following these best practices.
- Give each ad a set size, ensuring there will be enough room for it to load.
- Set aside as much space as possible for ads. Ad space dimensions can be optimized with the help of historical data.
- Reserve a complete space for ads that have not been displayed. Simply put, you shouldn’t minimize the viewport at any time. You might prefer to use a placeholder or fallback instead.
- Ads that do not require users to leave the site should be positioned in the middle of the page, way below the viewport’s top.
4. Manage Embed and Iframe Space
As with ad management, suggestions for handling embeds and iframes are similar.
Specifically, you should determine ahead of time whether or not there will be enough space for such components. Again, looking at past numbers can help you determine how much space to set aside.
Using a placeholder or fallback to manage the unknown embed size is a great idea.
5. Manage Dynamic Content
Cumulative Layout Shift can also be affected by dynamic content such as banners. As a result, unless triggered by user interaction, you should avoid displaying new content. CLS, as you may know, only counts layout shifts that occur when users are not interacting with the page.
To control dynamic content above the fold, , You need to take care of the following recommendations:
- Avoiding large layout shifts
- Preventing massive network payloads
6. Use the CSS Transform Property for Animations
Taking care of animations is the final best practice to ensure visual stability. You can use the CSS property “transform,” which will cause no changes on the layout.
Wrapping Up
Cumulative Layout Shift is caused by content changing dimensions or by late-running JavaScript injecting new content into the page. We’ve discussed various tips and tricks to avoid this in this post. If you have a hard time figuring what to do and need assistance on improving CLS on your website, feel free to get in touch with our team. We are always available for help!
