{"id":4432,"date":"2021-02-15T20:51:21","date_gmt":"2021-02-15T15:21:21","guid":{"rendered":"https:\/\/seoneurons.com\/blog\/?p=4432"},"modified":"2023-05-29T00:59:37","modified_gmt":"2023-05-28T19:29:37","slug":"cumulative-layout-shift","status":"publish","type":"core-web-vitals","link":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/","title":{"rendered":"What is Cumulative Layout Shift CLS? And how to fix it?"},"content":{"rendered":"\n<p>The Cumulative Layout Shift denotes instability in the Layout of a website, where a lower score means higher stability and vice versa. <strong>This article will explain how to fix the CLS issue on your website<\/strong> and improve the ranking of your website in Google results.<\/p><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">In this guide, we\u2019ll walk through:<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #494949;color:#494949\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #494949;color:#494949\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#what-is-cumulative-layout-shift\" >What is Cumulative Layout Shift?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#inspect-elements-that-are-causing-the-cls-issue\" >Inspect elements that are causing the CLS issue.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#how-cls-impacts-search-engine-optimization\" >How CLS impacts Search Engine Optimization?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#how-to-improve-the-cumulative-layout-shift-score\" >How to Improve the Cumulative Layout Shift Score?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#declare-the-height-and-width-of-each-media-item\" >Declare the height and width of each media item.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#google-adsense-ads-causing-high-cls-score\" >Google Adsense Ads Causing High CLS score?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#web-fonts-causing-a-delay-in-page-visibility\" >Web Fonts causing a delay in page visibility<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#final-words\" >Final Words<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n\n<p class=\"has-background\" style=\"background-color:#e9ebee\">Google now considers core web vitals as a ranking factor, and CLS is a part of it. Hence, stabling the Layout will not only increase PageSpeed Insights score but also be beneficial for the SEO of the website.<\/p>\n\n\n\n<p>An unstable website spoils the user experience, and to tackle this, the Core Web Vitals of Google came into the game. The core web vitals are a combination of matrices used to enhance the user experience, and CLS is a part of it. From mid-June 2021, core web vitals will also be a factor for search results. From that, we can say the CLS is also essential for the SEO of the website.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png\" alt=\"Google Cumulative Layout Shift\" class=\"wp-image-4529\" srcset=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png 1280w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift-300x169.png 300w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift-1024x576.png 1024w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift-768x432.png 768w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift-390x220.png 390w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><figcaption>Cumulative Layout Shift<\/figcaption><\/figure><\/div>\n\n\n\n<p>This tutorial article will talk about what this CLS is and how it impacts the user experience. We will also discuss how to eliminate CLS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-cumulative-layout-shift\"><span class=\"ez-toc-section\" id=\"what-is-cumulative-layout-shift\"><\/span>What is Cumulative Layout Shift?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The cumulative Layout Shift score denotes the stability of a website. You can calculate the CLS score using <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a> from Google. The tool will display the CLS score, where Zero scores indicate a highly stable website and a higher score denotes higher instability. <\/p>\n\n\n\n<p>To address an issue, we&#8217;ve to understand the actual problems. As the name suggests, Layout Shift means something is shifting. The Layout of a website doesn&#8217;t behave as expected by the user.<\/p>\n\n\n\n<p>As you already know, Google&#8217;s focus is always the user experience. That&#8217;s why Google will punish high CLS score websites through this core web vitals update.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/cls-before-and-after.png\" alt=\"Before and After CLS\" class=\"wp-image-4527\" srcset=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/cls-before-and-after.png 1280w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/cls-before-and-after-300x169.png 300w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/cls-before-and-after-1024x576.png 1024w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/cls-before-and-after-768x432.png 768w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/cls-before-and-after-390x220.png 390w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><figcaption>Before and After CLS<\/figcaption><\/figure><\/div>\n\n\n\n<p>In the above image, you can see the change in layout behavior in its lifespan. Initially, the content WordPress appeared near the top, and later it shifted to the bottom.<\/p>\n\n\n\n<p>This layout change may result from ads or images not being declared correctly in the web page&#8217;s CSS file. First, we have to inspect the elements that cause the CLS issue to solve this issue.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-inspect-elements-that-are-causing-the-cls-issue\"><span class=\"ez-toc-section\" id=\"inspect-elements-that-are-causing-the-cls-issue\"><\/span>Inspect elements that are causing the CLS issue.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To inspect the elements causing the CLS issue, we&#8217;ve to perform a PageSpeed Insights test of the webpage. And the test results will look similar to the following.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"997\" height=\"1130\" src=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/06\/inspect-cls-issue.jpg\" alt=\"Google CLS inspect data\" class=\"wp-image-6602\" srcset=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/06\/inspect-cls-issue.jpg 997w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/06\/inspect-cls-issue-768x870.jpg 768w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/figure><\/div>\n\n\n\n<p>In the above results, you can filter the results for the CLS issue and then find the large layout shifts option. Here you can see elements causing the CLS issue on the webpage. You can try defining block sizes using CSS.<\/p>\n\n\n\n<div class=\"wp-block-group has-background\" style=\"background:linear-gradient(138deg,rgb(238,238,238) 0%,rgb(224,247,255) 100%)\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"h-how-cls-impacts-search-engine-optimization\"><span class=\"ez-toc-section\" id=\"how-cls-impacts-search-engine-optimization\"><\/span>How CLS impacts Search Engine Optimization?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The core web vitals now directly impact the ranking position in search results. And also, the Cumulative Layout Shift disturbs the user experience, leading to an increased bounce rate or <a href=\"https:\/\/seoneurons.com\/blog\/what-is-pogo-sticking-latest-update\/\">pogo-sticking<\/a>.<\/p>\n\n\n\n<p>Also, the Google search console calculates the total CLS of the webpage during its lifetime. These web vitals directly impact page SEO from mid-June 2021. <a href=\"https:\/\/developers.google.com\/search\/blog\/2020\/11\/timing-for-page-experience\" target=\"_blank\" rel=\"noreferrer noopener\">Timing for bringing page experience to Google Search<\/a>.<\/p>\n\n\n\n<p>The core web vitals consists largest contentful paint, First Input Delay, Cumulative Layout Shift (CLS). All these factors will be enforced as search engine ranking factors from mid-June2021.<\/p>\n\n\n\n<p>As you already know, the best user experience is one of the significant parts of web page SEO.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-improve-the-cumulative-layout-shift-score\"><span class=\"ez-toc-section\" id=\"how-to-improve-the-cumulative-layout-shift-score\"><\/span>How to Improve the Cumulative Layout Shift Score?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>CLS score can be as low as 0 and can be very high. A website CLS can be checked by performing Google Pagespeed Insights Test. The CLS score is further divided according to its score.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"486\" height=\"337\" src=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/Cumulative-Layout-Shift.png\" alt=\"CLS score card\" class=\"wp-image-4528\" srcset=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/Cumulative-Layout-Shift.png 486w, https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/Cumulative-Layout-Shift-300x208.png 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Best Practice \u2013 CLS score 0 to 0.1,<\/li><li>Needs improvement \u2013 Score between 0.1 and 0.25,<\/li><li>Poor \u2013 CLS above 0.25.<\/li><\/ul>\n\n\n\n<p>So let&#8217;s understand how we can achieve a very low or zero CLS score for our website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-declare-the-height-and-width-of-each-media-item\"><span class=\"ez-toc-section\" id=\"declare-the-height-and-width-of-each-media-item\"><\/span>Declare the height and width of each media item.<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>There may be images or other media available on your website that may be culprits for the high CLS score of the website. To avoid this, you can declare the height and width of each media item used on the website. This will reserve a block for that media item and doesn&#8217;t cause any shift in the total LaLayoutf the website.<\/p>\n\n\n\n<p>E.g. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"\/image-url.png\" alt=\"alternative text for image\" title=\"title of the image\" width=\"960px\" height=\"360px\" \/&gt;<\/code><\/pre>\n\n\n\n<p>The above example tells you how to load an image on the webpage by reserving its block of 960x360px. Hence there will be no shift in the website layout structure.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-google-adsense-ads-causing-high-cls-score\"><span class=\"ez-toc-section\" id=\"google-adsense-ads-causing-high-cls-score\"><\/span>Google Adsense Ads Causing High CLS score?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Dynamically injected content can significantly shift the web page&#8217;s initially loaded content. For example, the Google Adsense ads unit above the fold section causes a CLS issue because the Adsense ad unit injects dynamic content and causes a massive shift in the Layout, increasing the CLS score of the website.<\/p>\n\n\n\n<p>You have two options to solve this issue, first is very simple to avoid the dynamic content like the Adsense Ads unit above the fold section. And the second is to reserve a block space using CSS. Try using the following structure for the ad unit.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n.sn_responsive_1 { width: 320px; height: 250px;}\n@media(min-width:400px) {.sn_responsive_1 {width: 336px; height: 280px;}}\n@media(min-width:1100px) {.sn_responsive_1 {width: 728px;height: 90px;}}\n&lt;\/style&gt;\n\n&lt;script async src='https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js'&gt;&lt;\/script&gt;\n&lt;ins class=\"adsbygoogle sn_responsive_1\" style=\"display:inline-block\" data-ad-client=\"<span class=\"has-inline-color has-vivid-red-color\">ca-pub-XXXXXXXXXXX<\/span>\" data-ad-slot=\"<span class=\"has-inline-color has-vivid-red-color\">XXXXXX<\/span>\"&gt;&lt;\/ins&gt;\n&lt;script&gt;(adsbygoogle = window.adsbygoogle || &#91;]).push({});&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>You can replace the above code with the existing Adsense ads unit. This method follows the Adsense policy; therefore, you can implement it. For detailed guided, read <a href=\"https:\/\/seoneurons.com\/blog\/adsense\/customize-ads-size\/\">responsive Adsense ads unit using this method<\/a>.<\/p>\n\n\n\n<p><span data-preserver-spaces=\"true\">If your website has more than 10k sessions per month, then there is a must-try\u00a0opportunity\u00a0for you of<a href=\"https:\/\/ezoic.com\/?tap_a=6182-5778c2&amp;tap_s=1870499-8abd46\"> Ezoic<\/a>. It can boost Adsense earnings by 150 to 300%. Adsense has a monopoly over the ads. Ezoic will make a completion and boost Adsense earnings.<\/span><\/p>\n\n\n\n<p>Google Adsense also slows down your website and can cause <a href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/largest-contentful-paint\/\">LCP<\/a> issues, follow this method to <a href=\"https:\/\/seoneurons.com\/blog\/adsense\/adsense-ads-website-speed-issue-solved\/\">speed up the website even after using Adsense. <\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-web-fonts-causing-a-delay-in-page-visibility\"><span class=\"ez-toc-section\" id=\"web-fonts-causing-a-delay-in-page-visibility\"><\/span>Web Fonts causing a delay in page visibility<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A website that uses a lot of font style will always get a high CLS score. This is due to the font load time from the cloud server. To avoid this, one can use the <mark style=\"background-color:#000000\" class=\"has-inline-color has-white-color\">font: display<\/mark> in CSS for the fonts.<\/p>\n\n\n\n<p>You can use the rel=preload in the website&#8217;s header section to load the font while connecting to the server so that the loaded fonts can paint the text without any delay.<\/p>\n\n\n\n<p>Suppose you&#8217;re using the Roboto family of Google fonts on your website. You can use<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\"&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>@font-face {\n  font-family: 'Roboto';\n  font-style: normal;\n  font-weight: 100;\n  <span class=\"has-inline-color has-vivid-red-color\">font-display: swap;<\/span>\n  src: url(https:\/\/fonts.gstatic.com\/s\/roboto\/v27\/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\n}<\/code><\/pre>\n\n\n\n<p>This will enable the browser to paint the Layout of the page as soon as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-final-words\"><span class=\"ez-toc-section\" id=\"final-words\"><\/span>Final Words<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This article discussed Google CLS, how different elements cause CLS issues, and solutions. The above solution will help you in getting a zero CLS score. Follow all steps correctly, and you&#8217;ll not need to follow any other trick.<\/p>\n\n\n\n<p>If you&#8217;ve any feedback, doubt, or query, please ask in the comment section provided below. Thank You!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Cumulative Layout Shift denotes instability in the Layout of a website, where a lower score means higher stability and vice versa. This article will explain how to fix the CLS issue on your website and improve the ranking of your website in Google results. Google now considers core web vitals as a ranking factor, &hellip;<\/p>\n","protected":false},"author":2,"featured_media":4529,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"parentpage":[954],"class_list":["post-4432","core-web-vitals","type-core-web-vitals","status-publish","format-standard","has-post-thumbnail","hentry","parentpage-core-web-vitals"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is Cumulative Layout Shift CLS? And how to fix it? - SEO Neurons<\/title>\n<meta name=\"description\" content=\"This tutorial article will discuss what this Cumulative Layout Shift is and How to Solve the Google CLS issue for your website or blog.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/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 CLS? And how to fix it?\" \/>\n<meta property=\"og:description\" content=\"This tutorial article will discuss what this Cumulative Layout Shift is and How to Solve the Google CLS issue for your website or blog.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/\" \/>\n<meta property=\"og:site_name\" content=\"SEO Neurons\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SEONeuronsAgency\/\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-28T19:29:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@SEONeurons\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/\",\"url\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/\",\"name\":\"What is Cumulative Layout Shift CLS? And how to fix it? - SEO Neurons\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/what-is-cumulative-layout-shift.png\",\"datePublished\":\"2021-02-15T15:21:21+00:00\",\"dateModified\":\"2023-05-28T19:29:37+00:00\",\"description\":\"This tutorial article will discuss what this Cumulative Layout Shift is and How to Solve the Google CLS issue for your website or blog.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/#primaryimage\",\"url\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/what-is-cumulative-layout-shift.png\",\"contentUrl\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/what-is-cumulative-layout-shift.png\",\"width\":1280,\"height\":720,\"caption\":\"what-is-cumulative-layout-shift\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/core-web-vitals\\\/cumulative-layout-shift\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/seoneurons.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is Cumulative Layout Shift CLS? And how to fix it?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/\",\"name\":\"SEO Neurons\",\"description\":\"Create, Optimize Website and Drive More Organic Traffic\",\"publisher\":{\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/#organization\"},\"alternateName\":\"SEO Neurons\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/#organization\",\"name\":\"SEO Neurons\",\"alternateName\":\"SEO Neurons\",\"url\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/seoneurons-logo.svg\",\"contentUrl\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/seoneurons-logo.svg\",\"width\":1,\"height\":1,\"caption\":\"SEO Neurons\"},\"image\":{\"@id\":\"https:\\\/\\\/seoneurons.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/SEONeuronsAgency\\\/\",\"https:\\\/\\\/x.com\\\/SEONeurons\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/seoneurons\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/SEONeurons\",\"https:\\\/\\\/www.instagram.com\\\/seo_neurons\\\/\",\"https:\\\/\\\/t.me\\\/SEONeurons\"],\"legalName\":\"SEO Neurons\",\"foundingDate\":\"2021-01-21\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1\",\"maxValue\":\"10\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is Cumulative Layout Shift CLS? And how to fix it? - SEO Neurons","description":"This tutorial article will discuss what this Cumulative Layout Shift is and How to Solve the Google CLS issue for your website or blog.","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:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/","og_locale":"en_US","og_type":"article","og_title":"What is Cumulative Layout Shift CLS? And how to fix it?","og_description":"This tutorial article will discuss what this Cumulative Layout Shift is and How to Solve the Google CLS issue for your website or blog.","og_url":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/","og_site_name":"SEO Neurons","article_publisher":"https:\/\/www.facebook.com\/SEONeuronsAgency\/","article_modified_time":"2023-05-28T19:29:37+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@SEONeurons","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/","url":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/","name":"What is Cumulative Layout Shift CLS? And how to fix it? - SEO Neurons","isPartOf":{"@id":"https:\/\/seoneurons.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#primaryimage"},"image":{"@id":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png","datePublished":"2021-02-15T15:21:21+00:00","dateModified":"2023-05-28T19:29:37+00:00","description":"This tutorial article will discuss what this Cumulative Layout Shift is and How to Solve the Google CLS issue for your website or blog.","breadcrumb":{"@id":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#primaryimage","url":"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png","contentUrl":"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2021\/02\/what-is-cumulative-layout-shift.png","width":1280,"height":720,"caption":"what-is-cumulative-layout-shift"},{"@type":"BreadcrumbList","@id":"https:\/\/seoneurons.com\/blog\/core-web-vitals\/cumulative-layout-shift\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/seoneurons.com\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/seoneurons.com\/blog\/"},{"@type":"ListItem","position":3,"name":"What is Cumulative Layout Shift CLS? And how to fix it?"}]},{"@type":"WebSite","@id":"https:\/\/seoneurons.com\/blog\/#website","url":"https:\/\/seoneurons.com\/blog\/","name":"SEO Neurons","description":"Create, Optimize Website and Drive More Organic Traffic","publisher":{"@id":"https:\/\/seoneurons.com\/blog\/#organization"},"alternateName":"SEO Neurons","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/seoneurons.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/seoneurons.com\/blog\/#organization","name":"SEO Neurons","alternateName":"SEO Neurons","url":"https:\/\/seoneurons.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/seoneurons.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2023\/06\/seoneurons-logo.svg","contentUrl":"https:\/\/seoneurons.com\/blog\/wp-content\/uploads\/2023\/06\/seoneurons-logo.svg","width":1,"height":1,"caption":"SEO Neurons"},"image":{"@id":"https:\/\/seoneurons.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SEONeuronsAgency\/","https:\/\/x.com\/SEONeurons","https:\/\/www.linkedin.com\/company\/seoneurons","https:\/\/www.youtube.com\/c\/SEONeurons","https:\/\/www.instagram.com\/seo_neurons\/","https:\/\/t.me\/SEONeurons"],"legalName":"SEO Neurons","foundingDate":"2021-01-21","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1","maxValue":"10"}}]}},"_links":{"self":[{"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/core-web-vitals\/4432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/core-web-vitals"}],"about":[{"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/types\/core-web-vitals"}],"author":[{"embeddable":true,"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/comments?post=4432"}],"version-history":[{"count":0,"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/core-web-vitals\/4432\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/media\/4529"}],"wp:attachment":[{"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/media?parent=4432"}],"wp:term":[{"taxonomy":"parentpage","embeddable":true,"href":"https:\/\/seoneurons.com\/blog\/wp-json\/wp\/v2\/parentpage?post=4432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}