{"id":127620,"date":"2024-10-15T15:25:15","date_gmt":"2024-10-15T13:25:15","guid":{"rendered":"https:\/\/quondos.com\/mag\/?p=127620"},"modified":"2024-10-15T15:25:15","modified_gmt":"2024-10-15T13:25:15","slug":"google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance","status":"publish","type":"post","link":"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/","title":{"rendered":"Google explica c\u00f3mo se mide el cambio de dise\u00f1o acumulativo (CLS) Google Web Performance"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/10\/DALL\u00b7E-2023-10-31-13.06.18-Illustration-of-an-anthropomorphic-figure-with-the-Google-logo-colors-giving-a-presentation-about-the-latest-algorithm-updates.-The-figure-stands-in-a.png\" alt=\"\" class=\"wp-image-125682\" title=\"\" srcset=\"https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/10\/DALL\u00b7E-2023-10-31-13.06.18-Illustration-of-an-anthropomorphic-figure-with-the-Google-logo-colors-giving-a-presentation-about-the-latest-algorithm-updates.-The-figure-stands-in-a.png 1024w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/10\/DALL\u00b7E-2023-10-31-13.06.18-Illustration-of-an-anthropomorphic-figure-with-the-Google-logo-colors-giving-a-presentation-about-the-latest-algorithm-updates.-The-figure-stands-in-a-300x300.png 300w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/10\/DALL\u00b7E-2023-10-31-13.06.18-Illustration-of-an-anthropomorphic-figure-with-the-Google-logo-colors-giving-a-presentation-about-the-latest-algorithm-updates.-The-figure-stands-in-a-150x150.png 150w, https:\/\/quondos.com\/mag\/wp-content\/uploads\/2023\/10\/DALL\u00b7E-2023-10-31-13.06.18-Illustration-of-an-anthropomorphic-figure-with-the-Google-logo-colors-giving-a-presentation-about-the-latest-algorithm-updates.-The-figure-stands-in-a-768x768.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u00a1Atenci\u00f3n desarrolladores web y amantes del SEO! Seg\u00fan la fuente, Google ha arrojado luz sobre c\u00f3mo se mide el <strong>Cumulative Layout Shift (CLS)<\/strong>, un aspecto crucial para optimizar la experiencia del usuario.<\/p>\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u00cdndice de contenidos<\/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=\"Alternar tabla de contenidos\"><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: #999;color:#999\" 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: #999;color:#999\" 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 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Google_explica_como_se_mide_el_Cumulative_Layout_Shift\" >Google explica c\u00f3mo se mide el Cumulative Layout Shift<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Entendiendo_la_medicion_del_CLS\" >Entendiendo la medici\u00f3n del CLS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#El_peor_escenario_posible\" >El peor escenario posible<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#La_ventana_de_medicion_de_5_segundos\" >La ventana de medici\u00f3n de 5 segundos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Interpretando_los_puntajes_de_CLS\" >Interpretando los puntajes de CLS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Importancia_para_desarrolladores_y_SEO\" >Importancia para desarrolladores y SEO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Por_que_esto_importa\" >Por qu\u00e9 esto importa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Pasos_a_seguir_para_optimizar_el_CLS\" >Pasos a seguir para optimizar el CLS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Google_explica_como_se_mide_el_Cumulative_Layout_Shift\"><\/span>Google explica c\u00f3mo se mide el Cumulative Layout Shift<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p><strong>Barry Pollard<\/strong>, defensor del rendimiento web en Google, ha proporcionado detalles sobre la medici\u00f3n del CLS. Esta aclaraci\u00f3n es importante porque el CLS es uno de los <strong>Core Web Vitals<\/strong>, esenciales para el posicionamiento en Google.<\/p>\n\n<p>Comprender c\u00f3mo se calcula el CLS ayuda a los desarrolladores a optimizar sus sitios web, mejorando as\u00ed la experiencia del usuario y potencialmente su visibilidad en los resultados de b\u00fasqueda.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Entendiendo_la_medicion_del_CLS\"><\/span>Entendiendo la medici\u00f3n del CLS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Seg\u00fan la fuente, Pollard comenz\u00f3 explicando que el CLS es \u00absin unidad\u00bb, a diferencia de otras m\u00e9tricas que se miden en segundos o milisegundos. Cada cambio de dise\u00f1o se calcula multiplicando dos fracciones: lo que se movi\u00f3 (fracci\u00f3n de impacto) y cu\u00e1nto se movi\u00f3 (fracci\u00f3n de distancia).<\/p>\n\n<p>Este m\u00e9todo de c\u00e1lculo ayuda a cuantificar la gravedad de los cambios de dise\u00f1o inesperados en una p\u00e1gina web. Por ejemplo, si toda la pantalla se mueve hacia abajo, es peor que si solo se mueve la mitad.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"El_peor_escenario_posible\"><\/span>El peor escenario posible<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Pollard describi\u00f3 el peor caso para un solo cambio de dise\u00f1o: \u00abEl m\u00e1ximo cambio es si el 100% de la pantalla (fracci\u00f3n de impacto = 1.0) se mueve una pantalla completa hacia abajo (fracci\u00f3n de distancia = 1.0). Esto da un puntaje de cambio de dise\u00f1o de 1.0 y es b\u00e1sicamente el peor tipo de cambio.\u00bb<\/p>\n\n<p>Sin embargo, record\u00f3 que el CLS es acumulativo: \u00abTomamos todos los cambios individuales que ocurren en un corto espacio de tiempo (m\u00e1ximo 5 segundos) y los sumamos para obtener el puntaje de CLS.\u00bb<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"La_ventana_de_medicion_de_5_segundos\"><\/span>La ventana de medici\u00f3n de 5 segundos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>La raz\u00f3n detr\u00e1s de la ventana de medici\u00f3n de 5 segundos es, seg\u00fan la fuente, que acumular todos los cambios no med\u00eda realmente la experiencia del usuario, especialmente para p\u00e1ginas abiertas durante mucho tiempo. Medir todos los cambios significaba que, dado suficiente tiempo, incluso las mejores p\u00e1ginas fallar\u00edan.<\/p>\n\n<p>Pollard tambi\u00e9n se\u00f1al\u00f3 el m\u00e1ximo te\u00f3rico del puntaje CLS: \u00abDado que cada elemento solo puede cambiar cuando se dibuja un frame y tenemos un l\u00edmite de 5 segundos, y la mayor\u00eda de los dispositivos funcionan a 60fps, eso da un l\u00edmite te\u00f3rico en el CLS de 300.\u00bb<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Interpretando_los_puntajes_de_CLS\"><\/span>Interpretando los puntajes de CLS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Para entender mejor los puntajes, Pollard sugiri\u00f3 pensar en el CLS como un porcentaje de movimiento. El umbral bueno de 0.1 significa que aproximadamente la p\u00e1gina se movi\u00f3 un 10%. Esto podr\u00eda significar que toda la p\u00e1gina se movi\u00f3 un 10%, o la mitad de la p\u00e1gina se movi\u00f3 un 20%.<\/p>\n\n<p>En cuanto a los valores espec\u00edficos de umbral, explic\u00f3: \u00ab\u00bfPor qu\u00e9 0.1 es &#8216;bueno&#8217; y 0.25 es &#8216;pobre&#8217;? Fue una combinaci\u00f3n de lo que quer\u00edamos (\u00a1CLS = 0!) y lo que es alcanzable. 0.05 era alcanzable en la mediana, pero para muchos sitios no lo ser\u00eda, as\u00ed que fuimos un poco m\u00e1s altos.\u00bb<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Importancia_para_desarrolladores_y_SEO\"><\/span>Importancia para desarrolladores y SEO<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Seg\u00fan la fuente, los insights de Pollard proporcionan a los desarrolladores web y profesionales de SEO una comprensi\u00f3n m\u00e1s clara de c\u00f3mo medir y optimizar el CLS. Al trabajar con el CLS, es crucial tener en cuenta que:<\/p>\n\n<ul>\n  <li>El CLS es sin unidad y se calcula a partir de las fracciones de impacto y distancia.<\/li>\n  <li>Es acumulativo, midiendo cambios en una ventana de 5 segundos.<\/li>\n  <li>El umbral \u00abbueno\u00bb de 0.1 equivale aproximadamente a un 10% de movimiento de pantalla.<\/li>\n  <li>Los puntajes de CLS pueden superar 1.0 debido a m\u00faltiples cambios acumulados.<\/li>\n  <li>Los umbrales equilibran el rendimiento ideal con objetivos alcanzables.<\/li>\n<\/ul>\n\n<p>Con esta informaci\u00f3n, los desarrolladores pueden realizar ajustes para alcanzar el umbral establecido por Google y mejorar as\u00ed la experiencia del usuario.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Por_que_esto_importa\"><\/span>Por qu\u00e9 esto importa<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Comprender c\u00f3mo se mide el CLS es vital para ofrecer una experiencia de usuario <strong>estable y satisfactoria<\/strong>. Un bajo puntaje de CLS puede llevar a una mejor visibilidad en las b\u00fasquedas, ya que es un factor que Google considera en su algoritmo.<\/p>\n\n<p>Adem\u00e1s, optimizar el CLS contribuye a reducir la frustraci\u00f3n del usuario causada por elementos que se mueven inesperadamente en la p\u00e1gina, mejorando as\u00ed la usabilidad del sitio.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Pasos_a_seguir_para_optimizar_el_CLS\"><\/span>Pasos a seguir para optimizar el CLS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Para lograr un buen puntaje de CLS, la fuente sugiere:<\/p>\n\n<ul>\n  <li>Asegurarse de que las im\u00e1genes y videos tengan dimensiones especificadas.<\/li>\n  <li>Reservar espacio para anuncios y elementos incrustados.<\/li>\n  <li>Evitar insertar contenido nuevo encima de contenido existente.<\/li>\n<\/ul>\n\n<p>Estos pasos ayudar\u00e1n a minimizar los cambios de dise\u00f1o inesperados y mejorar el puntaje de CLS de tu sitio web.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n<p>Seg\u00fan la fuente, las aclaraciones de Barry Pollard sobre el CLS ofrecen una gu\u00eda valiosa para desarrolladores y profesionales de SEO. Entender y aplicar estos conceptos es esencial para mejorar la experiencia del usuario y <strong>potenciar la visibilidad<\/strong> en los resultados de b\u00fasqueda de Google.<\/p>\n\n<p>Al centrarse en optimizar el CLS, estar\u00e1s un paso m\u00e1s cerca de ofrecer un sitio web de alta calidad que cumpla con los est\u00e1ndares actuales de rendimiento web.<\/p>\n\n\n\n<p>Fuente: https:\/\/www.searchenginejournal.com\/google-explains-how-cumulative-layout-shift-cls-is-measured\/529987\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Atenci\u00f3n desarrolladores web y amantes del SEO! Seg\u00fan la fuente, Google ha arrojado luz sobre c\u00f3mo se mide el Cumulative &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Google explica c\u00f3mo se mide el cambio de dise\u00f1o acumulativo (CLS) Google Web Performance\" class=\"read-more button\" href=\"https:\/\/quondos.com\/mag\/google-explica-como-se-mide-el-cambio-de-diseno-acumulativo-cls-google-web-performance\/#more-127620\" aria-label=\"Leer m\u00e1s sobre Google explica c\u00f3mo se mide el cambio de dise\u00f1o acumulativo (CLS) Google Web Performance\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":850,"featured_media":125682,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[236],"tags":[],"class_list":["post-127620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/127620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/users\/850"}],"replies":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/comments?post=127620"}],"version-history":[{"count":1,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/127620\/revisions"}],"predecessor-version":[{"id":127621,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/posts\/127620\/revisions\/127621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media\/125682"}],"wp:attachment":[{"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/media?parent=127620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/categories?post=127620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/quondos.com\/mag\/wp-json\/wp\/v2\/tags?post=127620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}