{"id":2926,"date":"2021-10-28T13:29:32","date_gmt":"2021-10-28T11:29:32","guid":{"rendered":"https:\/\/davidperezgar.com\/?p=2926"},"modified":"2024-08-04T10:46:08","modified_gmt":"2024-08-04T08:46:08","slug":"detect-elements-cls-high-web","status":"publish","type":"post","link":"https:\/\/davidperezgar.com\/en\/blog\/web-development\/detect-elements-cls-high-web\/","title":{"rendered":"Detect high CLS elements of a Web (Core Web Vitals)"},"content":{"rendered":"\n<p>The <strong>CLS Cumulative Layout Shift<\/strong>, or unexpected content movement, is a user-centric metric for measuring visual stability, and helps to see how many users experience changes in web layout unexpectedly.<\/p> <p>The <strong>CLS Cumulative Layout Shift<\/strong> is a user-centric metric for measuring visual stability, and helps to see how many users experience changes in web layout unexpectedly.\n\n\n\n<p>Within <a href=\"https:\/\/close.marketing\/desarrollo-web-wordpress\/\">Web Development<\/a>, CLS is a measure that gives us <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">Google Page Speed<\/a> and should be less than 0.1. The lower it is, the more stable the loading will be.<\/p> <p>.\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"320\" src=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/medicion-google-cls.png\" alt=\"medicion google cls\" class=\"wp-image-3032\" srcset=\"https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/medicion-google-cls.png 1280w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/medicion-google-cls-596x149.png 596w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/medicion-google-cls-768x192.png 768w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/medicion-google-cls-1082x271.png 1082w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>But since this blog is development. Let&#8217;s see, because <strong>there are times when Page Speed<\/strong>, points us to a total measurement, but we want to detect where this problem is caused. Many times, it is not as intuitive as we usually put in many examples.\n\n\n\n<p>If we use Google Chrome, in the console, we can activate the option <br>Layout Shift Regions, which colors the rendering and shows us the points on the web that cause a larger CLS.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Three dots<\/li><li>Run Command &gt; Show Rendering<\/li><li>Enable Layout Shift Regions<\/li><\/ol>.\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/cls-captura-render.gif\" alt=\"cls capture render\" class=\"wp-image-2927\" width=\"542\" height=\"496\"\/><\/figure><\/div>\n\n\n\n<p>And to have even more information, in the console tab, we can implement this code, which will give us exact values of the elements causing such problems.<\/p>\n\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><code class=\"\">let cls = 0;\n\nnew PerformanceObserver((entryList) =&gt; {\n  for (const entry of entryList.getEntries()) {\n    if (!entry.hadRecentInput) {\n      cls += entry.value;\n      console.log('Current CLS value:', cls, entry);\n    }\n  }\n}).observe({type: 'layout-shift', buffered: true});<\/code><\/pre><\/div>\n\n\n\n<p>Once you run that routine, it will give you the different HTML elements that cause the problem.\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1038\" height=\"878\" src=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/valores-cls-consola.png\" alt=\"values cls console\" class=\"wp-image-3034\" srcset=\"https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/valores-cls-consola.png 1038w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/valores-cls-consola-591x500.png 591w, https:\/\/davidperezgar.com\/en\/wp-content\/uploads\/sites\/4\/valores-cls-consola-768x650.png 768w\" sizes=\"auto, (max-width: 1038px) 100vw, 1038px\" \/><\/figure>\n\n\n\n<p>Normally this is solved with CSS on the elements that create such a problem.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CLS Cumulative Layout Shift, or unexpected content movement, is a user-centric metric to measure visual stability, and helps to see how many users experience changes in the layout of the web unexpectedly. Within Web Development, CLS is a measure offered by Google&#8217;s Page Speed and should be less than 0.1. The lower it is, the more stable the load will be. But as this blog is development. Let&#8217;s see, because there are times that Page Speed, points us to a total measurement, but we want to detect where this is caused [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4142,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Detect high CLS elements of a Web (Core Web Vitals)","_seopress_titles_desc":"Learn how CLS affects a website and how to detect elements that cause high CLS. The solution usually involves touching CSS.","_seopress_robots_index":"","inline_featured_image":false,"editor_notices":[],"webmentions_disabled":false,"footnotes":""},"categories":[168],"tags":[555],"class_list":["post-2926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-google-core-web-vitals","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/2926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/comments?post=2926"}],"version-history":[{"count":0,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/posts\/2926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/media\/4142"}],"wp:attachment":[{"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/media?parent=2926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/categories?post=2926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidperezgar.com\/en\/wp-json\/wp\/v2\/tags?post=2926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}