{"id":21298,"date":"2022-01-10T09:38:00","date_gmt":"2022-01-10T04:08:00","guid":{"rendered":"https:\/\/www.adpushup.com\/blog\/?p=21298"},"modified":"2022-11-17T12:09:34","modified_gmt":"2022-11-17T06:39:34","slug":"cumulative-layout-shift-how-to-optimise-cls","status":"publish","type":"post","link":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/","title":{"rendered":"Cumulative Layout Shift: How to Optimise CLS?","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"\n<p class=\"has-background\" style=\"background-color:#dcffd6\"><em>Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0<\/em><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Have you ever come across a page where content on the page suddenly changes? Without warning, the text moves, there\u2019s additional white space, and you\u2019ve lost your place.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>You probably had that annoying experience because of \u2018Cumulative Layout Shift.\u2019e<\/p>\n\n\n\n<p>Cumulative Layout Shift was introduced as a performance metric by Lighthouse in 2020.&nbsp;<\/p>\n\n\n\n<p>Later on, CLS also became one of the metrics that make up Core Web Vitals.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>In this blog post, we\u2019ll learn what Cumulative Layout Shift (CLS) is, why it&#8217;s part of the <a href=\"https:\/\/www.adpushup.com\/blog\/what-are-core-web-vitals\/\" target=\"_blank\" rel=\"noreferrer noopener\">Core Web Vitals <\/a>metric, how it happens, how to measure it, and how webmasters can optimize it.&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-flat 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\">Table of Contents:<\/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: #000000;color:#000000\" 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: #000000;color:#000000\" 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'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#What_is_Cumulative_Layout_Shift\" >What is Cumulative Layout Shift?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Expected_vs_Unexpected_Layout_Shift\" >Expected vs Unexpected Layout Shift<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#How_to_Calculate_CLS_Score\" >How to Calculate CLS Score<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#What_Causes_Cumulative_Layout_Shift_Issues\" >What Causes Cumulative Layout Shift Issues?&nbsp;<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Images_and_Videos_without_dimensions\" >Images and Videos without dimensions<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Ads_embeds_and_iframes_without_dimensions\" >Ads, embeds, and iframes without dimensions<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Dynamically_injected_content\" >Dynamically injected content<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Web_Fonts_causing_FOITFOUT\" >Web Fonts causing FOIT\/FOUT<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Actions_waiting_for_a_network_response_before_updating_DOM\" >Actions waiting for a network response before updating DOM<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Cumulative_Layout_Shift_Test\" >Cumulative Layout Shift Test<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#How_to_improve_Cumulative_Layout_Shift\" >How to improve Cumulative Layout Shift?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#FAQs\" >FAQs<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"h-what-is-cumulative-layout-shift\"><span class=\"ez-toc-section\" id=\"What_is_Cumulative_Layout_Shift\"><\/span><strong>What is Cumulative Layout Shift?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s understand this performance metric by breaking it down:<\/p>\n\n\n\n<p><strong>Cumulative<\/strong>: It means an <strong>increase in quantity&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>Layout<\/strong>: it is the <strong>frame of webpage&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>Shift<\/strong>: It is the <strong>change of position<\/strong><\/p>\n\n\n\n<p>Hence, Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.&nbsp;<\/p>\n\n\n\n<p>Whenever a page loads, few page elements tend to shift unexpectedly, which often affects the way users interact with the webpage. These elements could be:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul><li><em>Button<\/em><\/li><li><em>Subscription forms<\/em><\/li><li><em>Contact forms&nbsp;<\/em><\/li><li><em>Images<\/em><\/li><li><em>Fonts<\/em><\/li><li><em>Videos<\/em><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>A website having good Cumulative Layout Shift has a stable page display where elements don\u2019t shift around, and rather ensure a stable loading of all website content and elements.&nbsp;<\/p>\n\n\n\n<p>According to Google,<\/p>\n\n\n\n<p><em>&#8220;CLS is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts- a low CLS helps ensure that the page is delightful.&#8221;<\/em><\/p>\n\n\n\n<h2 id=\"h-expected-vs-unexpected-layout-shift\"><span class=\"ez-toc-section\" id=\"Expected_vs_Unexpected_Layout_Shift\"><\/span><strong>Expected vs Unexpected Layout Shift<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Layout shifts on a webpage can be both expected and unexpected. It\u2019s important for website owners to know the difference between the two:<\/p>\n\n\n\n<p>Expected layout shift: It happens in response to a user\u2019s input. For example, when a user clicks on the subscribe button but there\u2019s a layout shift in response to this.&nbsp;<\/p>\n\n\n\n<p>Unexpected layout shift: It happens because of <a href=\"https:\/\/www.adpushup.com\/blog\/how-to-recover-from-third-party-cookie-blocking\/\">third-party content<\/a>, dynamic elements on the page, and dimensionless images. For example, an ad suddenly appears and shifts text content down the page.&nbsp;<\/p>\n\n\n\n<p>Unexpected movement of content mainly happens when resources are loaded asynchronously. It could also happen when DOM elements are dynamically added alongside existing content.&nbsp;<\/p>\n\n\n\n<p>Usually, culprit in such cases are a third-party widget, a font, an image, or a video with unknown dimensions.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"How_to_Calculate_CLS_Score\"><\/span><strong>How to Calculate CLS Score<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Cumulative Layout Shift Score can calculated by multiplying the Impact Fraction by the Distance Fraction:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted has-background\" style=\"background-color:#fef2f5\"><strong>Cumulative Layout Shift (CLS)<\/strong> = Impact Fraction x Distance Fraction&nbsp;\n\nIf, Impact Fraction is <strong>0.645<\/strong> and Distance Fraction is <strong>0.179\n<\/strong>\nThen, <strong>CLS<\/strong> = 0.645 x 0.179 \n\n<strong>CLS = 0.1154.<\/strong><\/pre>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"What_Causes_Cumulative_Layout_Shift_Issues\"><\/span><strong>What Causes Cumulative Layout Shift Issues?&nbsp;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>According to Google, there are&nbsp;five main reasons for Cumulative Layout Shift:<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Images_and_Videos_without_dimensions\"><\/span><strong>Images and Videos without dimensions<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It is advisable always to specify the width and height of your images and videos.<\/p>\n\n\n\n<p>You can also utilize CSS aspect ratio boxes to allow the browser to allocate the right amount of space on the web page while the image is loading.<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Ads_embeds_and_iframes_without_dimensions\"><\/span><strong>Ads, embeds, and iframes without dimensions<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Ad sizes can boost revenue through high<a href=\"https:\/\/www.adpushup.com\/blog\/6-simple-things-you-can-do-to-increase-your-ad-ctr\/\"> CTR<\/a>.<\/p>\n\n\n\n<p>However, this can compromise the quality of user experience by pushing the content down the page.&nbsp;<\/p>\n\n\n\n<p>This layout shift can be mitigated by reserving space for ad slots, eliminating shifts by reserving the largest possible size for the ad slot, or choosing the ad slot\u2019s best possible size based on historical data.&nbsp;<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Dynamically_injected_content\"><\/span><strong>Dynamically injected content<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Avoid inserting any new content above existing <a href=\"https:\/\/www.adpushup.com\/blog\/what-is-content-personalisation-benefits-examples-tips\/\">content<\/a>, unless it is in response to user interaction.<\/p>\n\n\n\n<p>This will ensure any layout shifts that occur are always expected rather than triggering the image or text to move unexpectedly.<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Web_Fonts_causing_FOITFOUT\"><\/span><strong>Web Fonts causing FOIT\/FOUT<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Try using font:display values with your custom fonts like auto, swap, block, fallback, and optional, to prevent unnecessary layout shifts.<\/p>\n\n\n\n<p>To be certain that there is no layout shift, use font:display along with&nbsp;link rel=preload.<\/p>\n\n\n\n<p>Any element that uses that font will be hidden until the font asset has been downloaded fully, is known as FOIT (Flash of invisible text).<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Actions_waiting_for_a_network_response_before_updating_DOM\"><\/span><strong>Actions waiting for a network response before updating DOM<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Always go for \u201ctransform\u201d animations for animations of properties that trigger layout changes.<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"Cumulative_Layout_Shift_Test\"><\/span><strong>Cumulative Layout Shift Test<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Cumulative Layout Shift Performance website metrics can be measured in any of the following ways:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ol><li>Cumulative Layout Shift can be measured using the following <strong>Field tools<\/strong>:<\/li><\/ol>\n\n\n\n<ul><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome User Experience Report<\/a><\/li><li><a href=\"https:\/\/pagespeed.web.dev\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a><\/li><li><a href=\"https:\/\/search.google.com\/search-console?resource_id=https:\/\/www.adpushup.com\/\">Search Console<\/a> (Core Web Vitals report)<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>2. CLS can also be measured through these <strong>Lab tools:<\/strong><\/p>\n\n\n\n<ul><li><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/\">Chrome DevTools<\/a>&nbsp;<\/li><li><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">LightHouse<\/a>&nbsp;<\/li><li><a href=\"https:\/\/www.webpagetest.org\">WebPageTest<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 id=\"how-to-improve-metric\"><span class=\"ez-toc-section\" id=\"How_to_improve_Cumulative_Layout_Shift\"><\/span>How to improve Cumulative Layout Shift?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-how-to wp-block-yoast-how-to-block\"><p class=\"schema-how-to-description\"><strong><em>Note<\/em><\/strong>\u00a0that the particular audits mentioned below likely contribute the most to your CLS; however, your page&#8217;s CLS score may also be affected by other optimizations that aren&#8217;t mentioned here.<br\/>Improve your CLS score by incorporating good practices into your development workflow, such as:<\/p> <ol class=\"schema-how-to-steps\"><li class=\"schema-how-to-step\" id=\"how-to-step-1668666772814\"><strong class=\"schema-how-to-step-name\">Specifying image dimensions<\/strong> <p class=\"schema-how-to-step-text\">Always specify, both,\u00a0<a href=\"https:\/\/gtmetrix.com\/use-explicit-width-and-height-on-image-elements.html\">width and height for your website&#8217;s image and video elements<\/a>\u00a0so that the correct spacing is used for images\/videos.<br\/>Alternatively, you can use CSS aspect ratio boxes to do the same. To learn more about this,\u00a0<a href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\" rel=\"noreferrer noopener\" target=\"_blank\">read this article<\/a>.<\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1668666797550\"><strong class=\"schema-how-to-step-name\">Reducing layout shifts caused by ads, embeds, and iframes<\/strong> <p class=\"schema-how-to-step-text\">To reduce layout shifts caused by ads, embeds, and iframes, do things like:<br\/>Reserve ad slot size (preferably the largest) before loading the ad library.<br\/>Move ads to the bottom or out of the viewport.<br\/>Use placeholders when there is no ad available to show.<br\/>To learn more,\u00a0<a href=\"https:\/\/web.dev\/optimize-cls\/#ads-embeds-and-iframes-without-dimensions\" rel=\"noreferrer noopener\" target=\"_blank\">read this article<\/a>.<\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1668666824917\"><strong class=\"schema-how-to-step-name\">Avoiding inserting new content above existing content<\/strong> <p class=\"schema-how-to-step-text\">Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.<br\/>To learn more,\u00a0<a href=\"https:\/\/web.dev\/optimize-cls\/#dynamic-content\" rel=\"noreferrer noopener\" target=\"_blank\">read this article<\/a>.<\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1668666841045\"><strong class=\"schema-how-to-step-name\">Preventing the Flash of Invisible Text (FOIT)<\/strong> <p class=\"schema-how-to-step-text\">The Flash of Invisible Text (FOIT) issue can also affect your page&#8217;s CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and\/or using the font-display attribute.<br\/><a href=\"https:\/\/gtmetrix.com\/ensure-text-remains-visible-during-webfont-load.html#how-to-load-webfont\">Learn more about this here.<\/a><\/p> <\/li><li class=\"schema-how-to-step\" id=\"how-to-step-1668666858292\"><strong class=\"schema-how-to-step-name\">Avoiding non-composited animations<\/strong> <p class=\"schema-how-to-step-text\">Where possible,\u00a0<a href=\"https:\/\/gtmetrix.com\/avoid-non-composited-animations.html#how-to-fix-audit\">only perform composited animations<\/a>\u00a0to\u00a0<a href=\"https:\/\/gtmetrix.com\/minimize-main-thread-work.html\">reduce main-thread work<\/a>\u00a0and prevent repainting of pixels during the page load.<\/p> <\/li><\/ol><\/div>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Understanding Cumulative Layout&nbsp; Shift (CLS) will help you offer a better user experience in the coming days.<\/p>\n\n\n\n<p>Since the metric is a part of Core Web Vitals to improve UX and is scheduled to become a ranking signal in 2021, it is important to understand its importance and impact on your site.\u00a0<\/p>\n\n\n\n<h2 id=\"h-faqs\"><span class=\"ez-toc-section\" id=\"FAQs\"><\/span>FAQs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1668666892069\"><strong class=\"schema-faq-question\">1. What is Cumulative Layout Shift?<\/strong> <p class=\"schema-faq-answer\">Cumulative Layout Shift (CLS) measures how much a webpage changes unexpectedly over time. If a website visitor loads a page and, while reading it, a banner loads, causing the page to jump down, that would result in a high CLS score.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1668666972133\"><strong class=\"schema-faq-question\">2. How important is cumulative layout shift?<\/strong> <p class=\"schema-faq-answer\">CLS is an important metric for measuring visual stability, because it measures how often users experience unexpected layout shifts. A low CLS ensures that users enjoy the page.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1668667087542\"><strong class=\"schema-faq-question\">3. What does layout shift mean?<\/strong> <p class=\"schema-faq-answer\">Layout shifts occur when an element on your page changes size or position, affecting the position of content around it. It is possible for the shift to be intended, such as when a container expands as a result of a user action.<\/p> <\/div> <\/div>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0 Have you ever come across a page where content on the page suddenly changes? Without warning, the text moves, there\u2019s additional white space, and you\u2019ve lost your place.&nbsp; You probably had that annoying experience because of \u2018Cumulative<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":18,"featured_media":21291,"comment_status":"open","ping_status":"close","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"inline_featured_image":false,"apple_news_api_created_at":"","apple_news_api_id":"","apple_news_api_modified_at":"","apple_news_api_revision":"","apple_news_api_share_url":"","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\""},"categories":[6440],"tags":[],"apple_news_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.5 (Yoast SEO v18.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cumulative Layout Shift: How to Optimise CLS? | Adpushup<\/title>\n<meta name=\"description\" content=\"Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0\" \/>\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.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:title\" content=\"Cumulative Layout Shift: How to Optimise CLS? | Adpushup\" \/>\n<meta name=\"twitter:description\" content=\"Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png\" \/>\n<meta name=\"twitter:creator\" content=\"@adpushup\" \/>\n<meta name=\"twitter:site\" content=\"@adpushup\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shubham Grover\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/#organization\",\"name\":\"AdPushup\",\"url\":\"https:\/\/www.adpushup.com\/blog\/\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/adpushup\/\",\"https:\/\/www.facebook.com\/AdPushup\/\",\"https:\/\/twitter.com\/adpushup\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2019\/02\/AdPushup-logo.png\",\"contentUrl\":\"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2019\/02\/AdPushup-logo.png\",\"width\":3294,\"height\":893,\"caption\":\"AdPushup\"},\"image\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/#website\",\"url\":\"https:\/\/www.adpushup.com\/blog\/\",\"name\":\"AdPushup Blog\",\"description\":\"A\/B Testing, Monetization &amp; Ad Optimization\",\"publisher\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.adpushup.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#primaryimage\",\"url\":\"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png\",\"contentUrl\":\"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png\",\"width\":1016,\"height\":676,\"caption\":\"advertising management\"},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#webpage\",\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/\",\"name\":\"Cumulative Layout Shift: How to Optimise CLS? | Adpushup\",\"isPartOf\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#primaryimage\"},\"datePublished\":\"2022-01-10T04:08:00+00:00\",\"dateModified\":\"2022-11-17T06:39:34+00:00\",\"description\":\"Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0\",\"breadcrumb\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666892069\"},{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666972133\"},{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668667087542\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"blog\",\"item\":\"https:\/\/www.adpushup.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ad Tech &amp; Ad Ops\",\"item\":\"https:\/\/www.adpushup.com\/blog\/category\/ad-tech-ad-ops\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cumulative Layout Shift: How to Optimise CLS?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/#\/schema\/person\/8dbbe9397dddf4ab1d858603e751f897\"},\"headline\":\"Cumulative Layout Shift: How to Optimise CLS?\",\"datePublished\":\"2022-01-10T04:08:00+00:00\",\"dateModified\":\"2022-11-17T06:39:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#webpage\"},\"wordCount\":1208,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png\",\"articleSection\":[\"Ad Tech &amp; Ad Ops\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/#\/schema\/person\/8dbbe9397dddf4ab1d858603e751f897\",\"name\":\"Shubham Grover\",\"description\":\"Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.\",\"url\":\"https:\/\/www.adpushup.com\/blog\/author\/shubham\/\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666892069\",\"position\":1,\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666892069\",\"name\":\"1. What is Cumulative Layout Shift?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Cumulative Layout Shift (CLS) measures how much a webpage changes unexpectedly over time. If a website visitor loads a page and, while reading it, a banner loads, causing the page to jump down, that would result in a high CLS score.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666972133\",\"position\":2,\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666972133\",\"name\":\"2. How important is cumulative layout shift?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"CLS is an important metric for measuring visual stability, because it measures how often users experience unexpected layout shifts. A low CLS ensures that users enjoy the page.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668667087542\",\"position\":3,\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668667087542\",\"name\":\"3. What does layout shift mean?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Layout shifts occur when an element on your page changes size or position, affecting the position of content around it. It is possible for the shift to be intended, such as when a container expands as a result of a user action.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#howto-1\",\"name\":\"Cumulative Layout Shift: How to Optimise CLS?\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#article\"},\"description\":\"<strong><em>Note<\/em><\/strong>\u00a0that the particular audits mentioned below likely contribute the most to your CLS; however, your page's CLS score may also be affected by other optimizations that aren't mentioned here.<br\/>Improve your CLS score by incorporating good practices into your development workflow, such as:\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666772814\",\"name\":\"Specifying image dimensions\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Always specify, both,\u00a0<a href=\\\"https:\/\/gtmetrix.com\/use-explicit-width-and-height-on-image-elements.html\\\">width and height for your website's image and video elements<\/a>\u00a0so that the correct spacing is used for images\/videos.<br\/>Alternatively, you can use CSS aspect ratio boxes to do the same. To learn more about this,\u00a0<a href=\\\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\\\" rel=\\\"noreferrer noopener\\\" target=\\\"_blank\\\">read this article<\/a>.\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666797550\",\"name\":\"Reducing layout shifts caused by ads, embeds, and iframes\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"To reduce layout shifts caused by ads, embeds, and iframes, do things like:<br\/>Reserve ad slot size (preferably the largest) before loading the ad library.<br\/>Move ads to the bottom or out of the viewport.<br\/>Use placeholders when there is no ad available to show.<br\/>To learn more,\u00a0<a href=\\\"https:\/\/web.dev\/optimize-cls\/#ads-embeds-and-iframes-without-dimensions\\\" rel=\\\"noreferrer noopener\\\" target=\\\"_blank\\\">read this article<\/a>.\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666824917\",\"name\":\"Avoiding inserting new content above existing content\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.<br\/>To learn more,\u00a0<a href=\\\"https:\/\/web.dev\/optimize-cls\/#dynamic-content\\\" rel=\\\"noreferrer noopener\\\" target=\\\"_blank\\\">read this article<\/a>.\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666841045\",\"name\":\"Preventing the Flash of Invisible Text (FOIT)\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"The Flash of Invisible Text (FOIT) issue can also affect your page's CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and\/or using the font-display attribute.<br\/><a href=\\\"https:\/\/gtmetrix.com\/ensure-text-remains-visible-during-webfont-load.html#how-to-load-webfont\\\">Learn more about this here.<\/a>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666858292\",\"name\":\"Avoiding non-composited animations\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Where possible,\u00a0<a href=\\\"https:\/\/gtmetrix.com\/avoid-non-composited-animations.html#how-to-fix-audit\\\">only perform composited animations<\/a>\u00a0to\u00a0<a href=\\\"https:\/\/gtmetrix.com\/minimize-main-thread-work.html\\\">reduce main-thread work<\/a>\u00a0and prevent repainting of pixels during the page load.\"}]}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cumulative Layout Shift: How to Optimise CLS? | Adpushup","description":"Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0","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.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/","twitter_card":"summary","twitter_title":"Cumulative Layout Shift: How to Optimise CLS? | Adpushup","twitter_description":"Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0","twitter_image":"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png","twitter_creator":"@adpushup","twitter_site":"@adpushup","twitter_misc":{"Written by":"Shubham Grover","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.adpushup.com\/blog\/#organization","name":"AdPushup","url":"https:\/\/www.adpushup.com\/blog\/","sameAs":["https:\/\/www.linkedin.com\/company\/adpushup\/","https:\/\/www.facebook.com\/AdPushup\/","https:\/\/twitter.com\/adpushup"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.adpushup.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2019\/02\/AdPushup-logo.png","contentUrl":"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2019\/02\/AdPushup-logo.png","width":3294,"height":893,"caption":"AdPushup"},"image":{"@id":"https:\/\/www.adpushup.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.adpushup.com\/blog\/#website","url":"https:\/\/www.adpushup.com\/blog\/","name":"AdPushup Blog","description":"A\/B Testing, Monetization &amp; Ad Optimization","publisher":{"@id":"https:\/\/www.adpushup.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.adpushup.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#primaryimage","url":"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png","contentUrl":"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png","width":1016,"height":676,"caption":"advertising management"},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#webpage","url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/","name":"Cumulative Layout Shift: How to Optimise CLS? | Adpushup","isPartOf":{"@id":"https:\/\/www.adpushup.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#primaryimage"},"datePublished":"2022-01-10T04:08:00+00:00","dateModified":"2022-11-17T06:39:34+00:00","description":"Cumulative Layout Shift measures the increase in all frame changes that happen in a website while it loads.\u00a0","breadcrumb":{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666892069"},{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666972133"},{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668667087542"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"blog","item":"https:\/\/www.adpushup.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ad Tech &amp; Ad Ops","item":"https:\/\/www.adpushup.com\/blog\/category\/ad-tech-ad-ops\/"},{"@type":"ListItem","position":3,"name":"Cumulative Layout Shift: How to Optimise CLS?"}]},{"@type":"Article","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#article","isPartOf":{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#webpage"},"author":{"@id":"https:\/\/www.adpushup.com\/blog\/#\/schema\/person\/8dbbe9397dddf4ab1d858603e751f897"},"headline":"Cumulative Layout Shift: How to Optimise CLS?","datePublished":"2022-01-10T04:08:00+00:00","dateModified":"2022-11-17T06:39:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#webpage"},"wordCount":1208,"commentCount":0,"publisher":{"@id":"https:\/\/www.adpushup.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#primaryimage"},"thumbnailUrl":"https:\/\/www.adpushup.com\/blog\/wp-content\/uploads\/2022\/01\/undraw_color__schemes_wv48.png","articleSection":["Ad Tech &amp; Ad Ops"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#respond"]}]},{"@type":"Person","@id":"https:\/\/www.adpushup.com\/blog\/#\/schema\/person\/8dbbe9397dddf4ab1d858603e751f897","name":"Shubham Grover","description":"Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.","url":"https:\/\/www.adpushup.com\/blog\/author\/shubham\/"},{"@type":"Question","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666892069","position":1,"url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666892069","name":"1. What is Cumulative Layout Shift?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Cumulative Layout Shift (CLS) measures how much a webpage changes unexpectedly over time. If a website visitor loads a page and, while reading it, a banner loads, causing the page to jump down, that would result in a high CLS score.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666972133","position":2,"url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668666972133","name":"2. How important is cumulative layout shift?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"CLS is an important metric for measuring visual stability, because it measures how often users experience unexpected layout shifts. A low CLS ensures that users enjoy the page.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668667087542","position":3,"url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#faq-question-1668667087542","name":"3. What does layout shift mean?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Layout shifts occur when an element on your page changes size or position, affecting the position of content around it. It is possible for the shift to be intended, such as when a container expands as a result of a user action.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"HowTo","@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#howto-1","name":"Cumulative Layout Shift: How to Optimise CLS?","mainEntityOfPage":{"@id":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#article"},"description":"<strong><em>Note<\/em><\/strong>\u00a0that the particular audits mentioned below likely contribute the most to your CLS; however, your page's CLS score may also be affected by other optimizations that aren't mentioned here.<br\/>Improve your CLS score by incorporating good practices into your development workflow, such as:","step":[{"@type":"HowToStep","url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666772814","name":"Specifying image dimensions","itemListElement":[{"@type":"HowToDirection","text":"Always specify, both,\u00a0<a href=\"https:\/\/gtmetrix.com\/use-explicit-width-and-height-on-image-elements.html\">width and height for your website's image and video elements<\/a>\u00a0so that the correct spacing is used for images\/videos.<br\/>Alternatively, you can use CSS aspect ratio boxes to do the same. To learn more about this,\u00a0<a href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\" rel=\"noreferrer noopener\" target=\"_blank\">read this article<\/a>."}]},{"@type":"HowToStep","url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666797550","name":"Reducing layout shifts caused by ads, embeds, and iframes","itemListElement":[{"@type":"HowToDirection","text":"To reduce layout shifts caused by ads, embeds, and iframes, do things like:<br\/>Reserve ad slot size (preferably the largest) before loading the ad library.<br\/>Move ads to the bottom or out of the viewport.<br\/>Use placeholders when there is no ad available to show.<br\/>To learn more,\u00a0<a href=\"https:\/\/web.dev\/optimize-cls\/#ads-embeds-and-iframes-without-dimensions\" rel=\"noreferrer noopener\" target=\"_blank\">read this article<\/a>."}]},{"@type":"HowToStep","url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666824917","name":"Avoiding inserting new content above existing content","itemListElement":[{"@type":"HowToDirection","text":"Try and avoid inserting dynamic content (e.g., banners, forms, etc.) above existing content unless in response to user interaction. This helps prevent unexpected layout shifts.<br\/>To learn more,\u00a0<a href=\"https:\/\/web.dev\/optimize-cls\/#dynamic-content\" rel=\"noreferrer noopener\" target=\"_blank\">read this article<\/a>."}]},{"@type":"HowToStep","url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666841045","name":"Preventing the Flash of Invisible Text (FOIT)","itemListElement":[{"@type":"HowToDirection","text":"The Flash of Invisible Text (FOIT) issue can also affect your page's CLS. Ensure your text remains visible during webfont loads by preloading web-fonts and\/or using the font-display attribute.<br\/><a href=\"https:\/\/gtmetrix.com\/ensure-text-remains-visible-during-webfont-load.html#how-to-load-webfont\">Learn more about this here.<\/a>"}]},{"@type":"HowToStep","url":"https:\/\/www.adpushup.com\/blog\/cumulative-layout-shift-how-to-optimise-cls\/#how-to-step-1668666858292","name":"Avoiding non-composited animations","itemListElement":[{"@type":"HowToDirection","text":"Where possible,\u00a0<a href=\"https:\/\/gtmetrix.com\/avoid-non-composited-animations.html#how-to-fix-audit\">only perform composited animations<\/a>\u00a0to\u00a0<a href=\"https:\/\/gtmetrix.com\/minimize-main-thread-work.html\">reduce main-thread work<\/a>\u00a0and prevent repainting of pixels during the page load."}]}],"inLanguage":"en-US"}]}},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/posts\/21298"}],"collection":[{"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/comments?post=21298"}],"version-history":[{"count":5,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/posts\/21298\/revisions"}],"predecessor-version":[{"id":24923,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/posts\/21298\/revisions\/24923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/media\/21291"}],"wp:attachment":[{"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/media?parent=21298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/categories?post=21298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.adpushup.com\/blog\/wp-json\/wp\/v2\/tags?post=21298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}