{"id":18550,"date":"2023-07-25T09:21:42","date_gmt":"2023-07-25T09:21:42","guid":{"rendered":"https:\/\/www.dopinger.com\/blog\/?p=18550"},"modified":"2024-08-21T12:34:43","modified_gmt":"2024-08-21T12:34:43","slug":"what-is-cls-how-to-avoid-cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift","title":{"rendered":"What Is CLS? How to Avoid Cumulative Layout Shift"},"content":{"rendered":"\n<p>If you&#8217;re not into web design, you may have never heard of CLS or Cumulative Layout Shift in its full name. This issue, which you can encounter while browsing websites, can sometimes be quite annoying. If you own a website, visitors may not want to spend time on it due to this problem, leading to a drop in traffic. So, what is CLS?<\/p>\n\n\n\n<p>The CLS meaning is simply about unexpected and often annoying visual shifts users experience when interacting with a website. This problem can occur when page elements such as images, ads, or other dynamic content load or change size, causing the entire layout to rearrange. Cumulative layout shifts not only frustrates users but can also lead to unintended clicks and decreased engagement.<br>To deeply understand CLS, you need to know Core Web Vitals, which Google uses to assess website user experience. Cumulative Layout Shift is one of the Google metrics, so deeply understand this problem. Firstly, let&#8217;s explain Core Web Vitals.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-core-web-vitals.jpg\" alt=\"what is core web vitals\" class=\"wp-image-21621\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-core-web-vitals.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-core-web-vitals-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Core_Web_Vitals\"><\/span>What Is Core Web Vitals?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For a web designer, staying ahead of the game and being well-versed in the latest trends and techniques that can elevate your web projects is crucial. One of the trends that has gained significant attention, especially from search engines like <a href=\"https:\/\/www.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google<\/a>, is <a href=\"https:\/\/www.dopinger.com\/blog\/core-web-vitals\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals<\/a>. This is a term that Google gives to represent a set of essential performance test website metrics for the user experience of a website. They have three key metrics:&nbsp; &nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Largest Contentful Paint (LCP),&nbsp; &nbsp;<\/li>\n\n\n\n<li>First Input Delay (FID),&nbsp; &nbsp;<\/li>\n\n\n\n<li>Cumulative Layout Shift (CLS).&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>To briefly explain, <a href=\"https:\/\/www.dopinger.com\/blog\/what-is-lcp\" target=\"_blank\" rel=\"noreferrer noopener\">LCP<\/a> is a metric that measures the loading performance of a web page. It focuses on how quickly the largest content element appears on the user&#8217;s screen, such as an image or text block. A fast LCP ensures that users see meaningful content without delay. To evaluate a website&#8217;s interactivity, Google uses FID. It measures the time it takes for a user&#8217;s first interaction, such as clicking a button or a link, to receive a response. The final one is the Cumulative Layout Shift (CLS), or we can say that CLS Google or CLS Web vital. Now, let&#8217;s deeply look at it.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Is_CLS_Important_for_Core_Web_Vitals\"><\/span>Why Is CLS Important for Core Web Vitals?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The web design and development realm is always evolving, and understanding Core Web Vitals is crucial as they play a pivotal role in determining a website&#8217;s success. Cumulative Layout Shift (CLS) holds a special significance among these key metrics. But why is CLS web vital important? Here are a few reasons:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CLS directly affects the user experience. When content shifts unexpectedly occur, users get frustrated by them and leave your website.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Search engines like Google have integrated Core Web Vitals into their algorithms. CLS, along with LCP and FID, influences a website&#8217;s ranking in search results. A good CLS score positively impacts your website&#8217;s visibility.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Web users tend to stick around and engage more with websites that provide a seamless experience. If you optimize CLS, you can enhance visual stability and contribute longer user sessions.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cumulative-layout-shift.jpg\" alt=\"what is cumulative layout shift\" class=\"wp-image-21620\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cumulative-layout-shift.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cumulative-layout-shift-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_Cumulative_Layout_Shift\"><\/span>What Is Cumulative Layout Shift?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As we mentioned before, Cumulative Layout Shift or CLS is a vital web performance metric that gauges the visual stability of a web page. It&#8217;s a part of Google&#8217;s Core Web Vitals. Unlike the other two core vitals, CLS focuses on the user experience by quantifying the unexpected layout shifts that users can have while interacting with a webpage. These shifts can be elements jumping around due to late-loading images or ads.&nbsp; &nbsp;<\/p>\n\n\n\n<p>These shifts can be disruptive to users, leading to accidental clicks or confusion. To assess CLS, a score is calculated based on the impact fraction (how much content moves) and the distance fraction (how far the content moves) during page loading.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Furthermore, we can say that CLS is about improving the user experience. Websites with low CLS scores are more user-friendly, which means users are less likely to be frustrated by content jumping around the page. The term &#8220;cumulative&#8221; in CLS means the fact that layout shifts can accumulate over a user&#8217;s session, gradually eroding the user&#8217;s trust and annoying.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Additionally, common causes of Cumulative Layout Shift include images and iframes that don&#8217;t have specified dimensions that load after the initial content has been rendered. Ads are often culprits, too.&nbsp; &nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Is_Cumulative_Layout_Shift_Important\"><\/span>Why Is Cumulative Layout Shift Important?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cumulative Layout Shift is important for web designers, developers, and website owners due to its multifaceted impact. It directly influences the overall user experience. When a website exhibits a high CLS, users often have frustration with unexpected shifts. In contrast, a low CLS score ensures a smoother, more enjoyable website visit. Visitors are more likely to engage with the content and stay longer on your site when the layout stays stable and predictable.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Google and other search engines have algorithms with Cumulative Layout Shifts. This means that they consider user experience as a vital aspect of website quality. Therefore, websites with low CLS scores are favored in search rankings. By optimizing CLS, you not only enhance the user experience but also increase the likelihood of your website rankings. This can significantly impact organic traffic.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Additionally, when users have a pleasant experience on your website, they tend to stay longer on your website and spend more time exploring its content. A stable and visually pleasing layout fosters a sense of trust. This increases engagement, reduces bounce rates, and leads to higher conversion rates.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Mobile friendliness is an important issue for web designers since mobile devices are rising. CLS is particularly crucial for mobile optimization. Mobile users are more sensitive to layout shifts, making CLS optimization essential for ensuring your site provides a user-friendly experience on various screen sizes.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Finally, it helps you to have a competitive advantage. Users are more likely to choose sites that offer a seamless and visually stable experience over those plagued by layout shifts. This can result in higher user retention and a broader audience reach.&nbsp; &nbsp;<\/p>\n\n\n\n<p>In summary, Cumulative Layout Shift is not just a technical metric; it&#8217;s a pivotal factor in <a href=\"https:\/\/www.dopinger.com\/web-design-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design services<\/a>, <a href=\"https:\/\/www.dopinger.com\/seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO<\/a>, and user engagement.&nbsp; <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-the-optimal-cls-score.jpg\" alt=\"what is the optimal CLS score\" class=\"wp-image-21619\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-the-optimal-cls-score.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-the-optimal-cls-score-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Is_the_Optimal_CLS_Score\"><\/span>What Is the Optimal CLS Score?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When you have a website, achieving optimal performance is a constant pursuit. When it comes to Cumulative Layout Shift, understanding what constitutes an ideal CLS score is important. Aiming for the right CLS score can significantly enhance your website&#8217;s user experience and search engine ranking. The optimal CLS score is, essentially, as close to zero as possible. A lower score signifies a more visually stable and user-friendly website. However, to provide a tangible benchmark, Google recommends that websites strive for a CLS score below 0.1 to be considered &#8220;good.&#8221;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Understanding the CLS score in this context means realizing that, for every user interaction, whether it&#8217;s scrolling down a page or clicking on elements. The website page should ideally remain visually stable. Any visible layout shift, if it occurs, should be subtle and not disruptive.&nbsp;&nbsp;<\/p>\n\n\n\n<p>It&#8217;s important to note that achieving a perfect CLS score of zero may not always be realistic, particularly on content-rich websites with multiple dynamic elements. Still, striving to minimize CLS as much as possible is an admirable goal. When you reach or surpass the recommended score of 0.1, your website will likely provide a much-improved user experience. Users won&#8217;t be plagued by content that unexpectedly shifts or moves, ensuring a smoother and more engaging interaction with your site.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Causes_a_High_CLS_Score\"><\/span>What Causes a High CLS Score?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cumulative Layout Shifts (CLS) is a critical web performance metric that directly affects user experience, as previously mentioned. To tackle CLS effectively, it&#8217;s essential to understand the common factors that lead to high CLS scores. To prevent high scores, web designers can go with some solutions; however, before these solutions, let&#8217;s delve into these common factors to understand it better:&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Unoptimized Content&nbsp;&nbsp;<\/h3>\n\n\n\n<p>One of the primary factors contributing to the high CLS score is unoptimized content. Unoptimized content particularly means images and iframes. When these elements lack specified dimensions in the HTML, the browser may not allocate space in the layout. As a result, they push other content around when they load, leading to layout shifts.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/dynamic-content-cls.jpg\" alt=\"CLS dynamic content\" class=\"wp-image-21618\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/dynamic-content-cls.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/dynamic-content-cls-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Dynamic Content&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Dynamic content, such as news tickers, pop-ups, or elements that appeal after the initial page load, can significantly contribute to a high score. These elements often cause abrupt layout shifts when they materialize, disrupting the user experience.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ads and Embeds&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Advertisements, especially those served by third-party ad networks, can be major culprits for high scores. Ads often load asynchronously, and their sizes may change, causing significant layout shifts. The same applies to embedded media like videos and iframes, which can impact visual stability.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Web-Based Fonts&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Web fonts play a crucial role in web design but can also lead to CLS issues. When a webpage relies on web fonts for its typography, it might initially load with default fonts, causing a subsequent shift when the web font files are fetched and applied.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/third-party-scripts.jpg\" alt=\"third-party scripts\" class=\"wp-image-21617\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/third-party-scripts.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/third-party-scripts-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Third-Party Scripts&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Social media widgets or analytics tools are some examples of third-party scripts. They can introduce additional complexities to a webpage. The scripts may load asynchronously, just like the web-based fonts, and their actions can trigger layout shifts as they interact with the page&#8217;s content.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Measure_CLS\"><\/span>How to Measure CLS&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To improve your website and keep up with the visitors smoothly, you need to monitor and improve its visual stability. Several tools are available for this purpose, which we will explore in this part of our blog post. These tools provide insights into your CLSK score and help you identify areas that need optimization. You can regularly monitor your CLS score on the insights provided by these tools and create a more visually stable and user-friendly website.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/page-speed-insights-score.jpg\" alt=\"Google PageSpeed Insights score\" class=\"wp-image-21611\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/page-speed-insights-score.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/page-speed-insights-score-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Google PageSpeed Insights&nbsp;&nbsp;<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.dopinger.com\/blog\/google-pagespeed-insights\" target=\"_blank\" rel=\"noreferrer noopener\">Google PageSpeed Insights<\/a> is a widely used tool that offers a CLS score as part of its performance analysis. It provides a user-friendly interface where you can input your website&#8217;s URL and generate a detailed report that includes CLS data. Google PageSpeed Insights also offers suggestions and optimizations to reduce your CLS score, making it a valuable resource for web developers. This tool for site speed optimization gains importance in improving your website.&nbsp; &nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/generate-lighthouse-report.jpg\" alt=\"generate Lighthouse report\" class=\"wp-image-21610\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/generate-lighthouse-report.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/generate-lighthouse-report-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Google Lighthouse&nbsp;&nbsp;<\/h3>\n\n\n\n<p>This standalone and open-source tool is integrated into the Google Chrome browser. Lighthouse assesses various aspects of web performance, including CLS. To use it, open your website in Google Chrome, right-click, select &#8220;Inspect,&#8221; and go to the &#8220;Lighthouse&#8221; tab. After running an audit, you&#8217;ll receive a CLS score and recommendations for improving it.\u00a0Learn <a href=\"https:\/\/www.dopinger.com\/blog\/how-to-use-lighthouse-report-to-optimize-your-page\" target=\"_blank\" rel=\"noreferrer noopener\">how to use Lighthouse report to optimize your page<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/start-web-page-test.jpg\" alt=\"WebPage Test\" class=\"wp-image-21612\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/start-web-page-test.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/start-web-page-test-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">WebPage Test&nbsp;&nbsp;<\/h3>\n\n\n\n<p>The webPage Test is another valuable tool for measuring cumulative layout shift. It offers an in-depth performance test website and allows you to select test locations and browsers. When you run a CLS test, WebPage Test provides a waterfall chart and other metrics, including CLS. This tool is particularly useful for comprehensively understanding your website&#8217;s performance under different conditions.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Is_CLS_Calculated\"><\/span>How Is CLS Calculated?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Until this stage, we have explored what Cumulative Layout Shift is, its importance, and what causes it. But how is CLS calculated? It is essentially the product of two fractions: Impact Fraction and Distance Fraction. These components work together to provide a numerical value representing the extent of layout shifts experienced by users.&nbsp; &nbsp;<\/p>\n\n\n\n<p>The Impact Fraction measures the proportion of the viewport affected by layout shifts due to elements that change position during page loading. To calculate this fraction for a specific element, you can follow these steps:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start by identifying the unstable element. This can be an image, a piece of text, or any content that moves during loading.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Determine the change in layout. Measure the area the element occupies before and after the shift. The difference in size, often expressed as a percentage of the viewport, represents the impact area.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Divide the impact area by the viewport size. This yields the Impact Fraction for that specific layout shift event. Repeat this process for all unstable elements contributing to layout shifts during a user&#8217;s session.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>The Distance Fraction considers how far the elements move during the layout shift. It&#8217;s calculated as follows:&nbsp;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify the elements causing the shift and measure the maximum distance they move.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Divide this distance by the viewport size. This calculation results in the Distance Fraction for that specific layout shift event.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Once you have these two components for all layout shifts during a user&#8217;s sessions, you sum them up to calculate the Cumulative Layout Shift. The formula looks like this:&nbsp;&nbsp;<br>CLS = \u03a3(impact fraction * distance fraction) for all layout shift events&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>In practice, web performance tools do these calculations for you. They simulate user interactions and measure layout shifts, providing you with a CLS score, which is a single, easy-to-understand number representing the overall visual stability of your web page.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Resolve_a_CLS_Issue\"><\/span>How to Resolve a CLS Issue?&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You know how to calculate these issues, but addressing the Cumulative Layout Shift issues is crucial for creating a visually stable and user-friendly website. Resolving CLS problems involves a combination of best practices and specific techniques to ensure a smooth user experience. Let&#8217;s check them:&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/aspects-ratios-for-images.jpg\" alt=\"aspects ratios for images\" class=\"wp-image-21616\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/aspects-ratios-for-images.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/aspects-ratios-for-images-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Implement Aspect Ratios for Your Images&nbsp;&nbsp;<\/h3>\n\n\n\n<p>One effective way to reduce CLS is to implement aspect ratios for your images. By specifying the aspect ratio in your HTML or CSS, you reserve space for images, preventing sudden shifts when they load. This technique ensures the layout doesn&#8217;t change dramatically, even as images are fetched.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimize Images and Videos&nbsp;&nbsp;<\/h3>\n\n\n\n<p>This is another way to minimize Cumulative Layout Shifts. Ensure images and videos are appropriately sized and compressed for the web. You can use modern image formats like WebP and lazy loading techniques to prioritize content loading before images. This reduces the risk of layout shifts caused by media elements.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Prioritize Above-the-Fold Content&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Prioritizing above-the-fold content can significantly enhance user experience. Load essential content first and ensure users can begin to interact with your site without delays. Doing this minimizes the chances of layout shifts occurring when late-loading content, such as images, finally renders.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Reserve Space for Ad Slots&nbsp;&nbsp;<\/h3>\n\n\n\n<p>If your website incorporates advertising, reserving space for ad slots is crucial. By specifying ad dimensions in your code, you prevent unpredictable layout shifts when ads load. Coordinate with ad networks to ensure their content doesn&#8217;t disrupt your page&#8217;s visual stability.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/use-font-display-property-in-css.jpg\" alt=\"use font display property in CSS\" class=\"wp-image-21615\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/use-font-display-property-in-css.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/use-font-display-property-in-css-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Use the Font-Display Property in CSS&nbsp;&nbsp;<\/h3>\n\n\n\n<p>To mitigate Cumulative Layout Shifts related to web fonts, leverage CSS&#8217;s &#8216;font-display&#8217; property. This property lets you control how fonts are displayed during loading. By specifying a &#8216;swap&#8217; or &#8216;optional&#8217; value, you can maintain the text&#8217;s visual consistency, reducing layout shifts.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Track and Analyze Your CLS Score Frequently&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Regular monitoring of your CLS score is essential, of course. Utilize tools like GoogleSpeed Insights, Google Lighthouse, or WebPage Test to frequently assess your website&#8217;s performance. These tools provide insights into Cumulative Layout Shift issues, helping you identify and address problems as they arise.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_Connection_Between_CLS_and_SEO\"><\/span>The Connection Between CLS and SEO&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>SEO (Search Engine Optimization) is a fundamental digital marketing strategy that enhances a website&#8217;s visibility and rankings on search engines like Google. It is a multifaceted approach that optimizes various elements of a website to make it more search engine-friendly and, of course, user-friendly. Simply, it is the practice of tailoring a website&#8217;s content, structure, and performance to meet the requirements of search engine algorithms, ultimately increasing organic traffic and improving the website&#8217;s online presence. First, let&#8217;s explore how search engines (especially Google) view CLS to understand the connection between CLS and <a href=\"https:\/\/www.dopinger.com\/seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">SEO<\/a>. Then, it will look at the impact of CLS on search engines, and finally, it will discuss how to analyze CLS issues using Google Search Console.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/how-search-engines-view-cls.jpg\" alt=\"how search engines view cumulative layout shift\" class=\"wp-image-21614\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/how-search-engines-view-cls.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/how-search-engines-view-cls-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">How Search Engines View CLS&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Search engines, including Google, are increasingly focused on providing users with a superior web experience. Cumulative Layout Shift is a key part of this effort. Search engines view CLS as a crucial user experience metric because it directly impacts how users perceive and interact with a website.&nbsp;&nbsp;<\/p>\n\n\n\n<p>When users encounter excessive layout shifts on a webpage, it can lead to frustration, accidental clicks, and a poor overall user experience. Search engines aim to prioritize websites that offer users a smoother, more enjoyable interaction. To achieve this, they factor in CLS, alongside other Core Web Vitals, when determining search rankings.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Impact of CLS on Search Rankings&nbsp;&nbsp;<\/h3>\n\n\n\n<p>CLS directly affects how websites are ranked in <a href=\"https:\/\/www.dopinger.com\/blog\/what-is-serp\" target=\"_blank\" rel=\"noreferrer noopener\">search engine results pages (SERPs)<\/a>. Websites with poor CLS scores are more likely to rank lower in search results. Conversely, those with good CLS scores have a competitive advantage.&nbsp;&nbsp;<\/p>\n\n\n\n<p>To maintain or improve your website&#8217;s search rankings, optimizing for Cumulative Layout Shifts is imperative. Minimizing layout shifts and ensuring a visually stable user experience will enhance your site&#8217;s SEO and attract more organic traffic.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Analyze CLS Issues in Google Search Console&nbsp;&nbsp;<\/h3>\n\n\n\n<p>Google Search Console offers valuable insights into CLS issues on your website. You can use it to analyze Cumulative Layout Shifts. To do this, follow these steps:&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"960\" height=\"480\" src=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/performance-score.jpg\" alt=\"cumulative layout shift performance score\" class=\"wp-image-21613\" srcset=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/performance-score.jpg 960w, https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/performance-score-768x384.jpg 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>First, sign in to Google Search Console and select your property (website).&nbsp;&nbsp;<\/li>\n\n\n\n<li>Click on &#8220;Core Web Vitals&#8221; under the &#8220;Enhancements&#8221; section. Here, you&#8217;ll find an overview of your website&#8217;s Core Web Vitals performance, including CLS.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Review the CLS data for specific pages and identify URLs with poor CLS scores.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Click on individual URLs on those pages to access more detailed information about CLS issues.&nbsp;&nbsp;<\/li>\n\n\n\n<li>Use the provided data and recommendations to address and optimize Cumulative Layout Shifts on your website.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>By regularly monitoring Cumulative Layout Shift issues in Google Search Console and taking action on the insights provided, you can work toward improving your website&#8217;s visual stability and, consequently, its search rankings.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"In_Conclusion_Cumulative_Layout_Shifts\"><\/span>In Conclusion Cumulative Layout Shifts&nbsp;&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cumulative Layout Shift (CLS) is a critical aspect of web design and SEO, which impacts user experience and search engine rankings. Web designers and developers can create more user-friendly websites and improve rankings by understanding Cumulative Layout Shifts, optimizing Core Web Vitals, and taking proactive measures to reduce layout shifts. Monitoring CLS through tools like Google Search Console ensures ongoing success, making it an integral part of effective web management.<\/p>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\">     <\/div>\n\n    <div class=\"container m-0 p-0 pm-faq\">\n            <h2 class=\"accordion-title\"><span class=\"ez-toc-section\" id=\"Frequently_Asked_Questions_About\"><\/span>Frequently Asked Questions About <span class=\"ez-toc-section-end\"><\/span><\/h2>\n        <div class=\"faq accordion faq-drop\" id=\"accordion\">\n            <div class=\"col-md-12 faq-card m-0 p-0\">\n                    <div class=\"card faq\">\n                        <div class=\"card-header collapsed d-flex justify-content-between align-items-center d-flex\" id=\"heading0\"\n                             data-toggle=\"collapse\" data-target=\"#collapse_0\" aria-expanded=\"true\" role=\"button\"\n                             aria-controls=\"collapse_0\">\n                            How does CLS affect user experience?\n                            <svg class=\"close\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M12.0001 18.1566C11.7432 18.1533 11.4979 18.0497 11.3163 17.8681C11.1347 17.6865 11.0312 17.4412 11.0278 17.1844V6.81402C11.0278 6.55617 11.1303 6.30888 11.3126 6.12655C11.4949 5.94423 11.7422 5.8418 12.0001 5.8418C12.2579 5.8418 12.5052 5.94423 12.6875 6.12655C12.8698 6.30888 12.9723 6.55617 12.9723 6.81402V17.1844C12.9689 17.4412 12.8654 17.6865 12.6838 17.8681C12.5022 18.0497 12.2569 18.1533 12.0001 18.1566Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#4266FF\"\/>\n                            <\/svg>\n                            <svg class=\"open\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M5.84241 11.9996C5.84577 11.7428 5.94928 11.4974 6.13088 11.3158C6.31249 11.1342 6.55783 11.0307 6.81464 11.0273L17.185 11.0273C17.4429 11.0273 17.6901 11.1298 17.8725 11.3121C18.0548 11.4944 18.1572 11.7417 18.1572 11.9996C18.1572 12.2574 18.0548 12.5047 17.8725 12.687C17.6901 12.8694 17.4429 12.9718 17.185 12.9718L6.81464 12.9718C6.55783 12.9684 6.31249 12.8649 6.13088 12.6833C5.94928 12.5017 5.84577 12.2564 5.84241 11.9996Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#EF4444\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div id=\"collapse_0\" class=\"collapse\" aria-labelledby=\"heading0\" data-parent=\"#accordion\">\n                            <div class=\"card-body\">\n                                <p>High CLS can lead to a poor user experience as it results in unexpected layout changes, potentially causing frustration, accidental clicks, and a higher bounce rate.<\/p>\n                            <\/div>\n                        <\/div>\n                        <\/div>\n                        \n                    <div class=\"card faq\">\n                        <div class=\"card-header collapsed d-flex justify-content-between align-items-center d-flex\" id=\"heading1\"\n                             data-toggle=\"collapse\" data-target=\"#collapse_1\" aria-expanded=\"true\" role=\"button\"\n                             aria-controls=\"collapse_1\">\n                            What is the optimal CLS score to aim for?\n                            <svg class=\"close\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M12.0001 18.1566C11.7432 18.1533 11.4979 18.0497 11.3163 17.8681C11.1347 17.6865 11.0312 17.4412 11.0278 17.1844V6.81402C11.0278 6.55617 11.1303 6.30888 11.3126 6.12655C11.4949 5.94423 11.7422 5.8418 12.0001 5.8418C12.2579 5.8418 12.5052 5.94423 12.6875 6.12655C12.8698 6.30888 12.9723 6.55617 12.9723 6.81402V17.1844C12.9689 17.4412 12.8654 17.6865 12.6838 17.8681C12.5022 18.0497 12.2569 18.1533 12.0001 18.1566Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#4266FF\"\/>\n                            <\/svg>\n                            <svg class=\"open\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M5.84241 11.9996C5.84577 11.7428 5.94928 11.4974 6.13088 11.3158C6.31249 11.1342 6.55783 11.0307 6.81464 11.0273L17.185 11.0273C17.4429 11.0273 17.6901 11.1298 17.8725 11.3121C18.0548 11.4944 18.1572 11.7417 18.1572 11.9996C18.1572 12.2574 18.0548 12.5047 17.8725 12.687C17.6901 12.8694 17.4429 12.9718 17.185 12.9718L6.81464 12.9718C6.55783 12.9684 6.31249 12.8649 6.13088 12.6833C5.94928 12.5017 5.84577 12.2564 5.84241 11.9996Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#EF4444\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div id=\"collapse_1\" class=\"collapse\" aria-labelledby=\"heading1\" data-parent=\"#accordion\">\n                            <div class=\"card-body\">\n                                <p>The optimal score is as close to zero as possible, but Google recommends striving for a CLS score below 0.1 to be considered &#8220;good.&#8221;<\/p>\n                            <\/div>\n                        <\/div>\n                        <\/div>\n                        \n                    <div class=\"card faq\">\n                        <div class=\"card-header collapsed d-flex justify-content-between align-items-center d-flex\" id=\"heading2\"\n                             data-toggle=\"collapse\" data-target=\"#collapse_2\" aria-expanded=\"true\" role=\"button\"\n                             aria-controls=\"collapse_2\">\n                            What are the common factors that cause a high CLS score?\n                            <svg class=\"close\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M12.0001 18.1566C11.7432 18.1533 11.4979 18.0497 11.3163 17.8681C11.1347 17.6865 11.0312 17.4412 11.0278 17.1844V6.81402C11.0278 6.55617 11.1303 6.30888 11.3126 6.12655C11.4949 5.94423 11.7422 5.8418 12.0001 5.8418C12.2579 5.8418 12.5052 5.94423 12.6875 6.12655C12.8698 6.30888 12.9723 6.55617 12.9723 6.81402V17.1844C12.9689 17.4412 12.8654 17.6865 12.6838 17.8681C12.5022 18.0497 12.2569 18.1533 12.0001 18.1566Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#4266FF\"\/>\n                            <\/svg>\n                            <svg class=\"open\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M5.84241 11.9996C5.84577 11.7428 5.94928 11.4974 6.13088 11.3158C6.31249 11.1342 6.55783 11.0307 6.81464 11.0273L17.185 11.0273C17.4429 11.0273 17.6901 11.1298 17.8725 11.3121C18.0548 11.4944 18.1572 11.7417 18.1572 11.9996C18.1572 12.2574 18.0548 12.5047 17.8725 12.687C17.6901 12.8694 17.4429 12.9718 17.185 12.9718L6.81464 12.9718C6.55783 12.9684 6.31249 12.8649 6.13088 12.6833C5.94928 12.5017 5.84577 12.2564 5.84241 11.9996Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#EF4444\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div id=\"collapse_2\" class=\"collapse\" aria-labelledby=\"heading2\" data-parent=\"#accordion\">\n                            <div class=\"card-body\">\n                                <p>These can be unoptimized content (images, iframes), dynamic content, ads and embeds, web-based fonts, and third-party scripts that load asynchronously.<\/p>\n                            <\/div>\n                        <\/div>\n                        <\/div>\n                        \n                    <div class=\"card faq\">\n                        <div class=\"card-header collapsed d-flex justify-content-between align-items-center d-flex\" id=\"heading3\"\n                             data-toggle=\"collapse\" data-target=\"#collapse_3\" aria-expanded=\"true\" role=\"button\"\n                             aria-controls=\"collapse_3\">\n                            How is the Cumulative Layout Shift calculated?\n                            <svg class=\"close\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M12.0001 18.1566C11.7432 18.1533 11.4979 18.0497 11.3163 17.8681C11.1347 17.6865 11.0312 17.4412 11.0278 17.1844V6.81402C11.0278 6.55617 11.1303 6.30888 11.3126 6.12655C11.4949 5.94423 11.7422 5.8418 12.0001 5.8418C12.2579 5.8418 12.5052 5.94423 12.6875 6.12655C12.8698 6.30888 12.9723 6.55617 12.9723 6.81402V17.1844C12.9689 17.4412 12.8654 17.6865 12.6838 17.8681C12.5022 18.0497 12.2569 18.1533 12.0001 18.1566Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#4266FF\"\/>\n                            <\/svg>\n                            <svg class=\"open\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M5.84241 11.9996C5.84577 11.7428 5.94928 11.4974 6.13088 11.3158C6.31249 11.1342 6.55783 11.0307 6.81464 11.0273L17.185 11.0273C17.4429 11.0273 17.6901 11.1298 17.8725 11.3121C18.0548 11.4944 18.1572 11.7417 18.1572 11.9996C18.1572 12.2574 18.0548 12.5047 17.8725 12.687C17.6901 12.8694 17.4429 12.9718 17.185 12.9718L6.81464 12.9718C6.55783 12.9684 6.31249 12.8649 6.13088 12.6833C5.94928 12.5017 5.84577 12.2564 5.84241 11.9996Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#EF4444\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div id=\"collapse_3\" class=\"collapse\" aria-labelledby=\"heading3\" data-parent=\"#accordion\">\n                            <div class=\"card-body\">\n                                <p>It is calculated by summing the product of the Impact Fraction (how much content moves) and the Distance Fraction (how far the content moves) for all layout shift events.<\/p>\n                            <\/div>\n                        <\/div>\n                        <\/div>\n                        \n                    <div class=\"card faq\">\n                        <div class=\"card-header collapsed d-flex justify-content-between align-items-center d-flex\" id=\"heading4\"\n                             data-toggle=\"collapse\" data-target=\"#collapse_4\" aria-expanded=\"true\" role=\"button\"\n                             aria-controls=\"collapse_4\">\n                            How can I improve CLS on my website to enhance user experience and SEO?\n                            <svg class=\"close\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M12.0001 18.1566C11.7432 18.1533 11.4979 18.0497 11.3163 17.8681C11.1347 17.6865 11.0312 17.4412 11.0278 17.1844V6.81402C11.0278 6.55617 11.1303 6.30888 11.3126 6.12655C11.4949 5.94423 11.7422 5.8418 12.0001 5.8418C12.2579 5.8418 12.5052 5.94423 12.6875 6.12655C12.8698 6.30888 12.9723 6.55617 12.9723 6.81402V17.1844C12.9689 17.4412 12.8654 17.6865 12.6838 17.8681C12.5022 18.0497 12.2569 18.1533 12.0001 18.1566Z\" fill=\"#4266FF\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#4266FF\"\/>\n                            <\/svg>\n                            <svg class=\"open\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                              <path d=\"M12.0002 23.6663C9.69272 23.6663 7.43709 22.9821 5.51851 21.7002C3.59994 20.4182 2.1046 18.5961 1.22157 16.4643C0.338551 14.3325 0.107512 11.9867 0.557673 9.72362C1.00783 7.46051 2.11898 5.38171 3.75059 3.7501C5.3822 2.11849 7.461 1.00735 9.72411 0.557185C11.9872 0.107024 14.333 0.338063 16.4648 1.22108C18.5966 2.10411 20.4187 3.59945 21.7006 5.51803C22.9826 7.4366 23.6668 9.69223 23.6668 11.9997C23.6668 15.0939 22.4377 18.0613 20.2497 20.2493C18.0618 22.4372 15.0944 23.6663 12.0002 23.6663ZM12.0002 2.27746C10.0773 2.27746 8.1976 2.84766 6.59879 3.91595C4.99998 4.98424 3.75386 6.50264 3.01801 8.27914C2.28215 10.0556 2.08962 12.0105 2.46476 13.8964C2.83989 15.7823 3.76584 17.5146 5.12552 18.8743C6.48519 20.234 8.21753 21.16 10.1035 21.5351C11.9894 21.9102 13.9442 21.7177 15.7207 20.9818C17.4972 20.246 19.0156 18.9999 20.0839 17.4011C21.1522 15.8022 21.7224 13.9226 21.7224 11.9997C21.7224 9.42118 20.6981 6.9483 18.8748 5.12503C17.0515 3.30176 14.5787 2.27746 12.0002 2.27746Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M5.84241 11.9996C5.84577 11.7428 5.94928 11.4974 6.13088 11.3158C6.31249 11.1342 6.55783 11.0307 6.81464 11.0273L17.185 11.0273C17.4429 11.0273 17.6901 11.1298 17.8725 11.3121C18.0548 11.4944 18.1572 11.7417 18.1572 11.9996C18.1572 12.2574 18.0548 12.5047 17.8725 12.687C17.6901 12.8694 17.4429 12.9718 17.185 12.9718L6.81464 12.9718C6.55783 12.9684 6.31249 12.8649 6.13088 12.6833C5.94928 12.5017 5.84577 12.2564 5.84241 11.9996Z\" fill=\"#EF4444\"\/>\n                              <path d=\"M17.1854 12.9718H6.815C6.55715 12.9718 6.30986 12.8694 6.12753 12.687C5.9452 12.5047 5.84277 12.2574 5.84277 11.9996C5.84277 11.7417 5.9452 11.4944 6.12753 11.3121C6.30986 11.1298 6.55715 11.0273 6.815 11.0273H17.1854C17.4432 11.0273 17.6905 11.1298 17.8728 11.3121C18.0552 11.4944 18.1576 11.7417 18.1576 11.9996C18.1576 12.2574 18.0552 12.5047 17.8728 12.687C17.6905 12.8694 17.4432 12.9718 17.1854 12.9718Z\" fill=\"#EF4444\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div id=\"collapse_4\" class=\"collapse\" aria-labelledby=\"heading4\" data-parent=\"#accordion\">\n                            <div class=\"card-body\">\n                                <p>Optimize your website&#8217;s images, ads, and dynamic content to improve CLS, and monitor your CLS scores regularly. Prioritize a visually stable layout to provide a better user experience and boost your SEO efforts.\u00a0<\/p>\n                            <\/div>\n                        <\/div>\n                        <\/div>\n                        <\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re not into web design, you may have never heard of CLS or Cumulative Layout Shift in its full name. This issue, which you can encounter while browsing websites, can sometimes be quite annoying. If you own a website, visitors may not want to spend time on it due [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":18578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[],"class_list":["post-18550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-seo","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What Is Cumulative Layout Shift? How to Avoid It? - Dopinger<\/title>\n<meta name=\"description\" content=\"Today, we will discuss all the details about what is cumulative layout shift and how to avoid it. Without further ado, let&#039;s start learning.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Is Cumulative Layout Shift? How to Avoid It? - Dopinger\" \/>\n<meta property=\"og:description\" content=\"Today, we will discuss all the details about what is cumulative layout shift and how to avoid it. Without further ado, let&#039;s start learning.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\" \/>\n<meta property=\"og:site_name\" content=\"Dopinger Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dopingercom\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-25T09:21:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-21T12:34:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1248\" \/>\n\t<meta property=\"og:image:height\" content=\"832\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cihat K\u0131sa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cihat_kisa\" \/>\n<meta name=\"twitter:site\" content=\"@dopingercom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cihat K\u0131sa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\"},\"author\":{\"name\":\"Cihat K\u0131sa\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/#\/schema\/person\/61b242b40bfd7d2f6928e29d289d384b\"},\"headline\":\"What Is CLS? How to Avoid Cumulative Layout Shift\",\"datePublished\":\"2023-07-25T09:21:42+00:00\",\"dateModified\":\"2024-08-21T12:34:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\"},\"wordCount\":3403,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage\"},\"thumbnailUrl\":\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg\",\"articleSection\":[\"Technical SEO\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\",\"url\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\",\"name\":\"What Is Cumulative Layout Shift? How to Avoid It? - Dopinger\",\"isPartOf\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage\"},\"thumbnailUrl\":\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg\",\"datePublished\":\"2023-07-25T09:21:42+00:00\",\"dateModified\":\"2024-08-21T12:34:43+00:00\",\"description\":\"Today, we will discuss all the details about what is cumulative layout shift and how to avoid it. Without further ado, let's start learning.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089051\"},{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089763\"},{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090263\"},{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090745\"},{\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069091315\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage\",\"url\":\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg\",\"contentUrl\":\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg\",\"width\":1248,\"height\":832,\"caption\":\"What Is CLS? How to Avoid Cumulative Layout Shift\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.dopinger.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What Is CLS? How to Avoid Cumulative Layout Shift\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/#website\",\"url\":\"https:\/\/www.dopinger.com\/blog\/\",\"name\":\"Dopinger Blog\",\"description\":\"Dopinger\",\"publisher\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dopinger.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/#organization\",\"name\":\"Dopinger Blog\",\"url\":\"https:\/\/www.dopinger.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2022\/02\/dopinger-blog-logo.png\",\"contentUrl\":\"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2022\/02\/dopinger-blog-logo.png\",\"width\":157,\"height\":48,\"caption\":\"Dopinger Blog\"},\"image\":{\"@id\":\"https:\/\/www.dopinger.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/dopingercom\/\",\"https:\/\/x.com\/dopingercom\",\"https:\/\/www.instagram.com\/dopinger_com\/\",\"https:\/\/www.linkedin.com\/company\/dopingercom\/\",\"https:\/\/tr.pinterest.com\/dopingercom\/_saved\/\",\"https:\/\/www.youtube.com\/dopinger\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/#\/schema\/person\/61b242b40bfd7d2f6928e29d289d384b\",\"name\":\"Cihat K\u0131sa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.dopinger.com\/blog\/wp-content\/uploads\/2022\/11\/cihat-kisa-96x96.png\",\"contentUrl\":\"https:\/\/www.dopinger.com\/blog\/wp-content\/uploads\/2022\/11\/cihat-kisa-96x96.png\",\"caption\":\"Cihat K\u0131sa\"},\"description\":\"I was born in a city in Turkey called Konya. When I was six, we have moved to Istanbul. Before moving to Istanbul, my childhood dream was to develop computer programs, websites, or games. After a few years, I started designing some websites and then learned web development to create something that matters. After my education, we found Jengal with my business partner and brother (A very talented software developer) to make real some of our shared dreams. Now, I'm the Co-Founder and Chief Executive Officer at Jengal Software.\",\"sameAs\":[\"https:\/\/instagram.com\/cihatkisacom?igshid=NmNmNjAwNzg=\",\"https:\/\/www.linkedin.com\/in\/cihat-kisa-99b6384a\/\",\"https:\/\/x.com\/cihat_kisa\"],\"url\":\"https:\/\/www.dopinger.com\/blog\/author\/cihatkisa\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089051\",\"position\":1,\"url\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089051\",\"name\":\"How does CLS affect user experience?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"High CLS can lead to a poor user experience as it results in unexpected layout changes, potentially causing frustration, accidental clicks, and a higher bounce rate.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089763\",\"position\":2,\"url\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089763\",\"name\":\"What is the optimal CLS score to aim for?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"The optimal score is as close to zero as possible, but Google recommends striving for a CLS score below 0.1 to be considered \\\"good.\\\"\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090263\",\"position\":3,\"url\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090263\",\"name\":\"What are the common factors that cause a high CLS score?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"These can be unoptimized content (images, iframes), dynamic content, ads and embeds, web-based fonts, and third-party scripts that load asynchronously.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090745\",\"position\":4,\"url\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090745\",\"name\":\"How is the Cumulative Layout Shift calculated?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"It is calculated by summing the product of the Impact Fraction (how much content moves) and the Distance Fraction (how far the content moves) for all layout shift events.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069091315\",\"position\":5,\"url\":\"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069091315\",\"name\":\"How can I improve CLS on my website to enhance user experience and SEO?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Optimize your website's images, ads, and dynamic content to improve CLS, and monitor your CLS scores regularly. Prioritize a visually stable layout to provide a better user experience and boost your SEO efforts.\u00a0\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What Is Cumulative Layout Shift? How to Avoid It? - Dopinger","description":"Today, we will discuss all the details about what is cumulative layout shift and how to avoid it. Without further ado, let's start learning.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift","og_locale":"en_US","og_type":"article","og_title":"What Is Cumulative Layout Shift? How to Avoid It? - Dopinger","og_description":"Today, we will discuss all the details about what is cumulative layout shift and how to avoid it. Without further ado, let's start learning.","og_url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift","og_site_name":"Dopinger Blog","article_publisher":"https:\/\/www.facebook.com\/dopingercom\/","article_published_time":"2023-07-25T09:21:42+00:00","article_modified_time":"2024-08-21T12:34:43+00:00","og_image":[{"width":1248,"height":832,"url":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg","type":"image\/jpeg"}],"author":"Cihat K\u0131sa","twitter_card":"summary_large_image","twitter_creator":"@cihat_kisa","twitter_site":"@dopingercom","twitter_misc":{"Written by":"Cihat K\u0131sa","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#article","isPartOf":{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift"},"author":{"name":"Cihat K\u0131sa","@id":"https:\/\/www.dopinger.com\/blog\/#\/schema\/person\/61b242b40bfd7d2f6928e29d289d384b"},"headline":"What Is CLS? How to Avoid Cumulative Layout Shift","datePublished":"2023-07-25T09:21:42+00:00","dateModified":"2024-08-21T12:34:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift"},"wordCount":3403,"commentCount":0,"publisher":{"@id":"https:\/\/www.dopinger.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage"},"thumbnailUrl":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg","articleSection":["Technical SEO"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift","url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift","name":"What Is Cumulative Layout Shift? How to Avoid It? - Dopinger","isPartOf":{"@id":"https:\/\/www.dopinger.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage"},"image":{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage"},"thumbnailUrl":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg","datePublished":"2023-07-25T09:21:42+00:00","dateModified":"2024-08-21T12:34:43+00:00","description":"Today, we will discuss all the details about what is cumulative layout shift and how to avoid it. Without further ado, let's start learning.","breadcrumb":{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#breadcrumb"},"mainEntity":[{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089051"},{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089763"},{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090263"},{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090745"},{"@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069091315"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#primaryimage","url":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg","contentUrl":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2023\/07\/what-is-cls-how-to-avoid-cumulative-layout-shift.jpg","width":1248,"height":832,"caption":"What Is CLS? How to Avoid Cumulative Layout Shift"},{"@type":"BreadcrumbList","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dopinger.com\/blog"},{"@type":"ListItem","position":2,"name":"What Is CLS? How to Avoid Cumulative Layout Shift"}]},{"@type":"WebSite","@id":"https:\/\/www.dopinger.com\/blog\/#website","url":"https:\/\/www.dopinger.com\/blog\/","name":"Dopinger Blog","description":"Dopinger","publisher":{"@id":"https:\/\/www.dopinger.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dopinger.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.dopinger.com\/blog\/#organization","name":"Dopinger Blog","url":"https:\/\/www.dopinger.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dopinger.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2022\/02\/dopinger-blog-logo.png","contentUrl":"https:\/\/storage.googleapis.com\/dopingcloud\/blog\/en\/2022\/02\/dopinger-blog-logo.png","width":157,"height":48,"caption":"Dopinger Blog"},"image":{"@id":"https:\/\/www.dopinger.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/dopingercom\/","https:\/\/x.com\/dopingercom","https:\/\/www.instagram.com\/dopinger_com\/","https:\/\/www.linkedin.com\/company\/dopingercom\/","https:\/\/tr.pinterest.com\/dopingercom\/_saved\/","https:\/\/www.youtube.com\/dopinger"]},{"@type":"Person","@id":"https:\/\/www.dopinger.com\/blog\/#\/schema\/person\/61b242b40bfd7d2f6928e29d289d384b","name":"Cihat K\u0131sa","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dopinger.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.dopinger.com\/blog\/wp-content\/uploads\/2022\/11\/cihat-kisa-96x96.png","contentUrl":"https:\/\/www.dopinger.com\/blog\/wp-content\/uploads\/2022\/11\/cihat-kisa-96x96.png","caption":"Cihat K\u0131sa"},"description":"I was born in a city in Turkey called Konya. When I was six, we have moved to Istanbul. Before moving to Istanbul, my childhood dream was to develop computer programs, websites, or games. After a few years, I started designing some websites and then learned web development to create something that matters. After my education, we found Jengal with my business partner and brother (A very talented software developer) to make real some of our shared dreams. Now, I'm the Co-Founder and Chief Executive Officer at Jengal Software.","sameAs":["https:\/\/instagram.com\/cihatkisacom?igshid=NmNmNjAwNzg=","https:\/\/www.linkedin.com\/in\/cihat-kisa-99b6384a\/","https:\/\/x.com\/cihat_kisa"],"url":"https:\/\/www.dopinger.com\/blog\/author\/cihatkisa"},{"@type":"Question","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089051","position":1,"url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089051","name":"How does CLS affect user experience?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"High CLS can lead to a poor user experience as it results in unexpected layout changes, potentially causing frustration, accidental clicks, and a higher bounce rate.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089763","position":2,"url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069089763","name":"What is the optimal CLS score to aim for?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The optimal score is as close to zero as possible, but Google recommends striving for a CLS score below 0.1 to be considered \"good.\"","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090263","position":3,"url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090263","name":"What are the common factors that cause a high CLS score?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"These can be unoptimized content (images, iframes), dynamic content, ads and embeds, web-based fonts, and third-party scripts that load asynchronously.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090745","position":4,"url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069090745","name":"How is the Cumulative Layout Shift calculated?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"It is calculated by summing the product of the Impact Fraction (how much content moves) and the Distance Fraction (how far the content moves) for all layout shift events.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069091315","position":5,"url":"https:\/\/www.dopinger.com\/blog\/what-is-cls-how-to-avoid-cumulative-layout-shift#faq-question-1701069091315","name":"How can I improve CLS on my website to enhance user experience and SEO?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Optimize your website's images, ads, and dynamic content to improve CLS, and monitor your CLS scores regularly. Prioritize a visually stable layout to provide a better user experience and boost your SEO efforts.\u00a0","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/posts\/18550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/comments?post=18550"}],"version-history":[{"count":18,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/posts\/18550\/revisions"}],"predecessor-version":[{"id":24136,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/posts\/18550\/revisions\/24136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/media\/18578"}],"wp:attachment":[{"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/media?parent=18550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/categories?post=18550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dopinger.com\/blog\/wp-json\/wp\/v2\/tags?post=18550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}