{"id":23768,"date":"2020-09-28T11:35:43","date_gmt":"2020-09-28T16:35:43","guid":{"rendered":"https:\/\/www.mediavine.com\/?p=23768"},"modified":"2021-09-02T12:05:58","modified_gmt":"2021-09-02T17:05:58","slug":"cls-solving-for-cumulative-layout-shift","status":"publish","type":"post","link":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/","title":{"rendered":"CLS: Solving for Cumulative Layout Shift"},"content":{"rendered":"\r\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0\">\r\n<article class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\r\n<section class=\"wp-block-group alignfull is-style-beige has-global-padding is-layout-constrained wp-container-core-group-is-layout-772205c6 wp-block-group-is-layout-constrained is-style-beige--1\" style=\"padding-top:var(--wp--preset--spacing--50)\">\r\n<header class=\"wp-block-group c-breadcrumbs aligngrid has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-61973aa6 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0\">\r\n<header class=\"wp-block-group aligngrid is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-d68226ec wp-block-group-is-layout-flex\" style=\"margin-top:0;margin-bottom:var(--wp--preset--spacing--30)\">\r\n<figure class=\"wp-block-image size-large is-resized\" style=\"margin-bottom:5px\"><img decoding=\"async\" src=\"https:\/\/mediavine-dev.d1.moderntribe.qa\/wp-content\/uploads\/2025\/10\/chevron-left2.svg\" alt=\"\" class=\"wp-image-542\" style=\"aspect-ratio:9\/16;object-fit:contain;width:auto;height:20px\"\/><\/figure>\r\n\r\n\r\n\r\n<p class=\"is-style-small is-style-small--2\"><a href=\"\/blog\/\">Back to Blog<\/a><\/p>\r\n<\/header>\r\n\r\n\r\n\r\n<hr class=\"wp-block-separator has-alpha-channel-opacity aligngrid\" style=\"margin-top:0;margin-bottom:0\"\/>\r\n<\/header>\r\n<\/section>\r\n\r\n\r\n\r\n<section class=\"wp-block-group alignfull is-style-default has-neutral-20-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-bottom:var(--wp--preset--spacing--70);padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--60)\"><div class=\"aligncenter aligncenter wp-block-tribe-terms\"><ul class=\"wp-block-tribe-terms__list\"><li class=\"wp-block-tribe-terms__term\"><span class=\"wp-block-tribe-terms__link t-category\">Advertising<\/span><\/li><\/ul><\/div>\r\n\r\n<h1 style=\"margin-top:var(--wp--preset--spacing--10);\" class=\"has-text-align-center wp-block-post-title\">CLS: Solving for Cumulative Layout Shift<\/h1>\r\n\r\n\r\n<div class=\"wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-9b38c6d9 wp-block-group-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:0;padding-top:0;padding-bottom:0\"><div style=\"margin-bottom:0;margin-top:0;margin-left:0;margin-right:0;\" class=\"has-text-align-center wp-block-post-author-name\">Eric Hochberger<\/div>\r\n\r\n\r\n<p>\u2022<\/p>\r\n\r\n\r\n<div style=\"padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;\" class=\"has-text-align-center wp-block-post-date has-10-font-size\"><time datetime=\"2020-09-28T11:35:43-05:00\">September 28, 2020<\/time><\/div><\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<section class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:0;padding-bottom:0\">\n<p>Cumulative Layout Shift is a pagespeed metric of Google&#8217;s Core Web Vitals. In today&#8217;s post, learn how to solve for CLS to make your pages faster. <\/p>\n\n\n\n\n\n<p>The announcement of Google&#8217;s new Page Experience algorithm brings us a series of new Web Vitals, or metrics regarding the pagespeed and experience of your website.<\/p>\n\n\n\n<p>Of these new Web Vitals, perhaps the most radically different metric from previous <a href=\"https:\/\/www.mediavine.com\/google-chrome-to-release-new-pagespeed-badging-indicators\/\">pagespeed measuring<\/a> tools is the new Cumulative Layout Shift (CLS). <\/p>\n\n\n\n<p>What is the new CLS, and how do you optimize for it?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-cumulative-layout-shift\">What is Cumulative Layout Shift?<\/h2>\n\n\n\n<p>First, what is Cumulative Layout Shift (CLS)?<\/p>\n\n\n\n<p>CLS measures how much your page content shifts as a page loads, or as the user scrolls, given variables such as DOM elements loading.<\/p>\n\n\n\n<p>[Crickets.] Okay, let&#8217;s try again in human terms: <\/p>\n\n\n\n<p>Ironically, due to an almost-universal obsession with <a href=\"https:\/\/www.mediavine.com\/mediavines-pagespeed-resources\/\">pagespeed<\/a>, we&#8217;ve all embraced lazy, asynchronous and deferred loading. <\/p>\n\n\n\n<p>While all of these tactics are great for making sure your pages load quicker for the user, there are side-effects: Some parts of the page load out of order, causing the content to bounce around, so to speak.<\/p>\n\n\n\n<p>You&#8217;ve likely experienced this when browsing the web, on your own site or other websites.<\/p>\n\n\n\n<p>The first, and most obvious, example of this is when you see a website start to load for the first time and the first screen view begins to bounce around as various objects start to load at different times.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"534\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops.jpg\" alt=\"man and woman on laptops\" class=\"wp-image-23788\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops.jpg 800w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-320x214.jpg 320w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-768x513.jpg 768w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-375x250.jpg 375w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-554x370.jpg 554w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-343x229.jpg 343w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-280x187.jpg 280w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-335x224.jpg 335w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-347x232.jpg 347w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-520x347.jpg 520w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/man-and-woman-on-laptops-640x427.jpg 640w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>CLS doesn&#8217;t end in the first screen view, either. Imagine you&#8217;re scrolling and reading the content, only for an image, video or advertisement from above to load, pushing the section you&#8217;re reading down further.<\/p>\n\n\n\n<p>Worse yet, imagine there was a button you were trying to press at that very moment, or you were attempting to scroll down the page and you ended up clicking on the wrong thing. <\/p>\n\n\n\n<p>Maybe you clicked on an ad by mistake (don&#8217;t you hate online advertising?) or a link that took you to another page.<\/p>\n\n\n\n<p>Whatever the case, it&#8217;s not a great experience and there\u2019s a reason Google is pushing us all to fix it by making it part of their <a href=\"https:\/\/www.mediavine.com\/google-page-experience\/\">Page Experience<\/a> algorithm next year.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-do-you-measure-cls\">How do you measure CLS?<\/h2>\n\n\n\n<p>There are several tools offered by Google that can help measure the CLS of your site. Chances are if you&#8217;re here, it&#8217;s because you know of the most obvious one: <a href=\"https:\/\/www.mediavine.com\/improving-rankings-google-search-console-search-analytics\/\">Google Search Console<\/a>.<\/p>\n\n\n\n<p>If you have your site registered with Google Search Console, it will alert you under <a href=\"https:\/\/www.mediavine.com\/lighthouse-6-web-vitals\/\">Core Web Vitals<\/a> if any of your pages are failing or have a warning for CLS. This is a great place to get a list of pages that are failing CLS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"599\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-1024x599.png\" alt=\"Google Search Console screenshot with arrow pointing to core web vitals tab. \" class=\"wp-image-23791\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-1024x599.png 1024w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-320x187.png 320w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-768x449.png 768w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-1536x898.png 1536w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-1170x684.png 1170w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-375x219.png 375w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-800x468.png 800w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-569x333.png 569w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-353x206.png 353w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-288x168.png 288w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-335x196.png 335w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-347x203.png 347w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-520x304.png 520w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console-640x374.png 640w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/core-web-vitals-google-search-console.png 1544w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>To actually <em>test<\/em> a page for CLS, you still have a few more tools.<\/p>\n\n\n\n<p>The next one we\u2019ll be talking about is PageSpeed Insights (or you can use <a href=\"https:\/\/www.mediavine.com\/lighthouse-version-6-changes-whats-new-for-content-creators\/\">Lighthouse<\/a>, the underlying tool that powers PageSpeed Insights).<\/p>\n\n\n\n<p>PageSpeed Insights measures what it calls a \u201cLab\u201d result, or when PSI itself visits your page and whether it observes any CLS. <\/p>\n\n\n\n<p>This typically measures only the first screen view, so it may not be the most useful when it comes to fully debugging your CLS.<\/p>\n\n\n\n<p>Within PageSpeed Insights, however, you\u2019ll also notice \u201cField Data\u201d and \u201cOrigin Summary\u201d results if you have enough visitors to your page. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-1024x525.png\" alt=\"screenshot of page speed insights with arrow pointing to Cumulative Layout Shift chart\" class=\"wp-image-23793\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-1024x525.png 1024w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-320x164.png 320w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-768x393.png 768w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-1536x787.png 1536w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-1170x599.png 1170w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-375x192.png 375w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-800x410.png 800w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-569x291.png 569w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-353x181.png 353w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-288x148.png 288w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-335x172.png 335w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-347x178.png 347w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-520x266.png 520w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights-640x328.png 640w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2020\/09\/Page-speed-insights.png 1759w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This data illustrates how real world users are experiencing CLS and other Web Vital metrics in the real world, using CrUX.<\/p>\n\n\n\n<p>At the end of the day, that&#8217;s the more important number because it&#8217;s what Google is measuring in the real world.<\/p>\n\n\n\n<p>So how do you emulate that?<\/p>\n\n\n\n<p>Google offers a <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome Extension<\/a> that helps you measure CLS as you browse your website.<\/p>\n\n\n\n<p>As you scroll, you can test things at various speeds and using various connections to see if you can replicate any CLS issues.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-do-you-fix-cls-issues\">How do you fix CLS issues?<\/h2>\n\n\n\n<p>Now that you can see how CLS is measured on your page, and hopefully the objects causing it, how do you fix these issues?<\/p>\n\n\n\n<p>While a lot of this requires some technical knowledge, there are some common causes you can keep an eye out for.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-third-party-javascript\">Third-Party JavaScript<\/h3>\n\n\n\n<p>It\u2019s important to note the common causes of CLS. If you&#8217;re running third-party JavaScript, it may render things such as related content, share buttons, etc. and you\u2019ll likely see these cause CLS as they load.<\/p>\n\n\n\n<p>This is because, as we mentioned earlier, JavaScript can load in various orders. Components adding visual elements to your page are likely to do so after other aspects of your page have loaded.<\/p>\n\n\n\n<p>Given that this code is, by definition, beyond your control, the best thing you can do is push third-party JavaScript visual elements below the first screen view, similar to how Mediavine handles ads.<\/p>\n\n\n\n<p>The further down the page an element is, the more time it has to load before a user gets there, thus avoiding a potential layout shift.<\/p>\n\n\n\n<p>Another solution is to pre-define the height of objects before JavaScript runs, keeping in mind that this will most likely entail reaching out to the third party running the JavaScript to help you fix it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-lazy-or-deferred-loading\">Lazy or Deferred Loading<\/h3>\n\n\n\n<p>Another common cause is <a href=\"https:\/\/www.mediavine.com\/lazy-loading-ads-mediavine-ads-load-200-faster\/\">lazy loading<\/a> or defer loading. Again, the irony of Google encouraging this practice to solve pagespeed issues is not lost on us \u2014 but it can cause objects to load after page load, causing a noticeable shift.<\/p>\n\n\n\n<p>The key to solving these? Making sure whatever plugin you&#8217;re using for lazy loading or deferring is defining a placeholder to replace when it loads.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"460\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/07\/woman-blogger-computer-689x460.png\" alt=\"Woman blogging on a desktop computer\" class=\"wp-image-6714\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/07\/woman-blogger-computer-689x460.png 689w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/07\/woman-blogger-computer-441x294.png 441w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/07\/woman-blogger-computer-768x513.png 768w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/07\/woman-blogger-computer.png 800w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-asynchronous-css-and-fonts\">Asynchronous CSS and Fonts<\/h3>\n\n\n\n<p>A big trick WordPress optimization plugins use is to asynchronously load your CSS after the page loads. <\/p>\n\n\n\n<p>This removes what\u2019s called render blocking, or things preventing your site from loading but will cause things to flash when they load.<\/p>\n\n\n\n<p>Again, this is a case of Google giving you things to balance: PageSpeed vs CLS. Can you solve it all?<\/p>\n\n\n\n<p>You&#8217;ll likely have to work with your optimization plugins &#8230; or consider <a href=\"https:\/\/www.mediavine.com\/products\/trellis\/\">Trellis<\/a>, which is now available to the public.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-optimize-ads-for-cls\">Optimize Ads for CLS<\/h2>\n\n\n\n<p>With Mediavine, especially if you run our <a href=\"https:\/\/www.mediavine.com\/optimize-ads-for-mobile-pagespeed\/\">Optimize for PageSpeed modes<\/a>, your ads are already pushed below the first screen view. <\/p>\n\n\n\n<p>This means that the lab shouldn&#8217;t find any CLS issues related to Mediavine. However, due to the fact that CLS is measured throughout the experience, there are potential issues that ads can cause.<\/p>\n\n\n\n<p>This is why we recommend you enable our new <a href=\"https:\/\/www.mediavine.com\/optimize-ads-for-cls\/\">Optimize Ads for CLS<\/a> feature in your Mediavine Dashboard. This setting will create create placeholders, or dedicate space for where ads will load. This will avoid causing any shifts as ads lazy load in.<\/p>\n\n\n\n<p>Additionally, Optimize Ads for CLS has plenty of other tricks up its sleeve, including solving for CLS due to ad refresh and much more.<\/p>\n\n\n\n<p>If you&#8217;re running Optimize Ads for CLS, we also strongly recommend you opt-in for a few <a href=\"https:\/\/www.mediavine.com\/opt-in-for-new-psas-now\/\">Mediavine PSAs<\/a>, to make sure that you don&#8217;t end up with blank spaces due to the placeholders that the setting brings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-trellis-create-and-grow\">Trellis, Create and Grow<\/h2>\n\n\n\n<p>We\u2019ve already worked with <a href=\"https:\/\/www.mediavine.com\/trellis-beta-update\/\">Trellis beta<\/a> testers to resolve issues related to CLS by refining the way we lazy load images with placeholders, generate CSS, handle fonts and more.<\/p>\n\n\n\n<p>In short, <a href=\"https:\/\/www.mediavine.com\/introducing-trellis\/\">Trellis<\/a> and the Mediavine <a href=\"https:\/\/www.mediavine.com\/getting-your-site-ready-for-trellis\/\">Trellis child themes<\/a> will be ready for CLS when Google launches this new algorithm.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.mediavine.com\/create-and-grow-past-present-future\/\">Create and Grow<\/a>? Rest assured, both Mediavine products are being developed with CLS concern in mind.<\/p>\n<\/section>\r\n\r\n\r\n\r\n<section class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:0\">\r\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-09aec4f2 wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--40);padding-top:var(--wp--preset--spacing--50);padding-right:0;padding-bottom:var(--wp--preset--spacing--60)\">\r\n<p class=\"is-style-small is-style-small--3\">About the author<\/p>\r\n\r\n\r\n<div style=\"margin-top:var(--wp--preset--spacing--20);\" class=\"wp-block-post-author\"><div class=\"wp-block-post-author__avatar\"><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/152dc08941c75895b80ffc4d0f79236a870658434ec66e25f227ffe962e70114?s=96&#038;d=blank&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/152dc08941c75895b80ffc4d0f79236a870658434ec66e25f227ffe962e70114?s=192&#038;d=blank&#038;r=g 2x' class='avatar avatar-96 photo' height='96' width='96' \/><\/div><div class=\"wp-block-post-author__content\"><p class=\"wp-block-post-author__name\"><a href=\"https:\/\/www.mediavine.com\/blog\/author\/eric\/\" target=\"_self\">Eric Hochberger<\/a><\/p><p class=\"wp-block-post-author__bio\"><\/p><\/div><\/div><\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-7c04bf6b wp-block-group-is-layout-constrained\" style=\"margin-top:0\">\r\n<p class=\"is-style-small is-style-small--4\">Share this page<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-outermost-social-sharing has-normal-icon-size has-icon-color is-style-logos-only is-content-justification-left is-layout-flex wp-container-outermost-social-sharing-is-layout-9d3a6402 wp-block-social-sharing-is-layout-flex\" style=\"margin-top:var(--wp--preset--spacing--10)\"><li style=\"color: #000000; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-linkedin has-base-black-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.mediavine.com%2Fblog%2Fcls-solving-for-cumulative-layout-shift%2F&#038;title=CLS%3A%20Solving%20for%20Cumulative%20Layout%20Shift\" aria-label=\"Share on LinkedIn\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on LinkedIn\t\t<\/span>\n\t<\/a>\n<\/li>\n\r\n\r\n<li style=\"color: #000000; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-x has-base-black-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/x.com\/share?url=https%3A%2F%2Fwww.mediavine.com%2Fblog%2Fcls-solving-for-cumulative-layout-shift%2F&#038;text=CLS%3A%20Solving%20for%20Cumulative%20Layout%20Shift\" aria-label=\"Share on X\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on X\t\t<\/span>\n\t<\/a>\n<\/li>\n\r\n\r\n<li style=\"color: #000000; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-facebook has-base-black-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.mediavine.com%2Fblog%2Fcls-solving-for-cumulative-layout-shift%2F&#038;title=CLS%3A%20Solving%20for%20Cumulative%20Layout%20Shift\" aria-label=\"Share on Facebook\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on Facebook\t\t<\/span>\n\t<\/a>\n<\/li>\n\r\n\r\n<li style=\"color: #000000; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-telegram has-base-black-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/telegram.me\/share\/url?url=https%3A%2F%2Fwww.mediavine.com%2Fblog%2Fcls-solving-for-cumulative-layout-shift%2F&#038;text=CLS%3A%20Solving%20for%20Cumulative%20Layout%20Shift\" aria-label=\"Share on Telegram\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 128 128\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M28.97 63.324c18.657-8.128 31.098-13.487 37.323-16.076 17.774-7.393 21.467-8.677 23.874-8.72.53-.009 1.713.122 2.48.745.648.525.826 1.235.911 1.733.085.498.191 1.633.107 2.52-.963 10.12-5.13 34.677-7.25 46.012-.898 4.796-2.664 6.404-4.375 6.561-3.716.342-6.538-2.456-10.138-4.815-5.633-3.693-8.815-5.991-14.283-9.594-6.319-4.164-2.222-6.453 1.379-10.193.942-.98 17.318-15.874 17.634-17.225.04-.169.077-.799-.297-1.131-.375-.333-.927-.22-1.325-.129-.565.128-9.564 6.076-26.996 17.843-2.554 1.754-4.868 2.609-6.94 2.564-2.286-.05-6.681-1.292-9.95-2.354-4.007-1.303-7.193-1.992-6.915-4.205.144-1.152 1.731-2.33 4.761-3.536Z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on Telegram\t\t<\/span>\n\t<\/a>\n<\/li>\n\r\n\r\n<li style=\"color: #000000; \" class=\"outermost-social-sharing-link outermost-social-sharing-link-whatsapp has-base-black-color wp-block-outermost-social-sharing-link\">\n\t<a href=\"https:\/\/api.whatsapp.com\/send?text=CLS%3A%20Solving%20for%20Cumulative%20Layout%20Shift%20&mdash;%20https%3A%2F%2Fwww.mediavine.com%2Fblog%2Fcls-solving-for-cumulative-layout-shift%2F\" aria-label=\"Share on WhatsApp\" rel=\"noopener nofollow\" target=\"_blank\" class=\"wp-block-outermost-social-sharing-link-anchor\">\n\t\t<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z\"><\/path><\/svg>\t\t<span class=\"wp-block-outermost-social-sharing-link-label screen-reader-text\">\n\t\t\tShare on WhatsApp\t\t<\/span>\n\t<\/a>\n<\/li>\n<\/ul>\r\n<\/div>\r\n<\/section>\r\n<\/article>\r\n\r\n\r\n\r\n<aside class=\"wp-block-group aligngrid  is-animated-on-scroll-25 tribe-animation-type-fade-in tribe-animation-direction-bottom is-layout-flow wp-block-group-is-layout-flow\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50);--tribe-animation-speed:0.6s;--tribe-animation-offset:50px;--tribe-animation-delay:0s;--tribe-animation-easing:var(--easing--ease-out-sine)\">\r\n<h2 class=\"wp-block-heading is-style-small is-style-small--5\" id=\"h-related-posts\" style=\"margin-top:0;margin-bottom:var(--wp--preset--spacing--40)\">Related Posts<\/h2>\r\n\r\n\r\n<div style=\"margin-bottom:0;\" class=\"b-related-posts b-related-posts--layout-grid  wp-block-tribe-related-posts\">\n\t\t\t\t\t<article class=\"c-post-card c-post-card__layout-vertical\">\n\t<div class=\"c-post-card__inner\">\n\t\t\t\t\t<div class=\"c-post-card__image aspect-ratio-cover aspect-ratio-3-2\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-1024x576.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-1024x576.png 1024w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-320x180.png 320w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-768x432.png 768w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-1536x864.png 1536w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-680x383.png 680w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image-1280x720.png 1280w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/02\/why-ecpms-featured-image.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t<\/div>\n\t\t\t\t<div class=\"c-post-card__content\">\n\t\t\t\t\t\t\t<p class=\"c-post-card__primary-category t-category\">Advertising<\/p>\n\t\t\t\t\t\t<h3 class=\"c-post-card__title t-display-xx-small t-transparent-underline\">Why eCPMs Rise and Fall Throughout the Year (And How to Work With It)<\/h3>\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"c-post-card__metadata-readtime\">6 minutes<\/p>\n\t\t\t\t\t\t\t\t<p class=\"c-post-card__metadata\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-author t-body-small\">Brad Hagmann<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-separator t-body-small\">\u2022<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-date t-body-small\">Jan 21, 2026<\/span>\n\t\t\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"c-post-card__excerpt\">Back to Blog \u2022 This article was updated on January 21, 2026, to reflect the 2026 eCPM calendar. If you\u2019ve ever looked at your dashboard and thought, \u201cWhat just happened?\u201d You\u2019re not alone. eCPMs move seasonally. Sometimes dramatically. And while it can feel random in the moment, those swings usually have very little to do&#8230;<\/p>\n\t\t\t<\/div>\n\t<a href=\"https:\/\/www.mediavine.com\/blog\/best-ecpm-days\/\" class=\"c-post-card__link-overlay\" aria-label=\"Read more about Why eCPMs Rise and Fall Throughout the Year (And How to Work With It)\"><\/a>\n<\/article>\n\t\t\t\t\t<article class=\"c-post-card c-post-card__layout-vertical\">\n\t<div class=\"c-post-card__inner\">\n\t\t\t\t\t<div class=\"c-post-card__image aspect-ratio-cover aspect-ratio-3-2\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"711\" height=\"533\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2026\/01\/Blog-Images-Kendall-2-edited-3.png\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2026\/01\/Blog-Images-Kendall-2-edited-3.png 711w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2026\/01\/Blog-Images-Kendall-2-edited-3-320x240.png 320w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/>\t\t\t<\/div>\n\t\t\t\t<div class=\"c-post-card__content\">\n\t\t\t\t\t\t\t<p class=\"c-post-card__primary-category t-category\">Advertising<\/p>\n\t\t\t\t\t\t<h3 class=\"c-post-card__title t-display-xx-small t-transparent-underline\">What to Expect From eCPMs in Q1 (And How to Plan for It)<\/h3>\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"c-post-card__metadata-readtime\">5 minutes<\/p>\n\t\t\t\t\t\t\t\t<p class=\"c-post-card__metadata\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-author t-body-small\">Brad Hagmann<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-separator t-body-small\">\u2022<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-date t-body-small\">Jan 16, 2026<\/span>\n\t\t\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"c-post-card__excerpt\">Back to Blog 4 min read \u2022 \u2022 Q1 has a reputation. For many publishers, it\u2019s the quarter where eCPMs cool off, dashboards look less exciting, and questions start popping up fast. Is something wrong? Did I miss something? Should I be worried? Short answer: probably not. Q1 behaves the way it does for reasons&#8230;<\/p>\n\t\t\t<\/div>\n\t<a href=\"https:\/\/www.mediavine.com\/blog\/what-to-expect-from-ecpms-in-q1-and-how-to-plan-for-it\/\" class=\"c-post-card__link-overlay\" aria-label=\"Read more about What to Expect From eCPMs in Q1 (And How to Plan for It)\"><\/a>\n<\/article>\n\t\t\t\t\t<article class=\"c-post-card c-post-card__layout-vertical\">\n\t<div class=\"c-post-card__inner\">\n\t\t\t\t\t<div class=\"c-post-card__image aspect-ratio-cover aspect-ratio-3-2\">\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-1024x512.jpg\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-1024x512.jpg 1024w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-320x160.jpg 320w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-768x384.jpg 768w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-1170x585.jpg 1170w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-800x400.jpg 800w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-569x285.jpg 569w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-960x480.jpg 960w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03-1080x540.jpg 1080w, https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/06\/mediavine-cmp-implementation-blog-03.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>\t\t\t<\/div>\n\t\t\t\t<div class=\"c-post-card__content\">\n\t\t\t\t\t\t\t<p class=\"c-post-card__primary-category t-category\">Advertising<\/p>\n\t\t\t\t\t\t<h3 class=\"c-post-card__title t-display-xx-small t-transparent-underline\">Mediavine&#8217;s CMP Moves to CONSENTMANAGER: Unlocking Enhanced Compliance and Revenue Opportunities for Publishers<\/h3>\t\t\t\t\t\t\t\t\t\t\t<p class=\"c-post-card__metadata\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-author t-body-small\">The Mediavine Team<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-separator t-body-small\">\u2022<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"c-post-card__metadata-date t-body-small\">Jun 2, 2025<\/span>\n\t\t\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"c-post-card__excerpt\">Back to Blog \u2022 As the digital advertising landscape evolves, the need for effective data management and compliance has never been more critical. As part of our commitment to providing exceptional solutions for our publishers, Mediavine is excited to announce our partnership with CONSENTMANAGER, a third-party Consent Management Platform (CMP).&nbsp; As a part of this&#8230;<\/p>\n\t\t\t<\/div>\n\t<a href=\"https:\/\/www.mediavine.com\/blog\/mediavines-cmp-moves-to-consentmanager\/\" class=\"c-post-card__link-overlay\" aria-label=\"Read more about Mediavine&#8217;s CMP Moves to CONSENTMANAGER: Unlocking Enhanced Compliance and Revenue Opportunities for Publishers\"><\/a>\n<\/article>\n\t<\/div>\n<\/aside>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>Back to Blog \u2022 Cumulative Layout Shift is a pagespeed metric of Google&#8217;s Core Web Vitals. In today&#8217;s post, learn how to solve for CLS to make your pages faster. The announcement of Google&#8217;s new Page Experience algorithm brings us a series of new Web Vitals, or metrics regarding the pagespeed and experience of your&#8230;<\/p>\n","protected":false},"author":5,"featured_media":7848,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":"","footnotes":""},"categories":[14,94,17],"tags":[],"audience_post":[],"class_list":["post-23768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advertising","category-pagespeed","category-seo"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CLS: Solving for Cumulative Layout Shift - Mediavine<\/title>\n<meta name=\"description\" content=\"Google has new Web Vitals \u2014 the new Cumulative Layout Shift (CLS). Learn about the new CLS, and how you optimize for it?\" \/>\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.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CLS: Solving for Cumulative Layout Shift\" \/>\n<meta property=\"og:description\" content=\"Google has new Web Vitals \u2014 the new Cumulative Layout Shift (CLS). Learn about the new CLS, and how you optimize for it?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\" \/>\n<meta property=\"og:site_name\" content=\"Mediavine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mediavinepublishernetwork\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-28T16:35:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-02T17:05:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"532\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eric Hochberger\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mediavine\" \/>\n<meta name=\"twitter:site\" content=\"@mediavine\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Hochberger\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\"},\"author\":{\"name\":\"Eric Hochberger\",\"@id\":\"https:\/\/www.mediavine.com\/#\/schema\/person\/ebd6f771035eb5c34fc588d95c5322bb\"},\"headline\":\"CLS: Solving for Cumulative Layout Shift\",\"datePublished\":\"2020-09-28T16:35:43+00:00\",\"dateModified\":\"2021-09-02T17:05:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\"},\"wordCount\":1275,\"publisher\":{\"@id\":\"https:\/\/www.mediavine.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg\",\"articleSection\":[\"Advertising\",\"Pagespeed\",\"SEO\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\",\"url\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\",\"name\":\"CLS: Solving for Cumulative Layout Shift - Mediavine\",\"isPartOf\":{\"@id\":\"https:\/\/www.mediavine.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg\",\"datePublished\":\"2020-09-28T16:35:43+00:00\",\"dateModified\":\"2021-09-02T17:05:58+00:00\",\"description\":\"Google has new Web Vitals \u2014 the new Cumulative Layout Shift (CLS). Learn about the new CLS, and how you optimize for it?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage\",\"url\":\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg\",\"contentUrl\":\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg\",\"width\":800,\"height\":532,\"caption\":\"using a computer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mediavine.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CLS: Solving for Cumulative Layout Shift\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mediavine.com\/#website\",\"url\":\"https:\/\/www.mediavine.com\/\",\"name\":\"Mediavine\",\"description\":\"Full Service Ad Management\",\"publisher\":{\"@id\":\"https:\/\/www.mediavine.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mediavine.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.mediavine.com\/#organization\",\"name\":\"Mediavine\",\"url\":\"https:\/\/www.mediavine.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mediavine.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/11\/mediavine-yoast-favicon.svg\",\"contentUrl\":\"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/11\/mediavine-yoast-favicon.svg\",\"width\":696,\"height\":696,\"caption\":\"Mediavine\"},\"image\":{\"@id\":\"https:\/\/www.mediavine.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/mediavinepublishernetwork\/\",\"https:\/\/x.com\/mediavine\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mediavine.com\/#\/schema\/person\/ebd6f771035eb5c34fc588d95c5322bb\",\"name\":\"Eric Hochberger\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mediavine.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/152dc08941c75895b80ffc4d0f79236a870658434ec66e25f227ffe962e70114?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/152dc08941c75895b80ffc4d0f79236a870658434ec66e25f227ffe962e70114?s=96&d=blank&r=g\",\"caption\":\"Eric Hochberger\"},\"url\":\"https:\/\/www.mediavine.com\/blog\/author\/eric\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CLS: Solving for Cumulative Layout Shift - Mediavine","description":"Google has new Web Vitals \u2014 the new Cumulative Layout Shift (CLS). Learn about the new CLS, and how you optimize for it?","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.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/","og_locale":"en_US","og_type":"article","og_title":"CLS: Solving for Cumulative Layout Shift","og_description":"Google has new Web Vitals \u2014 the new Cumulative Layout Shift (CLS). Learn about the new CLS, and how you optimize for it?","og_url":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/","og_site_name":"Mediavine","article_publisher":"https:\/\/www.facebook.com\/mediavinepublishernetwork\/","article_published_time":"2020-09-28T16:35:43+00:00","article_modified_time":"2021-09-02T17:05:58+00:00","og_image":[{"width":800,"height":532,"url":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg","type":"image\/jpeg"}],"author":"Eric Hochberger","twitter_card":"summary_large_image","twitter_creator":"@mediavine","twitter_site":"@mediavine","twitter_misc":{"Written by":"Eric Hochberger","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#article","isPartOf":{"@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/"},"author":{"name":"Eric Hochberger","@id":"https:\/\/www.mediavine.com\/#\/schema\/person\/ebd6f771035eb5c34fc588d95c5322bb"},"headline":"CLS: Solving for Cumulative Layout Shift","datePublished":"2020-09-28T16:35:43+00:00","dateModified":"2021-09-02T17:05:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/"},"wordCount":1275,"publisher":{"@id":"https:\/\/www.mediavine.com\/#organization"},"image":{"@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg","articleSection":["Advertising","Pagespeed","SEO"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/","url":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/","name":"CLS: Solving for Cumulative Layout Shift - Mediavine","isPartOf":{"@id":"https:\/\/www.mediavine.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage"},"image":{"@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg","datePublished":"2020-09-28T16:35:43+00:00","dateModified":"2021-09-02T17:05:58+00:00","description":"Google has new Web Vitals \u2014 the new Cumulative Layout Shift (CLS). Learn about the new CLS, and how you optimize for it?","breadcrumb":{"@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#primaryimage","url":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg","contentUrl":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2018\/10\/hands-computer.jpg","width":800,"height":532,"caption":"using a computer"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mediavine.com\/blog\/cls-solving-for-cumulative-layout-shift\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mediavine.com\/"},{"@type":"ListItem","position":2,"name":"CLS: Solving for Cumulative Layout Shift"}]},{"@type":"WebSite","@id":"https:\/\/www.mediavine.com\/#website","url":"https:\/\/www.mediavine.com\/","name":"Mediavine","description":"Full Service Ad Management","publisher":{"@id":"https:\/\/www.mediavine.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mediavine.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mediavine.com\/#organization","name":"Mediavine","url":"https:\/\/www.mediavine.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mediavine.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/11\/mediavine-yoast-favicon.svg","contentUrl":"https:\/\/www.mediavine.com\/wp-content\/uploads\/2025\/11\/mediavine-yoast-favicon.svg","width":696,"height":696,"caption":"Mediavine"},"image":{"@id":"https:\/\/www.mediavine.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/mediavinepublishernetwork\/","https:\/\/x.com\/mediavine"]},{"@type":"Person","@id":"https:\/\/www.mediavine.com\/#\/schema\/person\/ebd6f771035eb5c34fc588d95c5322bb","name":"Eric Hochberger","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mediavine.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/152dc08941c75895b80ffc4d0f79236a870658434ec66e25f227ffe962e70114?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/152dc08941c75895b80ffc4d0f79236a870658434ec66e25f227ffe962e70114?s=96&d=blank&r=g","caption":"Eric Hochberger"},"url":"https:\/\/www.mediavine.com\/blog\/author\/eric\/"}]}},"_links":{"self":[{"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/posts\/23768","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/comments?post=23768"}],"version-history":[{"count":41,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/posts\/23768\/revisions"}],"predecessor-version":[{"id":33063,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/posts\/23768\/revisions\/33063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/media\/7848"}],"wp:attachment":[{"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/media?parent=23768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/categories?post=23768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/tags?post=23768"},{"taxonomy":"audience_post","embeddable":true,"href":"https:\/\/www.mediavine.com\/wp-json\/wp\/v2\/audience_post?post=23768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}