{"id":1971,"date":"2020-12-30T16:20:00","date_gmt":"2020-12-30T16:20:00","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=1971"},"modified":"2021-01-20T06:00:30","modified_gmt":"2021-01-20T06:00:30","slug":"understanding-cumulative-layout-shift-cls","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2020\/12\/understanding-cumulative-layout-shift-cls","title":{"rendered":"Understanding Cumulative Layout Shift (CLS)"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>\n<p class=\"lead\"><strong>Cumulative Layout Shift<\/strong> or <strong>CLS<\/strong>, <strong>Web Vitals<\/strong> and <strong>Core Web Vitals<\/strong>, these terms seem complicated, but it&#8217;s actually not that hard to understand what they stand for.<\/p>\n\n\n\n<p><strong>Web Vitals<\/strong> is a set of metrics used by Google to identify potential issues with your website.<\/p>\n\n\n\n<p><strong>Core Web Vitals<\/strong> is a subset of <strong>Web Vitals<\/strong>, focused on three aspects of user experience which apparently are very important: <strong><em>loading<\/em><\/strong>, <strong><em>interactivity<\/em><\/strong>, and <strong><em>visual stability.<\/em><\/strong><\/p>\n\n\n\n<p>If you&#8217;ve used any of the latest website performance tools like <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?hl=ro\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Page Insights<\/a> or <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Lighthouse<\/a>, you may have heard about the new Web Vitals and the Core Web Vitals metrics. Learn <a href=\"https:\/\/loadfocus.com\/blog\/2020\/12\/what-is-google-lighthouse\/\">more about Google Lighthouse<\/a>.<\/p>\n\n\n\n<p><strong>Cumulative Layout Shift (CLS) <\/strong>is a <strong>Core Web Vitals<\/strong> metric important for measuring <strong>visual stability<\/strong>. It looks at how much visible content shifted in the viewport as well as the distance the elements impacted were shifted.<\/p>\n\n\n\n<p>It measures how much the webpage shifts in the eyes of the user, when it loads. <\/p>\n\n\n\n<p>A low CLS helps ensure that the page hasn&#8217;t got a lot of moving parts.<\/p>\n\n\n\n<p>A good CLS score is less than 0.1, which translates to a good user experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"285\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/core-web-vitals-metrics.png\" alt=\"core web vitals cls\" class=\"wp-image-1973\" srcset=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/core-web-vitals-metrics.png 852w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/core-web-vitals-metrics-600x201.png 600w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/core-web-vitals-metrics-400x134.png 400w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/core-web-vitals-metrics-768x257.png 768w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><figcaption><strong>Core Web Vitals<\/strong> Metrics used to identify user experience issues<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Which are the causes of a poor CLS?<\/h2>\n\n\n\n<p>Let&#8217;s find out the reasons that might cause a poor CLS score:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Using images without dimensions (specifying their dimensions, width and height seems to solve this issue)<\/li><li>Ads, embeds, banners and iframes without dimensions<\/li><li>Content the is injected dynamically in the page<\/li><li>Web Fonts causing FOIT\/FOUT (fonts improperly leading to flash of invisible text (FOIT) or flash of unstyled text (FOUT)<\/li><li>Actions waiting for a network response before updating DOM<\/li><\/ul>\n\n\n\n<p>Nowadays, when you load a website you barely end up seeing the main content in the first few seconds, and this is due to loads of moving parts.<br><\/p>\n\n\n\n<p>Most of the time these kinds of experiences are just annoying and end up to be a low user experience leading to losing potential customers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Identify Cumulative Layout Shift (CLS)?<\/h2>\n\n\n\n<p>Basically we can use the Chrome Developer tools to spot Layout Shifts when loading our website.<\/p>\n\n\n\n<p>Let&#8217;s have a look which are the steps we need to execute in order to identify one or multiple Layout shits when loading a webpage:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open Developer tools by:Clicking <strong>F12<\/strong> key or <strong>fn+F12<\/strong><ul><li><strong>Ctrl+Shift+J<\/strong> for Windows<\/li><li><strong>\u2318\u2325I (Cmd+Opt+I)<\/strong> on Mac<\/li><li>Right click on your mouse anywhere in the webpage and click Inspect<\/li><\/ul><\/li><li>Click on the <strong>Performance<\/strong> tab in the <strong>Developer Tools<\/strong><\/li><li>Click the <strong>Record<\/strong> button or <strong>\u2318<\/strong>E on Mac<\/li><li>Load your website<\/li><li>Stop recording<\/li><\/ol>\n\n\n\n<p>These are the steps to generate an analysis of your website in the Chrome Developer tools. <\/p>\n\n\n\n<p>Now, let&#8217;s try to spot the Layout Shifts that happened when loading the website. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"369\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-identify.png\" alt=\"Cumulative Layout Shift (CLS) detection\" class=\"wp-image-1981\" srcset=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-identify.png 747w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-identify-600x296.png 600w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-identify-400x198.png 400w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><figcaption><strong>Cumulative Layout Shift<\/strong> (CLS) visible in Chrome Developer Tools<\/figcaption><\/figure>\n\n\n\n<p>As you can see, at the beginning of the Layout Shift, the container of the image has not width and height set, and when the image loads, it generates a layout shift which is spotted and recorded. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"362\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-start.png\" alt=\"Layout Shift (CLS) for DOM container\" class=\"wp-image-1982\" srcset=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-start.png 870w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-start-600x250.png 600w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-start-400x166.png 400w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-start-768x320.png 768w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><figcaption><strong>Layout Shift<\/strong> for DOM container with no width and height<\/figcaption><\/figure>\n\n\n\n<p>This Layout Shift is bad for the user experience, and the CLS counts all these Shifts that happen during the page load.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1009\" height=\"394\" src=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-finish.png\" alt=\"Layout Shift (CLS) for DOM container after image loaded\" class=\"wp-image-1983\" srcset=\"https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-finish.png 1009w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-finish-600x234.png 600w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-finish-400x156.png 400w, https:\/\/loadfocus.com\/blog\/wp-content\/uploads\/cumulative-layout-shift-cls-finish-768x300.png 768w\" sizes=\"auto, (max-width: 1009px) 100vw, 1009px\" \/><figcaption><strong>Layout Shift<\/strong> for DOM container after image loaded<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to fix Cumulative Layout Shift (CLS)?<\/h2>\n\n\n\n<p>One easy fix for this layout shift would be to set a width and height for the DOM container where the image is about to load, or preload a placeholder.<\/p>\n\n\n\n<p>This issue was easier for us, but you might need to preload fonts or skip adding content dynamically to your page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to measure CLS?<\/h2>\n\n\n\n<p>CLS can be measured in the lab or in the field, and it&#8217;s available in the following tools:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CLS Field tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Chrome User Experience Report<\/li><li>PageSpeed Insights<\/li><li>Search Console (Core Web Vitals report)<\/li><li>web-vitals JavaScript library<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">CLS Lab tools<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Chrome DevTools<\/li><li>Lighthouse<\/li><li>WebPageTest<\/li><\/ul>\n\n\n\n<p>Lab tools come with a caveat, and we are informed that they typically load pages in a synthetic environment and are only able to measure layout shifts that occur during page load. <\/p>\n\n\n\n<p>As a result, CLS values reported by lab tools for a given page may be less than what real users experience in the field.<\/p>\n\n\n\n<p><em>Written by\u00a0<a href=\"https:\/\/coursinator.com\/instructor\/bogdan-vazzolla\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"broken_link\">Bogdan\u00a0Vazzolla<\/a>.<\/em><\/p>\n\n\n\n<p><em><a href=\"https:\/\/loadfocus.com\/\">LoadFocus<\/a>&nbsp;is a cloud performance,&nbsp;<a href=\"https:\/\/loadfocus.com\/load-testing\" target=\"_blank\" rel=\"noreferrer noopener\">load and stress testing tool<\/a>&nbsp;which provides the infrastructure to run tests with thousands of concurrent users, from&nbsp;<a href=\"https:\/\/loadfocus.com\/locations\">multiple cloud locations<\/a>, in less than a few minutes, keep history of the results, compare different runs to inspect performance improvements or performance degradation.<\/em>&nbsp;It also supports running&nbsp;<a href=\"https:\/\/loadfocus.com\/jmeter-load-testing\" target=\"_blank\" rel=\"noreferrer noopener\">JMeter load tests from the cloud<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Cumulative Layout Shift or CLS, Web Vitals and Core Web Vitals, these terms seem complicated, but it&#8217;s actually not that hard to understand what they stand for. Web Vitals is a set of metrics used by Google to identify potential issues with your website. Core Web Vitals is a subset of Web Vitals, focused on&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/2020\/12\/understanding-cumulative-layout-shift-cls\" class=\"more-link\" title=\"Read Understanding Cumulative Layout Shift (CLS)\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":1986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48,316,104],"tags":[323,324,320],"class_list":["post-1971","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test-automation","category-web-vitals","category-website-speed-testing","tag-core-web-vitals","tag-layout-shift","tag-metrics"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/comments?post=1971"}],"version-history":[{"count":0,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1971\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media\/1986"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media?parent=1971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/categories?post=1971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/tags?post=1971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}