{"id":2926,"date":"2021-10-28T13:29:32","date_gmt":"2021-10-28T11:29:32","guid":{"rendered":"https:\/\/davidperezgar.com\/?p=2926"},"modified":"2021-11-04T10:03:32","modified_gmt":"2021-11-04T09:03:32","slug":"detectar-elementos-cls-alto-web","status":"publish","type":"post","link":"https:\/\/davidperezgar.com\/es\/detectar-elementos-cls-alto-web\/","title":{"rendered":"Detectar elementos con CLS alto de una Web (Core Web Vitals)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">El <strong>CLS Cumulative Layout Shift<\/strong>, o movimiento inesperado de contenido, es una m\u00e9trica centrada en el usuario para medir la estabilidad visual, y que ayuda para ver cuantos usuarios experimentan cambios en la maquetaci\u00f3n de la web de forma inesperada.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro del <a href=\"https:\/\/close.marketing\/desarrollo-web-wordpress\/\" target=\"_blank\" rel=\"noopener\">Desarrollo Web<\/a>, El CLS es una medida que nos ofrece <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Page Speed de Google<\/a> y que deber\u00e1 estar en menos de 0,1. Cuanta m\u00e1s baja sea, m\u00e1s estable ser\u00e1 la carga.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"320\" src=\"\/wp-content\/uploads\/2026\/10\/medicion-google-cls.png\" alt=\"medicion google cls\" class=\"wp-image-5451\" title=\"\" srcset=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/medicion-google-cls.png 1280w, https:\/\/davidperezgar.com\/wp-content\/uploads\/medicion-google-cls-596x149.png 596w, https:\/\/davidperezgar.com\/wp-content\/uploads\/medicion-google-cls-1082x271.png 1082w, https:\/\/davidperezgar.com\/wp-content\/uploads\/medicion-google-cls-768x192.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pero como este blog es desarrollo. Vamos a ver, porque <strong>hay veces que Page Speed<\/strong>, nos se\u00f1ala una medici\u00f3n total, pero queremos detectar donde se provoca este problema. Muchas veces, no es tan intuitivo como nos suelen poner en muchos ejemplos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si utilizamos Google Chrome, en la consola, podemos activar la opci\u00f3n <br>Layout Shift Regions, que colorea el renderizado y nos muestra los puntos de la web que provocan un CLS m\u00e1s grande.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Tres puntos<\/li><li>Run Command &gt; Show Rendering<\/li><li>Activar 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=\"\/wp-content\/uploads\/2026\/10\/cls-captura-render.gif\" alt=\"cls captura render\" class=\"wp-image-5450\" width=\"542\" height=\"496\" title=\"\"><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Y para tener m\u00e1s informaci\u00f3n todav\u00eda, en la pesta\u00f1a consola, podemos implementar este c\u00f3digo, que nos dar\u00e1 valores exactos de los elementos que causan dichos problemas.<\/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 class=\"wp-block-paragraph\">Una vez que ejecutas dicha rutina, te va dando los distintos elementos HTML que causan dicho problema.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1038\" height=\"878\" src=\"\/wp-content\/uploads\/2026\/10\/valores-cls-consola.png\" alt=\"valores cls consola\" class=\"wp-image-5453\" title=\"\" srcset=\"https:\/\/davidperezgar.com\/wp-content\/uploads\/valores-cls-consola.png 1038w, https:\/\/davidperezgar.com\/wp-content\/uploads\/valores-cls-consola-591x500.png 591w, https:\/\/davidperezgar.com\/wp-content\/uploads\/valores-cls-consola-768x650.png 768w\" sizes=\"auto, (max-width: 1038px) 100vw, 1038px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Normalmente esto se resuelve con CSS en los elementos que crean dicho problema.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>El CLS Cumulative Layout Shift, o movimiento inesperado de contenido, es una m\u00e9trica centrada en el usuario para medir la estabilidad visual, y que ayuda para ver cuantos usuarios experimentan cambios en la maquetaci\u00f3n de la web de forma inesperada. Dentro del Desarrollo Web, El CLS es una medida que nos ofrece Page Speed de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5452,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":6,"footnotes":""},"categories":[168],"tags":[555],"class_list":["post-2926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo-web","tag-google-core-web-vitals"],"_links":{"self":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts\/2926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/comments?post=2926"}],"version-history":[{"count":1,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts\/2926\/revisions"}],"predecessor-version":[{"id":5887,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/posts\/2926\/revisions\/5887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/media\/5452"}],"wp:attachment":[{"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/media?parent=2926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/categories?post=2926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davidperezgar.com\/es\/wp-json\/wp\/v2\/tags?post=2926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}