{"id":85704,"date":"2021-09-01T10:01:19","date_gmt":"2021-09-01T17:01:19","guid":{"rendered":"https:\/\/www.bruceclay.com\/?p=85704"},"modified":"2023-08-13T16:03:16","modified_gmt":"2023-08-13T23:03:16","slug":"core-web-vitals-cls","status":"publish","type":"post","link":"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/","title":{"rendered":"Core Web Vitals: Cumulative Layout Shift \u2013 What It Is and How to Improve It for SEO"},"content":{"rendered":"<p>With Google&#8217;s <a href=\"https:\/\/webmasters.googleblog.com\/2020\/05\/evaluating-page-experience.html\" target=\"_blank\" rel=\"noopener noreferrer\">Page Experience update<\/a> now rolled out, websites that are fine-tuned have some new ranking opportunities.<\/p>\n<p>In particular, websites can qualify for a ranking boost based on several new performance metrics Google calls \u201ccore web vitals.\u201d<\/p>\n<p>Core web vitals are a set of core webpage functionalities that impact user experience. They now play a part in strategic SEO and can impact how websites rank in Google.<\/p>\n<p>Google has defined three core web vitals:<\/p>\n<ul>\n<li>Largest Contentful Paint (LCP)<\/li>\n<li>First Input Delay (FID)<\/li>\n<li>Cumulative Layout Shift (CLS)<\/li>\n<\/ul>\n<p>This article is part of our series about Google\u2019s page experience update, and I&#8217;m updating it to reflect Google&#8217;s latest changes. Here I\u2019ll discuss cumulative layout shift or CLS:<\/p>\n<ul>\n<li><a href=\"#what-is-cumulative-layout-shift-cls\"><strong>What is CLS?<\/strong><\/a><\/li>\n<li><a href=\"#how-is-cumulative-layout-shift-cls-measured\"><strong>How do you measure CLS?<\/strong><\/a><\/li>\n<li><a href=\"#how-does-cumulative-layout-shift-cls-impact-seo\"><strong>How does CLS impact SEO?<\/strong><\/a><\/li>\n<li><a href=\"#how-do-I-improve-my-cumulative-layout-shift-cls-score\"><strong>How do I improve my CLS score?<\/strong><\/a><\/li>\n<li><a href=\"#faq-how-can-I-improve-my-websites-user-experience-seo-core-web-vitals\"><strong>FAQ: How can I improve my website&#8217;s user experience and SEO with Core Web Vitals?<\/strong><\/a><\/li>\n<\/ul>\n<h2><a id=\"what-is-cumulative-layout-shift-cls\"><\/a>What Is Cumulative Layout Shift (CLS)?<\/h2>\n<p>CLS measures the formatting changes to a webpage after the initial rendering in a browser, usually by the dynamic insertion of content above what is already being shown.<\/p>\n<p>It is generally annoying to be clicking on a link and have that link \u201cmove,\u201d resulting in a click to an unexpected location. This kind of instability of content on a webpage creates a bad user experience.<\/p>\n<p>Google discusses <a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noopener noreferrer\">CLS here<\/a>:<\/p>\n<blockquote><p><em>Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts\u2014a low CLS helps ensure that the page is delightful.<\/em><\/p><\/blockquote>\n<p>Unexpected page layout shifts hurt the user experience. One example is when a button or link shifts on the webpage, causing a person to click something else. This can be really bad if it means they accidentally made a purchase, as you can see in this <a href=\"https:\/\/storage.googleapis.com\/web-dev-assets\/layout-instability-api\/layout-instability2.webm\" target=\"_blank\" rel=\"noopener noreferrer\">demo from Google<\/a>:<\/p>\n<div class=\"responsive-video\"><\/div>\n<p>Importantly, Google <a href=\"https:\/\/web.dev\/cls\/#expected-vs.-unexpected-layout-shifts\" target=\"_blank\" rel=\"noopener noreferrer\">clarifies<\/a> that not all layout shifts are considered bad:<\/p>\n<blockquote><p><em>A layout shift is only bad if the user isn&#8217;t expecting it. On the other hand, layout shifts that occur in response to user interactions (clicking a link, pressing a button, typing in a search box and similar) are generally fine, as long as the shift occurs close enough to the interaction that the relationship is clear to the user.<\/em><\/p><\/blockquote>\n<p>Layout shifts that occur within 500 milliseconds of user input will have the hadRecentInput flag set so that they can be excluded from calculations.<\/p>\n<h2><a id=\"how-is-cumulative-layout-shift-cls-measured\"><\/a>How Is Cumulative Layout Shift (CLS) Measured?<\/h2>\n<p>CLS is measured by the total of all individual layout shift scores for every unexpected layout shift that occurs during a pageview&#8217;s worst &#8220;session window.&#8221;<\/p>\n<p>A session window is any 5-second span of shifts that occur while a user visits a page. Google looks for the 5-second interval that has the most shift penalties, and that\u2019s the score for that pageview.<\/p>\n<p>To calculate a layout shift score, Google multiplies the <strong>impact fraction<\/strong> and the <strong>distance fraction<\/strong>. I\u2019ll break these down.<\/p>\n<p><a href=\"https:\/\/web.dev\/cls\/#impact-fraction\" target=\"_blank\" rel=\"noopener noreferrer\">Impact fraction<\/a> is how much viewport area an unstable element takes up between two frames.<\/p>\n<p>In the example below, you can see that the element takes up 50% of the original viewport, but then is moved down by 25%. Between both frames, the element takes up 50% plus 25% of the viewport, causing the impact fraction to be 75%.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" class=\"aligncenter size-full wp-image-85706\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/cls-example-layout-shift-e1603215271862.png\" alt=\"Example CLS layout shift in viewport.\" \/><br \/>\n<em>Example of layout shift between two frames, Google Developers<\/em><\/p>\n<p><a href=\"https:\/\/web.dev\/cls\/#distance-fraction\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Distance fraction<\/strong><\/a> is the distance that an unstable element has moved. The example below shows that the element has moved 25% of the viewport height.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" class=\"aligncenter size-full wp-image-85707\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/cls-example-distance-shift-e1603215357134.png\" alt=\"Example CLS distance shift.\" \/><br \/>\n<em>Example of distance shift in the viewport, Google Developers<\/em><\/p>\n<p>So to sum up: CLS is measured by the layout shift score, which is calculated this way:<\/p>\n<p><strong><em>\u00a0\u00a0\u00a0\u00a0\u00a0Impact fraction * distance fraction = layout shift score<\/em><\/strong><\/p>\n<p>Taking the examples above, the calculation would go like so: 0.75 * 0.25 = 0.1875. Google says a webpage should maintain a CLS of less than 0.1 across all pages or page views on your site. This example would be over that goal, so it would score poorly.<\/p>\n<p><em>One illustration to give you a clearer idea of how CLS is scored:<\/em> If everything inside of the viewport shifted out of the viewport in a single frame, that would have a layout score of 1.0. (See other examples <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\/issues\/126\" target=\"_blank\" rel=\"noopener noreferrer\">on GitHub<\/a>.)<\/p>\n<p>The more elements you have on your page that shift in the viewport, the worse your score could be.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-85708\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/cls-scores-e1603215566588.png\" alt=\"Cumulative Layout Shift target scores.\" width=\"722\" height=\"209\" \/><br \/>\n<em>Google\u2019s CLS score target<\/em><\/p>\n<p>You can read more about the <a href=\"https:\/\/web.dev\/cls\/#layout-shift-score\" target=\"_blank\" rel=\"noopener noreferrer\">layout shift score here<\/a> and how Google defines its thresholds <a href=\"https:\/\/web.dev\/defining-core-web-vitals-thresholds\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<h2><a id=\"how-does-cumulative-layout-shift-cls-impact-seo\"><\/a>How Does Cumulative Layout Shift (CLS) Impact SEO?<\/h2>\n<p>As with the other core web vitals, CLS helps ensure that the page experience is smooth for your visitors \u2014 on both mobile and desktop.<\/p>\n<p>A good layout shift score can help ensure users don\u2019t get frustrated with your webpage, don\u2019t accidentally click and get taken to another page, and don\u2019t mistakenly make a purchase. A <a href=\"https:\/\/www.bruceclay.com\/blog\/post-click-seo-how-to-survive-googles-user-experience-focused-algorithm\/\">good user experience<\/a> helps you achieve all the outcomes we like to see in SEO: rankings, traffic, conversions and revenue.<\/p>\n<p>According to <a href=\"https:\/\/www.screamingfrog.co.uk\/passing-the-cwv-assessment\/\" target=\"_blank\" rel=\"noopener noreferrer\">Screaming Frog research<\/a>, URLs in Position 1 of the search results were 10% more likely to pass the core web vitals assessment than URLs in Position 9. Of course, this data reflected existing pages \u2014 which might not have been fine-tuned to comply with core web vitals yet \u2014 before these factors applied to the ranking algorithms.<\/p>\n<p>Looking at CLS, less than half (46%) of mobile URLs and less than half (47%) of desktop URLs had \u201cgood\u201d CLS scores. The average CLS score was 0.29 on mobile and 0.25 on desktop. In other words, <strong>there is room for CLS improvement on most sites<\/strong>.<\/p>\n<p>Screaming Frog segmented pass rates by position, and found a decline in the percentage of \u201cgood\u201d URLs as you move down the positions on the search results page. The following example is mobile results, but they also graphed the data for desktop.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"384\" class=\"aligncenter size-full wp-image-85709\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/mobile-cls-data-by-position-e1603215670362.png\" alt=\"Mobile CLS Classification by Ranking Position data.\" \/><br \/>\n<em>\u201cHow Many Sites Pass the Core Web Vitals Assessment?\u201d screamingfrog.co.uk<\/em><\/p>\n<h2><a id=\"how-do-I-improve-my-cumulative-layout-shift-cls-score\"><\/a>How Do I Improve My Cumulative Layout Shift (CLS) Score?<\/h2>\n<p>Google offers <a href=\"https:\/\/web.dev\/cls\/#how-to-measure-cls\" target=\"_blank\" rel=\"noopener noreferrer\">lab tools and field tools<\/a> to help you measure, then optimize your CLS score. For CLS, lab tools may not be as useful as the real data captured in the wild for your webpages.<\/p>\n<p>Tools provided include:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome User Experience Report<\/a> (field)<\/li>\n<li><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener noreferrer\">PageSpeed Insights<\/a> (lab and field)<\/li>\n<li><a href=\"https:\/\/support.google.com\/webmasters\/answer\/9205520\" target=\"_blank\" rel=\"noopener noreferrer\">Search Console (Core Web Vitals report)<\/a> (field)<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome DevTools<\/a> (lab)<\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lighthouse<\/a> (lab)<\/li>\n<li><a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebPageTest<\/a> (lab)<\/li>\n<li><a href=\"https:\/\/waterfaller.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">WaterFaller.dev (lab)<\/a><\/li>\n<\/ul>\n<p>Another way to measure CLS uses the web-vitals JavaScript library. You can learn more about that <a href=\"https:\/\/web.dev\/cls\/#measure-cls-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<p><strong>Common causes of layout shifts include:<\/strong><\/p>\n<ul>\n<li>Images without dimensions<\/li>\n<li>Ads, video and other embedded objects or iframes without dimensions<\/li>\n<li>Dynamically injected content<\/li>\n<li>Late-loading CSS where styles are applied after other items have been loaded<\/li>\n<li>Web fonts causing flashes of invisible or unstyled text<\/li>\n<li>Elements on the page that wait for other items to be loaded over the network before appearing<\/li>\n<li>Animating elements by &#8220;height&#8221; and &#8220;width&#8221; instead of CSS\u2019s &#8220;transform: scale()&#8221;<\/li>\n<li>Animating elements by &#8220;top&#8221;, &#8220;right&#8221;, &#8220;bottom&#8221; or &#8220;left&#8221; instead of CSS\u2019s &#8220;transform: translate()&#8221;<\/li>\n<\/ul>\n<p><strong>Basic principles that will improve CLS include:<\/strong><\/p>\n<ol>\n<li>Always use size attributes for images, videos and other embedded items or iframes. If an element is dynamically loaded, use CSS to style any container elements to the same size or aspect ratio before the content is loaded. Then, when the content is loaded into those container elements, the page will not shift.<\/li>\n<li>Never insert content dynamically above existing content.<\/li>\n<li>If using CSS to animate elements, prefer \u201ctransform\u201d animations.<\/li>\n<\/ol>\n<p>And check out this video about CLS from Google Chrome Developers on YouTube:<\/p>\n<div class=\"responsive-video\"><\/div>\n<p><strong><em>Want more in-depth info? Watch our on-demand webinar <a href=\"https:\/\/www.bruceclay.com\/webinar-replay-3-expert-tips-to-improve-core-web-vitals\/\">3 Expert Tips to Improve Core Web Vitals<\/a> including the extended Q&amp;A at the end.<\/em><\/strong><\/p>\n<p>Read our entire page experience series for more information on this ranking update:<\/p>\n<ol>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-algorithm-update\/\">What&#8217;s the Page Experience Update?<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-mobile-friendly-site\/\">How to Make a Mobile-Friendly Site<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-intrusive-interstitials\/\">Intrusive Interstitials &amp; Why They&#8217;re Bad for SEO<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-https\/\">HTTPS for Users and Ranking<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/page-experience-core-web-vitals-overview\/\">Core Web Vitals Overview<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-lcp\/\">Core Web Vitals: LCP (Largest Contentful Paint)<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-fid\/\">Core Web Vitals: FID (First Input Delay)<\/a><\/li>\n<li><a href=\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/\">Core Web Vitals: CLS (Cumulative Layout Shift)<\/a><\/li>\n<\/ol>\n<figure id=\"attachment_98363\" aria-describedby=\"caption-attachment-98363\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a class=\"no-blue-link\" href=\"https:\/\/www.bruceclay.com\/seo\/googles-page-experience-update\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98363 size-thumbnail\" src=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2021\/06\/googles-page-experience-ebook-e1622659330585.png\" alt=\"E-book on Page Experience update.\" width=\"300\" height=\"387\" \/><\/a><figcaption id=\"caption-attachment-98363\" class=\"wp-caption-text\"><strong>Click to get this entire series as a <a href=\"https:\/\/www.bruceclay.com\/seo\/googles-page-experience-update\/\" rel=\"noopener\">printable e-book<\/a>.<\/strong><\/figcaption><\/figure>\n<h3><a id=\"faq-how-can-I-improve-my-websites-user-experience-seo-core-web-vitals\"><\/a>FAQ: How can I improve my website&#8217;s user experience and SEO with Core Web Vitals?<\/h3>\n<p>User experience and SEO have become the twin pillars of successful online ventures. Core Web Vitals, introduced by Google, guide websites toward better performance and visibility. These metrics, comprising Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS), quantify crucial aspects of user experience.<\/p>\n<p>LCP gauges loading speed, FID measures interactivity, and CLS evaluates visual stability. Improving these metrics not only ensures a seamless browsing experience but also holds the potential to influence search rankings positively. Users appreciate websites that load swiftly, respond promptly, and maintain visual consistency, ultimately leading to lower bounce rates and prolonged engagement.<\/p>\n<p>To improve Core Web Vitals, consider optimizing your images and videos, leveraging browser caching, and employing content delivery networks (CDNs) for faster loading times. Minimize server response times by employing efficient hosting and coding practices. Moreover, prioritize the rendering of above-the-fold content to prevent layout shifts, enhancing both user satisfaction and SEO performance.<\/p>\n<p>Focus on optimizing server and network performance, using browser caching effectively, and utilizing modern image formats to balance content richness and loading speed. Employ lazy loading for images and scripts to load resources only when users require them, contributing to faster initial page loading and a better overall user experience.<\/p>\n<p>Finally, adopting a mobile-first design approach and leveraging responsive design principles are key strategies for improving Core Web Vitals. With a substantial portion of online traffic originating from mobile devices, catering to mobile users effectively can substantially enhance both user experience and search rankings.<\/p>\n<p>Core Web Vitals offer a strategic advantage to website owners and digital marketers aiming to excel in user experience and SEO. By understanding and optimizing these metrics, websites can provide faster, more interactive, and visually stable experiences that resonate with users and search engines alike. Elevating Core Web Vitals creates a win-win scenario, bolstering website performance and driving organic traffic.<\/p>\n<p><strong>Step-by-Step Procedure to Improve User Experience and SEO with Core Web Vitals:<\/strong><\/p>\n<ol>\n<li>Assess Current Metrics: Analyze your website&#8217;s existing Core Web Vitals metrics using tools like PageSpeed Insights and Google Search Console.<\/li>\n<li>Prioritize Key Metrics: Identify the metric (LCP, FID, or CLS) that requires the most improvement based on your analysis.<\/li>\n<li>Optimize Images and Videos: Compress images and use modern formats to reduce file sizes without compromising quality. Consider lazy loading for images and videos.<\/li>\n<li>Leverage Browser Caching: Configure your server to set appropriate resource caching headers, reducing loading times for returning visitors.<\/li>\n<li>Utilize CDNs: Implement a content delivery network (CDN) to distribute resources across multiple servers, enhancing loading speed.<\/li>\n<li>Optimize Server Response Times: Opt for reliable hosting providers with fast server response times. Minimize server-side processing delays.<\/li>\n<li>Responsive Design: Ensure your website is responsive and provides a seamless experience across various screen sizes and devices.<\/li>\n<li>Mobile-First Approach: Prioritize mobile users by designing your website with a mobile-first mindset.<\/li>\n<li>Efficient Coding: Optimize your code by minimizing unnecessary scripts and stylesheets. Use browser caching for code files.<\/li>\n<li>Minimize Third-Party Scripts: Limit the use of third-party scripts that might impact page loading and interactivity.<\/li>\n<li>Critical Rendering Path: Prioritize rendering of above-the-fold content to prevent layout shifts during page loading.<\/li>\n<li>Reduce Server Requests: Minimize the number of server requests by combining CSS and JavaScript files when possible.<\/li>\n<li>Content Delivery Networks: Utilize CDNs to distribute content across various servers, reducing latency and improving loading speed.<\/li>\n<li>Eliminate Render-Blocking Resources: Identify and eliminate resources that prevent the initial rendering of the page.<\/li>\n<li>Implement Lazy Loading: Use lazy loading to load images and resources only when users scroll to them, improving initial page loading.<\/li>\n<li>Use Responsive Images: Employ responsive images that adapt to the user&#8217;s device and screen size, optimizing visual appeal and loading speed.<\/li>\n<li>Continuous Monitoring: Regularly monitor and analyze your website&#8217;s Core Web Vitals metrics, making necessary adjustments.<\/li>\n<li>Regular Updates: Keep your website and its components updated to benefit from performance enhancements.<\/li>\n<li>Testing and Iteration: Test different strategies and continually iterate to find the optimal combination for improving Core Web Vitals.<\/li>\n<li>Measure and Adjust: Monitor your optimizations&#8217; impact on user experience and SEO rankings. Adjust your strategies based on results.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO in Google\u2019s 2021 page experience ranking update.<\/p>\n","protected":false},"author":35,"featured_media":85714,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[4],"tags":[1232,1660,1653,1114,1659,1661],"acf":[],"yoast_head":"<title>BruceClay - How to Improve Core Web Vitals \u201cCLS\u201d for SEO<\/title>\n<meta name=\"description\" content=\"Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO for Google\u2019s 2021 Page Experience ranking update.\" \/>\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.bruceclay.com\/blog\/core-web-vitals-cls\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Improve Core Web Vitals \u201cCLS\u201d for SEO\" \/>\n<meta property=\"og:description\" content=\"Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO for Google\u2019s 2021 Page Experience ranking update.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/\" \/>\n<meta property=\"og:site_name\" content=\"Bruce Clay, Inc.\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-01T17:01:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-13T23:03:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/core-web-vitals-cls-1200px.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bruce Clay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/core-web-vitals-cls-1024px.png\" \/>\n<meta name=\"twitter:creator\" content=\"@bruceclayinc\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bruce Clay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/\",\"url\":\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/\",\"name\":\"How to Improve Core Web Vitals \u201cCLS\u201d for SEO\",\"isPartOf\":{\"@id\":\"https:\/\/www.bruceclay.com\/#website\"},\"datePublished\":\"2021-09-01T17:01:19+00:00\",\"dateModified\":\"2023-08-13T23:03:16+00:00\",\"author\":{\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b\"},\"description\":\"Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO for Google\u2019s 2021 Page Experience ranking update.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bruceclay.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals: Cumulative Layout Shift \u2013 What It Is and How to Improve It for SEO\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bruceclay.com\/#website\",\"url\":\"https:\/\/www.bruceclay.com\/\",\"name\":\"Bruce Clay, Inc.\",\"description\":\"SEO and Internet Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bruceclay.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b\",\"name\":\"Bruce Clay\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bruceclay.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g\",\"caption\":\"Bruce Clay\"},\"description\":\"Bruce Clay is founder and president of Bruce Clay Inc., a global digital marketing firm providing search engine optimization, pay-per-click, social media marketing, SEO-friendly web architecture, and SEO tools and education. Connect with him on LinkedIn or through the BruceClay.com website.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/bruce-clay\/\",\"https:\/\/twitter.com\/bruceclayinc\"],\"url\":\"https:\/\/www.bruceclay.com\/blog\/author\/bclay\/\"}]}<\/script>","yoast_head_json":{"title":"BruceClay - How to Improve Core Web Vitals \u201cCLS\u201d for SEO","description":"Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO for Google\u2019s 2021 Page Experience ranking update.","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.bruceclay.com\/blog\/core-web-vitals-cls\/","og_locale":"en_US","og_type":"article","og_title":"How to Improve Core Web Vitals \u201cCLS\u201d for SEO","og_description":"Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO for Google\u2019s 2021 Page Experience ranking update.","og_url":"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/","og_site_name":"Bruce Clay, Inc.","article_published_time":"2021-09-01T17:01:19+00:00","article_modified_time":"2023-08-13T23:03:16+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/core-web-vitals-cls-1200px.png","type":"image\/png"}],"author":"Bruce Clay","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.bruceclay.com\/wp-content\/uploads\/2020\/10\/core-web-vitals-cls-1024px.png","twitter_creator":"@bruceclayinc","twitter_misc":{"Written by":"Bruce Clay","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/","url":"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/","name":"How to Improve Core Web Vitals \u201cCLS\u201d for SEO","isPartOf":{"@id":"https:\/\/www.bruceclay.com\/#website"},"datePublished":"2021-09-01T17:01:19+00:00","dateModified":"2023-08-13T23:03:16+00:00","author":{"@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b"},"description":"Find out how cumulative layout shift (CLS) contributes to a good user experience and SEO for Google\u2019s 2021 Page Experience ranking update.","breadcrumb":{"@id":"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bruceclay.com\/blog\/core-web-vitals-cls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bruceclay.com\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals: Cumulative Layout Shift \u2013 What It Is and How to Improve It for SEO"}]},{"@type":"WebSite","@id":"https:\/\/www.bruceclay.com\/#website","url":"https:\/\/www.bruceclay.com\/","name":"Bruce Clay, Inc.","description":"SEO and Internet Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bruceclay.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/efe2253985cb608dfc329890aec6387b","name":"Bruce Clay","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bruceclay.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6ee3958a961521adf7b1d2bfe928dcb5?s=96&d=retro&r=g","caption":"Bruce Clay"},"description":"Bruce Clay is founder and president of Bruce Clay Inc., a global digital marketing firm providing search engine optimization, pay-per-click, social media marketing, SEO-friendly web architecture, and SEO tools and education. Connect with him on LinkedIn or through the BruceClay.com website.","sameAs":["https:\/\/www.linkedin.com\/in\/bruce-clay\/","https:\/\/twitter.com\/bruceclayinc"],"url":"https:\/\/www.bruceclay.com\/blog\/author\/bclay\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/85704"}],"collection":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/comments?post=85704"}],"version-history":[{"count":27,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/85704\/revisions"}],"predecessor-version":[{"id":197883,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/posts\/85704\/revisions\/197883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/media\/85714"}],"wp:attachment":[{"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/media?parent=85704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/categories?post=85704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bruceclay.com\/wp-json\/wp\/v2\/tags?post=85704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}