CLS (Cumulative Layout Shift) is a metric used in website design and development that measures the stability of a website’s visual content. A user experience metric measures the amount of unexpected visual content layout shifts while a page is loading.
A high CLS score indicates that the website’s content changes and moves around unexpectedly while loading, which can be distracting and confusing to users. Conversely, a low CLS score implies that the website’s content is stable and in place as the page loads, resulting in a better user experience.
Website developers and designers aim to reduce CLS by ensuring the page’s layout stays steady and consistent even when elements and graphics are loaded dynamically. This can be accomplished by employing tactics such as providing specific size attributes for images, reserving space for advertisements, and avoiding dynamic layout changes.
To make things easier, I’ve created a table of contents to help you navigate How to find and fix unexpected layout shifts or Cumulative Layout Shift (CLS).
Table of Contents
What are CLS (Cumulative Layout Shift) and some examples of CLS?
CLS (Cumulative Layout Shift) is a crucial factor in the user experience of a website. As a result, it plays a big role in Google’s Core Web Vitals, a set of metrics measuring the quality of a website’s user experience. In this article, I will discuss how CLS affects Google Core Web Vitals and how to fix a high CLS score to improve the overall user experience of your website.
A high CLS score can greatly impact the user experience on your website, causing content to shift around unexpectedly as the page loads. This can be distracting and confusing to users, leading to a higher bounce rate and lower engagement rate on your site. Google takes this into account with its Core Web Vitals, which measure a website’s speed, loading performance, and interactivity.
How to find Cumulative Layout Shift issues on a website
Are you looking for ways to identify and address Cumulative Layout Shift (CLS) issues on your website? CLS can cause a frustrating user experience, so it’s important to take steps to address it. In this section, I’ll discuss CLS and how to find potential CLS issues on your site. We’ll also look at some tips for fixing CLS issues and ways to monitor them in the future. By the end of this post, you’ll have the tools you need to identify and address CLS issues on your website.
There are several Chrome extensions that can help you detect and measure Cumulative Layout Shift (CLS) on a website. Some of the popular ones are:
WebPageTest
WbPageTest – this comprehensive web performance testing tool measures a range of metrics, including CLS.
Lighthouse
Lighthouse – this is an open-source, automated tool for improving the quality of web pages. It includes a CLS audit, which will report the CLS score for the website you are testing.
PageSpeed Insights
PageSpeed Insights – this is a Google-owned tool that analyzes the performance of a web page and provides suggestions for improvement. It includes a CLS audit and provides recommendations to reduce the score.
These are just a few examples of the tools that are available to help you detect and measure CLS. It’s important to choose the tool that best fits your needs and use it regularly to ensure that your website remains fast and stable for your users.
When it comes to website optimization, PageSpeed Insights is my go-to tool. Especially when I want to test the website for the CLS score it gets.
What are the tools to use to check CLS (Cumulative Layout Shift) on a website
This is a simple Chrome extension that will highlight areas of the page that are contributing to the CLS score.
CLS Checker
CLS Checker – test and debug cumulative layout shifts (CLS) in the browser
This tool measures the ‘cumulative layout shifts’ occurring when a page is loaded in the browser using the Chrome Performance API data. These are then listed, showing the ‘layout shift’ score, and visualized on the webpage.
Green squares show where the element started, and red indicates where the element was shifted to.
CLS Visualizer
CLS Visualizer – Visualizer the CLS of any webpage
This plugin will highlight and visualize the Cumulative Layout Shift.
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.
Unfortunately, the CLS is a pain to debug without visualization
LCP & CLS Monitor
LCP & CLS Monitor– Core Web Vitals Largest Contentful Paint and Cumulative Layout Shift Monitor
This helps to identify problematic elements causing CLS performance issues on the page by visually highlighting them with a red border. Also, in the lower left corner, you can watch this indicator change while staying on the page.
Fix & Improve Cumulative Layout Shift (CLS)
How to fix Cumulative Layout Shift (CLS) score and issues, there are several steps you can take:
Add missing width and height attributes for Image and dynamic content
One common cause of high CLS scores is the sudden appearance of the image or other dynamic HTML elements, which pushes existing content down the page. To fix this, add missing width and height attributes to reduce layout shifts caused by images and other HTML elements that show above-the-fold content that wrap the image and dynamic content space so that they have a designated area to load into that doesn’t cause any layout shifts.
Defer non-critical resources
The Cumulative Layout Shift (CLS) metric in Core Web Vitals involves deferring non-critical resources. One of the three Core Web Vitals metrics used to measure website loading speed and user experience, CLS monitors the number of unexpected layout shifts during page loading.
Users may need clarification on unexpected layout changes as the page loads. When an image or script loads slowly, the page layout changes. Deferring non-critical resources helps reduce layout shifts by initially loading and displaying key content and above-the-fold sections. Deferring non-critical resources reduces the browser’s data transfer, speeding up page loading. The page is less likely to change the layout during loading, which improves CLS.
In conclusion, delaying non-critical resources in CLS reduces layout adjustments and improves user experience. This can improve the CLS score, a key website performance statistic.
Generate critical CSS
By optimizing the loading of critical CSS, you can ensure that the above-the-fold content of a page is displayed quickly and without any visual obstructions. Critical CSS refers to the minimal CSS required to style the content immediately visible to the user when a page loads. This content, known as the “above-the-fold” content, is the first content that a user sees and is crucial for creating a positive first impression. By loading the critical CSS first, you can ensure that this content is displayed quickly and with the correct styling, even before the page loads.
Avoid Lazy loading above-the-fold content on a website
Above-the-fold content refers to the content that is visible to a user without having to scroll. Lazy loading can affect this content by delaying the loading of non-critical images or other media until they are needed. This means that the browser only loads the images or media immediately required to display the above-the-fold content, reducing the amount of data that needs to be loaded and parsed. This can result in a faster page load time and a better user experience, as the above-the-fold content is displayed more quickly. However, lazy loading can also negatively impact CLS. This is because if an image or other media is loaded as a user interacts with the page, it can cause the page layout to shift and change unexpectedly. This can lead to a poor user experience and a higher CLS score.
Use a CSS framework
Use a CSS framework that provides layout stability. For example, CSS frameworks like Bootstrap and Foundation have built-in measures to prevent layout shifts.
CSS frameworks are collections of pre-written, standardized code that make web development faster and easier. They provide developers with a starting point for creating web projects and come with features such as responsive grids, typography, and UI components. The two most popular CSS frameworks are Bootstrap and Foundation. Bootstrap is a popular open-source CSS framework created by Twitter. It has a 12-column grid system, customizable components, and extensive UI elements. Bootstrap offers extensive documentation and support, making it a popular choice for both beginners and experienced developers. Foundation is another popular open-source CSS framework created by Zurb. It offers a 12-column grid system and a wide range of UI components. Foundation is also mobile-first and offers extensive documentation and support. These two frameworks are powerful and popular tools for web developers and provide a great starting point for creating web projects.
Use appropriate font-loading strategies
Self-host, combine, and preload Google Fonts. Optionally display fallback fonts.
Optimize Google Fonts is a free web-based tool that makes it easy to customize and optimize your website’s font styles. It helps you select the best font for your site, customize the font size, and ensure the font is properly displayed on all devices. With Optimize Google Fonts, you can improve the look of your site without having to delve into the complexities of HTML or CSS coding. It also helps you save time and money by allowing you to make changes to a website’s font styles quickly.
Self-hosting, combining, and preloading Google Fonts is an effective way to improve a website’s performance. This technique allows fonts to be loaded quickly and efficiently while providing a fallback option in case of any unexpected issues. Overall, this is an excellent strategy to ensure that webpages load quickly and efficiently and avoid CLS (Cumulative Layout Shift).
Monitor and track your CLS score (test regularly)
Monitoring and tracking your CLS score is an important part of improving it. You can use tools such as Google PageSpeed Insights to keep track of your CLS score and other Core Web Vitals and make changes to your website as needed to improve them.
This is the link for the testing I did in the image below ZestSay.com Pages peed Insight
Final Thoughts: Cumulative Layout Shift CLS
In conclusion, CLS (Cumulative Layout Shift) is a crucial factor in the user experience of a website, and it plays a big role in Google’s Core Web Vitals. By following the CLS tips outlined above, you can reduce your CLS score and improve the overall user experience of your website, leading to higher engagement, lower bounce rates, and better search engine rankings.
As stated previously, if you lack web development skills or experience, it will be challenging to implement the steps necessary to fix your website’s CLS. Therefore, a web developer must be able to address your website’s CLS issues to find and correct the cause of CLS. If you need a Web Developer to address the CLS issue on your website, you may find a Freelancer on these Freelance platform websites like Upwork.com, Fiverr.com, and Freelancer.com.
(to be continued…)