{"id":8120,"date":"2026-05-10T15:47:42","date_gmt":"2026-05-10T13:47:42","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=8120"},"modified":"2026-05-10T15:47:43","modified_gmt":"2026-05-10T13:47:43","slug":"what-is-cumulative-layout-shift-cls","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-cumulative-layout-shift-cls\/","title":{"rendered":"What is Cumulative Layout Shift (CLS)?"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\"><strong>Cumulative Layout Shift (CLS)<\/strong> is a Core Web Vital that measures the &#8220;visual stability&#8221; of a website. It quantifies how much the content on a page jumps around while it is still loading.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You have likely experienced this: you are about to click a link, but suddenly an image or an ad loads, the text shifts downward, and you end up clicking the wrong thing. This &#8220;unstable&#8221; behavior is what CLS measures. For a <strong>mybox-hosted<\/strong> site, maintaining a low CLS is a mechanical necessity to ensure a professional and frustration-free user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-cumulative-layout-shift-cls\/#Why_CLS_is_Critical_for_Your_Website\" >Why CLS is Critical for Your Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-cumulative-layout-shift-cls\/#Understanding_the_CLS_Score\" >Understanding the CLS Score<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-cumulative-layout-shift-cls\/#Common_Causes_of_Layout_Shifts\" >Common Causes of Layout Shifts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-cumulative-layout-shift-cls\/#How_to_Fix_CLS_on_Your_Website\" >How to Fix CLS on Your Website<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/what-is-cumulative-layout-shift-cls\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_CLS_is_Critical_for_Your_Website\"><\/span>Why CLS is Critical for Your Website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User Frustration:<\/strong> Unexpected layout shifts are one of the most annoying aspects of web browsing. They can lead to accidental clicks, form resets, or users losing their place while reading.<\/li>\n\n\n\n<li><strong>Google Ranking:<\/strong> Since 2021, CLS has been a direct ranking factor. Google penalizes sites that provide a &#8220;jittery&#8221; experience.<\/li>\n\n\n\n<li><strong>Trust and Professionalism:<\/strong> A site that loads smoothly feels high-quality and reliable, whereas a site that jumps around feels broken or unoptimized.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Understanding_the_CLS_Score\"><\/span>Understanding the CLS Score<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-3041421256\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">CLS is not measured in seconds, but as a calculated score based on how much elements move and how far they travel.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Rating<\/strong><\/td><td><strong>Score<\/strong><\/td><td><strong>Status<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Good<\/strong><\/td><td>0.1 or less<\/td><td>The page feels solid and stable.<\/td><\/tr><tr><td><strong>Needs Improvement<\/strong><\/td><td>0.1 \u2013 0.25<\/td><td>Noticeable shifting that should be addressed.<\/td><\/tr><tr><td><strong>Poor<\/strong><\/td><td>Over 0.25<\/td><td>Highly unstable; significant impact on UX and SEO.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Common_Causes_of_Layout_Shifts\"><\/span>Common Causes of Layout Shifts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If your <strong>mybox-hosted<\/strong> site is struggling with a high CLS, it is usually due to one of these five culprits:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Images without Dimensions:<\/strong> When you don&#8217;t specify the width and height of an image, the browser doesn&#8217;t know how much space to reserve. Once the image downloads, it suddenly &#8220;pushes&#8221; the surrounding content.<\/li>\n\n\n\n<li><strong>Ads and Embeds:<\/strong> If you use third-party ads (like Google AdSense) or YouTube embeds that don&#8217;t have a reserved &#8220;placeholder&#8221; box, they will snap into place and shift the rest of the page.<\/li>\n\n\n\n<li><strong>Dynamically Injected Content:<\/strong> Banners or &#8220;newsletter signups&#8221; that appear at the top of the screen after the page has already loaded.<\/li>\n\n\n\n<li><strong>Web Fonts (FOIT\/FOUT):<\/strong> When a custom font loads, it may be a different size than the fallback font, causing the text to reflow and shift paragraphs.<\/li>\n\n\n\n<li><strong>Animations:<\/strong> Using CSS properties that change the layout (like <code>top<\/code> or <code>margin<\/code>) instead of those that don&#8217;t (like <code>transform: translate()<\/code>).<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Fix_CLS_on_Your_Website\"><\/span>How to Fix CLS on Your Website<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To stabilize your layout and improve your score, apply these fixes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set Explicit Dimensions:<\/strong> Always include <code>width<\/code> and <code>height<\/code> attributes in your <code>&lt;img><\/code> and <code>&lt;video><\/code> tags. This allows the browser to create a &#8220;box&#8221; for the media before it even starts downloading.<\/li>\n\n\n\n<li><strong>Reserve Space for Ads:<\/strong> Use a container (a <code>div<\/code>) with a fixed height for ads. If the ad fails to load, the space stays blank rather than collapsing and causing a shift.<\/li>\n\n\n\n<li><strong>Avoid Inserting Content Above Existing Content:<\/strong> If you need to show a banner, place it at the bottom of the viewport or use a fixed overlay that doesn&#8217;t push the main content.<\/li>\n\n\n\n<li><strong>Use Font Preloading:<\/strong> Use <code>&lt;link rel=\"preload\"><\/code> for your main web fonts to ensure they are available as early as possible.<\/li>\n\n\n\n<li><strong>CSS Transform:<\/strong> When animating elements, use <code>transform<\/code> and <code>opacity<\/code> instead of changing positioning properties that trigger a layout recalculation.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">CLS is the difference between a site that feels &#8220;expensive&#8221; and one that feels &#8220;cheap.&#8221; By ensuring your <strong>mybox-hosted<\/strong> site has a stable layout, you protect your conversion rates and your search engine rankings. A stable site is a reliable site.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[28],"manual_kb_tag":[8269,8383,8384,8385,8386,8387,8388,1153,1378,4455,4759,7440,8266],"class_list":["post-8120","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-others","manual_kb_tag-visual-stability","manual_kb_tag-layout-shift-score","manual_kb_tag-cls-score","manual_kb_tag-google-ranking","manual_kb_tag-image-dimensions","manual_kb_tag-layout-stability","manual_kb_tag-ad-placeholders","manual_kb_tag-web-performance","manual_kb_tag-user-experience","manual_kb_tag-core-web-vitals","manual_kb_tag-cumulative-layout-shift","manual_kb_tag-responsive-images","manual_kb_tag-page-experience"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8120\/revisions"}],"predecessor-version":[{"id":8122,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8120\/revisions\/8122"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=8120"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=8120"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=8120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}