{"id":26709,"date":"2022-12-20T17:48:04","date_gmt":"2022-12-20T16:48:04","guid":{"rendered":"\/tutoriales\/?p=26709"},"modified":"2026-03-10T16:34:04","modified_gmt":"2026-03-10T15:34:04","slug":"que-es-cumulative-layout-shift","status":"publish","type":"post","link":"\/ar\/tutoriales\/que-es-cumulative-layout-shift","title":{"rendered":"\u00bfQu\u00e9 es Cumulative Layout Shift (CLS) y c\u00f3mo mejorarlo?"},"content":{"rendered":"<p>El <strong>Cumulative Layout Shift (CLS)<\/strong>, o desplazamiento de dise&ntilde;o acumulativo en espa&ntilde;ol<strong>, <\/strong>es una m&eacute;trica que eval&uacute;a la experiencia del sitio midiendo cu&aacute;nto se desplazan inesperadamente las p&aacute;ginas de tu sitio web.&nbsp;<\/p><p>Aunque hay varios elementos del sitio que influyen en la experiencia del usuario, una puntuaci&oacute;n CLS baja tambi&eacute;n afecta a la optimizaci&oacute;n para motores de b&uacute;squeda (SEO) de tu sitio web. Por lo tanto, entender qu&eacute; es CLS y c&oacute;mo conseguir una buena puntuaci&oacute;n CLS ayuda a mejorar el rendimiento general de tu sitio web.<\/p><p>En este art&iacute;culo hablaremos de las distintas formas de medir una puntuaci&oacute;n CLS. Tambi&eacute;n explicaremos qu&eacute; elementos influyen en ella y responderemos a algunas preguntas frecuentes sobre CLS al final de este art&iacute;culo.&nbsp;<\/p><p>Empecemos por responder a la pregunta principal: &iquest;Qu&eacute; es CLS?<\/p><p><div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">&iquest;Qu&eacute; es Cumulative Layout Shift (CLS)?<\/h2>\n                    <p>El desplazamiento de dise&ntilde;o acumulativo mide la estabilidad visual de las p&aacute;ginas web, calculando la cantidad total de desplazamientos de dise&ntilde;o inesperados en una p&aacute;gina web. Un cambio de dise&ntilde;o se produce cuando un elemento visible cambia de posici&oacute;n o tama&ntilde;o, desplazando el contenido a su alrededor.<\/p>\n                <\/div><\/p><h2 class=\"wp-block-heading\" id=\"h-impacto-del-cumulative-layout-shift-en-seo\">Impacto del Cumulative Layout Shift en SEO<\/h2><p>El Cumulative Layout Shift es un factor de clasificaci&oacute;n en Google, ya que afecta al rendimiento del sitio web y a la experiencia del usuario. Es una de las m&eacute;tricas <a href=\"\/ar\/tutoriales\/core-web-vitals\">Core Web Vitals<\/a> y Google puede penalizar a un sitio que no cumpla su est&aacute;ndar.<\/p><p>Una puntuaci&oacute;n CLS baja indica que un sitio web no es fiable, lo que puede hacer que los visitantes lo abandonen m&aacute;s r&aacute;pidamente. Por tanto, <a href=\"\/ar\/tutoriales\/optimizacion-web\">optimizar tu sitio web<\/a> para obtener una puntuaci&oacute;n CLS alta es un componente esencial de una estrategia SEO exitosa.<\/p><h3 class=\"wp-block-heading\" id=\"h-que-es-una-buena-puntuacion-cls\">&iquest;Qu&eacute; es una buena puntuaci&oacute;n CLS?<\/h3><p>Una puntuaci&oacute;n CLS alta indica un n&uacute;mero considerable de cambios de dise&ntilde;o inesperados en una p&aacute;gina web. Por otro lado, una p&aacute;gina totalmente est&aacute;tica puede obtener una puntuaci&oacute;n tan baja como <strong>cero<\/strong>.<\/p><p>Google ha establecido un est&aacute;ndar para todas las m&eacute;tricas Core Web Vitals con el fin de ayudar a los propietarios de sitios a medir y mejorar sus puntuaciones CLS:&nbsp;<\/p><ul class=\"wp-block-list\">\n<li><strong>Bien<\/strong>: por debajo de <strong>0,1 <\/strong>es la puntuaci&oacute;n aceptable seg&uacute;n la norma de Google.<\/li>\n\n\n\n<li><strong>Necesita mejorar: <\/strong>entre <strong>0,1 y 0,25 <\/strong>indica que necesitas hacer cambios para reducir los cambios inesperados.<\/li>\n\n\n\n<li><strong>Bajo<\/strong>: por encima de <strong>0,25 <\/strong>puede da&ntilde;ar la clasificaci&oacute;n de tu sitio.<\/li>\n<\/ul><p>Un sitio web puede tener diferentes puntuaciones CLS para diferentes p&aacute;ginas web y pantallas. Los cambios de dise&ntilde;o en pantallas m&oacute;viles tienen un impacto m&aacute;s significativo en la experiencia del usuario m&oacute;vil.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"365\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-1-1024x365.jpg\" alt=\"Puntuaci&oacute;n del Cumulative Layout Shift\" class=\"wp-image-27035\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-1.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-1-300x107.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-1-150x53.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-1-768x273.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><div class=\"protip\">\n                    <h4 class=\"title\">M&aacute;s informaci&oacute;n sobre Core Web Vitals<\/h4>\n                    <p> <a href=\"\/ar\/tutoriales\/largest-contentful-paint\">&iquest;Qu&eacute; es el Largest Contentful Paint (LPC) y c&oacute;mo optimizarlo?<\/a> <\/p>\n                <\/div><\/p><h2 class=\"wp-block-heading\" id=\"h-como-medir-tu-puntuacion-cumulative-layout-shift\">C&oacute;mo medir tu puntuaci&oacute;n Cumulative Layout Shift<\/h2><p>A continuaci&oacute;n se presentan dos m&eacute;todos populares para realizar una prueba de Cumulative Layout Shift:<\/p><ul class=\"wp-block-list\">\n<li><strong>En laboratorio<\/strong>: simula la experiencia del usuario en un entorno controlado.<\/li>\n\n\n\n<li><strong>Sobre terreno<\/strong>: basado en interacciones reales con los usuarios.<\/li>\n<\/ul><p>No existe un m&eacute;todo mejor, ya que el uso de ambos proporcionar&aacute; datos m&aacute;s fiables sobre el rendimiento de tu sitio web. Para ayudarte a medir el CLS de tu sitio web, Google pone a tu disposici&oacute;n varias herramientas <strong>gratuitas<\/strong>.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-opcion-1-medicion-de-cls-en-laboratorio\">Opci&oacute;n 1: medici&oacute;n de CLS en laboratorio<\/h3><p>Cuando se mide CLS en laboratorio, el resultado tiene en cuenta una peque&ntilde;a gama de situaciones posibles. La mayor&iacute;a de las herramientas de desarrollo de navegadores ofrecen una forma de calcular la puntuaci&oacute;n CLS de una p&aacute;gina web, mostrando usualmente una superposici&oacute;n de rect&aacute;ngulos que muestran las regiones afectadas.<\/p><p>A continuaci&oacute;n los pasos necesarios para medir el CLS utilizando <strong>las herramientas para desarrolladores de Google Chrome<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Haz clic en el men&uacute; de tu navegador y dir&iacute;gete a <strong>M&aacute;s herramientas <\/strong>-&gt; <strong>Herramientas del desarrollador<\/strong>. Otra opci&oacute;n es pulsar <strong>Ctrl + May&uacute;s + I <\/strong>y seleccionar el panel <strong>Rendimiento<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1032\" height=\"461\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\" alt=\"Herramientas del desarrollador de Google Chrome\" class=\"wp-image-43059\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-39.png 1032w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-39-300x134.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-39-1024x457.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-39-150x67.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-39-768x343.png 768w\" sizes=\"(max-width: 1032px) 100vw, 1032px\" \/><\/figure><ol start=\"2\" class=\"wp-block-list\">\n<li>Marca la opci&oacute;n <strong>M&eacute;tricas web esenciales <\/strong>y haz clic en el <strong>bot&oacute;n de recarga <\/strong>o pulsa <strong>Ctrl + May&uacute;s + E <\/strong>para grabar la carga de la p&aacute;gina.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1028\" height=\"482\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\" alt=\"Secci&oacute;n de Rendimiento de lash erramientas del desarrollador de Google Chrome\" class=\"wp-image-43060\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-40.png 1028w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-40-300x141.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-40-1024x480.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-40-150x70.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-40-768x360.png 768w\" sizes=\"(max-width: 1028px) 100vw, 1028px\" \/><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Espera al resultado y haz clic en la pesta&ntilde;a <strong>Desplazamiento del dise&ntilde;o <\/strong>junto a <strong>Experiencia<\/strong>. La herramienta mostrar&aacute; la <strong>Puntuaci&oacute;n Acumulada <\/strong>en <strong>Resumen<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"679\" height=\"389\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-41.png\" alt=\"Secci&oacute;n de Layout Shift en las herramientas del desarrollador de Google Chrome\" class=\"wp-image-43061\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-41.png 679w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-41-300x172.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-41-150x86.png 150w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure><\/div><p>Ten en cuenta que puede haber varias pesta&ntilde;as <strong>Layout Shift <\/strong>que dan diferentes puntuaciones debido a varios elementos visuales que muestran cambios de dise&ntilde;o. Haz clic en cada pesta&ntilde;a para ver qu&eacute; elemento est&aacute; causando el problema en tu p&aacute;gina web.<\/p><p>Otras herramientas que ayudan a medir el CLS en un entorno controlado son <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\" target=\"_blank\" rel=\"noreferrer noopener\">Lighthouse<\/a> y la <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noreferrer noopener\">extensi&oacute;n Chrome Web Vitals<\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-opcion-2-medicion-de-cls-sobre-terreno-datos-de-usuarios-reales\">Opci&oacute;n 2: medici&oacute;n de CLS sobre terreno (datos de usuarios reales)<\/h3><p>El otro m&eacute;todo mide las interacciones reales de los usuarios utilizando el <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener\">Informe de experiencia de usuario de Chrome (CrUX)<\/a> como fuente principal de datos, lo que ayuda a analizar el rendimiento general de tu sitio web.<\/p><p>Una herramienta popular para ayudar a medir tus datos reales de usuario es <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a>. Estos son los pasos para utilizar PageSpeed Insights para calcular la puntuaci&oacute;n CLS de una p&aacute;gina web:<\/p><ol class=\"wp-block-list\">\n<li><strong>Introduce la URL de una p&aacute;gina web <\/strong>y haz clic en el bot&oacute;n <strong>Analizar <\/strong>para comprobar su rendimiento.<\/li>\n\n\n\n<li>PageSpeed Insights mostrar&aacute; la <strong>evaluaci&oacute;n general de Core Web Vitals <\/strong>y si la p&aacute;gina web cumple el est&aacute;ndar de Google. La herramienta mostrar&aacute; primero el resultado para dispositivos m&oacute;viles.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"932\" height=\"560\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-42.png\" alt=\"Evaluaci&oacute;n general de Core Web Vitals en PageSpeed Insights\" class=\"wp-image-43062\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-42.png 932w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-42-300x180.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-42-150x90.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-42-768x461.png 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure><ol start=\"3\" class=\"wp-block-list\">\n<li>Haz clic en <strong>Escritorio <\/strong>para encontrar la puntuaci&oacute;n CLS para dispositivos de escritorio. Observa c&oacute;mo la puntuaci&oacute;n puede ser diferente en distintas pantallas.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"930\" height=\"548\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-43.png\" alt=\"Evaluaci&oacute;n general de Core Web Vitals en PageSpeed Insights\" class=\"wp-image-43063\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-43.png 930w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-43-300x177.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-43-150x88.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-43-768x453.png 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/figure><ol start=\"4\" class=\"wp-block-list\">\n<li>Haz clic en <strong>Ampliar vista <\/strong>para comprender mejor la puntuaci&oacute;n.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"470\" height=\"246\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-44.png\" alt=\"Evaluaci&oacute;n del Cumulative Layout Shift (CLS) en PageSpeed Insights\" class=\"wp-image-43065\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-44.png 470w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-44-300x157.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-44-150x79.png 150w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/figure><\/div><p>Otras herramientas populares para ayudar a medir el CLS sobre terreno son <a href=\"https:\/\/console.cloud.google.com\/projectselector2\/bigquery\" target=\"_blank\" rel=\"noreferrer noopener\">BigQuery<\/a> y <a href=\"https:\/\/marketingplatform.google.com\/about\/data-studio\/\" target=\"_blank\" rel=\"noreferrer noopener\">Looker Studio<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-se-calcula-la-puntuacion-cls\">C&oacute;mo se calcula la puntuaci&oacute;n CLS<\/h2><p>Comprender c&oacute;mo se calcula la puntuaci&oacute;n del Cumulative Layout Shift ayudar&aacute; a optimizarlo. Las puntuaciones CLS miden dos elementos en un desplazamiento de dise&ntilde;o inesperado:<\/p><ul class=\"wp-block-list\">\n<li><strong>La fracci&oacute;n de impacto<\/strong>: mide el efecto de un elemento inestable en la ventana gr&aacute;fica.<\/li>\n\n\n\n<li><strong>La fracci&oacute;n de distancia<\/strong>: mide la distancia a la que se mueve el elemento en la ventana gr&aacute;fica.<\/li>\n<\/ul><p>El c&aacute;lculo para obtener una puntuaci&oacute;n CLS es:<\/p><p><strong>Puntuaci&oacute;n final CLS = Fracci&oacute;n de impacto x Fracci&oacute;n de distancia<\/strong><\/p><h3 class=\"wp-block-heading\" id=\"h-fraccion-de-impacto\">Fracci&oacute;n de impacto<\/h3><p>La fracci&oacute;n de impacto mide cu&aacute;nto espacio ocupa un elemento inestable en el &aacute;rea de la ventana gr&aacute;fica. Cuando los elementos visibles se desplazan inesperadamente a otra zona, la fracci&oacute;n de impacto calcula el &aacute;rea total que ocupa el desplazamiento:<\/p><p><strong>Fracci&oacute;n de impacto = Regi&oacute;n de impacto \/ &Aacute;rea de visualizaci&oacute;n<\/strong><\/p><p>Esta puntuaci&oacute;n demuestra c&oacute;mo afectan los elementos inestables al rendimiento general del sitio web.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-2-1024x524.jpg\" alt=\"Fracci&oacute;n de impacto para calcular el CLS\" class=\"wp-image-27037\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-2.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-2-300x153.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-2-150x77.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-2-768x393.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\">Fracci&oacute;n de distancia<\/h3><p>La fracci&oacute;n de distancia mide la mayor distancia que se han desplazado los elementos inestables durante los cambios inesperados de disposici&oacute;n. El c&aacute;lculo para obtener la fracci&oacute;n de distancia es:<\/p><p><strong>Fracci&oacute;n de distancia = Distancia m&aacute;xima de movimiento \/ &Aacute;rea de visualizaci&oacute;n<\/strong><\/p><p>La puntuaci&oacute;n demuestra hasta qu&eacute; punto un elemento existente desplaza a otros elementos al desplazarse inesperadamente.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-3-1-1024x558.jpg\" alt=\"Fracci&oacute;n de distancia para calcular el CLS\" class=\"wp-image-27039\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-3-1.jpg 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-3-1-300x164.jpg 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-3-1-150x82.jpg 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/cumulative-layout-shift-es-3-1-768x419.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-encontrar-que-elemento-esta-causando-una-puntuacion-cls-baja\">C&oacute;mo encontrar qu&eacute; elemento est&aacute; causando una puntuaci&oacute;n CLS baja<\/h2><p>Si una p&aacute;gina web tiene una puntuaci&oacute;n CLS baja, algunos elementos que hay que examinar son:<\/p><ul class=\"wp-block-list\">\n<li>Anuncios de banner, incrustaciones, iFrames, elementos de imagen y v&iacute;deo sin especificaciones de tama&ntilde;o.<\/li>\n\n\n\n<li>Contenido din&aacute;mico por encima de la ventana gr&aacute;fica actual, sin marcador de tama&ntilde;o de pantalla.<\/li>\n\n\n\n<li>Fuentes personalizadas que cambian el comportamiento de renderizado.<\/li>\n<\/ul><p>Estas acciones suelen esperar una respuesta de la red para cargar elementos, lo que provoca mayores desplazamientos inesperados del dise&ntilde;o.<\/p><p>Las herramientas para medir la puntuaci&oacute;n CLS de una p&aacute;gina web tambi&eacute;n pueden se&ntilde;alar los elementos espec&iacute;ficos que pueden causar un problema con los cambios de dise&ntilde;o.<\/p><p>Por ejemplo, el panel <strong>Rendimiento <\/strong>de las<strong> <\/strong>herramientas de desarrollo de un navegador muestra los elementos inestables en la pesta&ntilde;a <strong>Layout Shift<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-45.png\" alt=\"Elementos inestables en el panel Rendimiento de las herramientas del desarrollador\" class=\"wp-image-43066\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-45.png 1024w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-45-300x137.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-45-150x68.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-45-768x350.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>El <strong>Resumen <\/strong>tambi&eacute;n comparte la <strong>Ubicaci&oacute;n <\/strong>y el <strong>Tama&ntilde;o <\/strong>originales y nuevos de un elemento inestable.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"506\" height=\"317\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-46.png\" alt=\"Secci&oacute;n de resumen en las herramientas del desarrollador de Google Chrome\" class=\"wp-image-43067\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-46.png 506w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-46-300x188.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-46-150x94.png 150w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure><\/div><p>En PageSpeed Insights, busca m&aacute;s detalles sobre el elemento causante de los cambios inesperados en la secci&oacute;n <strong>DIAGN&Oacute;STICOS<\/strong>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"949\" height=\"419\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-47.png\" alt=\"Secci&oacute;n de Diagn&oacute;sticos en PageSpeed Insights\" class=\"wp-image-43068\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-47.png 949w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-47-300x132.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-47-150x66.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-47-768x339.png 768w\" sizes=\"(max-width: 949px) 100vw, 949px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-mejorar-tu-puntuacion-del-cumulative-layout-shift\">C&oacute;mo mejorar tu puntuaci&oacute;n del Cumulative Layout Shift<\/h2><p>La puntuaci&oacute;n CLS es un factor de clasificaci&oacute;n, por lo que optimizarla te ayudar&aacute; a atraer <a href=\"\/ar\/tutoriales\/como-generar-trafico-web-rapidamente\">m&aacute;s tr&aacute;fico a tu sitio<\/a>. Aqu&iacute; cuatro formas de mejorar tu puntuaci&oacute;n CLS, junto con el nivel de dificultad y el impacto de cada m&eacute;todo.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-definicion-de-dimensiones-para-imagenes-y-videos\">1. Definici&oacute;n de dimensiones para im&aacute;genes y v&iacute;deos<\/h3><p><strong>Nivel de dificultad: F&aacute;cil<\/strong><\/p><p><strong>Impacto: Alto<\/strong><\/p><p>Todos los elementos de imagen y v&iacute;deo de una p&aacute;gina web necesitan atributos de tama&ntilde;o de anchura y altura para evitar desplazamientos inesperados. Un ejemplo de c&oacute;mo establecer tus atributos de anchura y altura tiene este aspecto:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt; img src=\"ejemplo.jpg\" width=\"400\" height=\"400\" alt=\"Ejemplo de imagen.\"&gt;<\/pre><p>Sin embargo, las im&aacute;genes adaptables deben utilizar la misma relaci&oacute;n de aspecto para ayudar a los navegadores a calcular la cantidad correcta de espacio necesario para mostrarlas.<\/p><p>El atributo <strong>srcset <\/strong>define un conjunto de diferentes tama&ntilde;os de imagen utilizando la misma relaci&oacute;n de aspecto para ayudar a los navegadores a ofrecer im&aacute;genes responsivas correctamente. Este es un ejemplo del aspecto del c&oacute;digo que utiliza este atributo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt; img width=\"1000\" height=\"1000\" src=\"ejemplo-1000.jpg\" srcset=\"ejemplo-1000.jpg 1000w, ejemplo-2000.jpg 2000w, ejemplo-3000.jpg 3000w\" alt=\"Ejemplo de una imagen.\"&gt;<\/pre><p>La mayor&iacute;a de los navegadores modernos tambi&eacute;n pueden establecer la relaci&oacute;n de aspecto predeterminada bas&aacute;ndose en los atributos de anchura y altura de la imagen o el v&iacute;deo. Por lo tanto, una forma de evitar los cambios de dise&ntilde;o es utilizar cuadros de relaci&oacute;n de aspecto CSS como en el siguiente ejemplo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">img {\naspect-ratio:attr(width)\/attr(height);\n}<\/pre><p>Este c&oacute;digo ayuda al navegador a predecir las diferentes relaciones de aspecto siguiendo las dimensiones de la imagen mientras la carga.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-configuracion-de-la-anchura-y-altura-de-los-banners-incrustaciones-e-iframes\">2. Configuraci&oacute;n de la anchura y altura de los banners, incrustaciones e iFrames<\/h3><p><strong>Nivel de dificultad: Medio<\/strong><\/p><p><strong>Impacto: Alto<\/strong><\/p><p>Reservar espacio para banners, incrustaciones e iFrames ayuda a evitar cambios en el dise&ntilde;o.<\/p><p><strong>Anuncios<\/strong><\/p><p>Los anuncios de banner que empujan el contenido visible pueden provocar grandes desplazamientos del dise&ntilde;o, lo que conduce a una experiencia de usuario no &oacute;ptima. Las redes publicitarias y los editores que admiten tama&ntilde;os de anuncios din&aacute;micos deben reservar previamente un marcador de posici&oacute;n para evitar puntuaciones CLS bajas.<\/p><p>Estiliza el elemento antes de que se cargue la biblioteca de etiquetas de anuncios para evitar que los anuncios de banner empujen el contenido visible. Aplicar este m&eacute;todo tambi&eacute;n es importante cuando un anuncio llena toda una fila o columna de la p&aacute;gina para evitar desplazamientos del dise&ntilde;o aunque el anuncio no se cargue.<\/p><p>Utiliza el elemento slot para especificar el tama&ntilde;o del anuncio mediante las propiedades CSS <strong>min-height <\/strong>y <strong>min-width<\/strong>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"ad-slot\" style=\"min-width: 300px; min-height: 250px;\"&gt;&lt;\/div&gt;<\/pre><p>Adem&aacute;s, a&ntilde;ade CSS media queries para especificar diferentes m&iacute;nimos cuando utilices diferentes tama&ntilde;os de pantalla:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width: 970px) {\n  #ad-slot {\n    min-height: 250px;\n  }\n}<\/pre><p>Utiliza tu historial de datos para elegir el mejor tama&ntilde;o para el espacio publicitario. Aseg&uacute;rate de tener en cuenta los distintos factores de forma y las diferencias sutiles en los tama&ntilde;os de los anuncios.<\/p><p>Este m&eacute;todo tambi&eacute;n funciona cuando se insertan anuncios no adhesivos en una p&aacute;gina web. Al a&ntilde;adir el espacio necesario, los anuncios no provocar&aacute;n cambios de dise&ntilde;o cuando se carguen fuera de la pantalla.<\/p><p><strong>Incrustaciones e iFrames<\/strong><\/p><p>Las incrustaciones pueden adoptar diversas formas, por lo que es m&aacute;s f&aacute;cil no estar seguro de su tama&ntilde;o en una p&aacute;gina web. Por eso, las plataformas no siempre reservan el espacio necesario para los widgets y aplicaciones incrustables.&nbsp;<\/p><p>Del mismo modo, un <a href=\"\/ar\/tutoriales\/que-es-iframe\">marco en l&iacute;nea (iFrame)<\/a> tambi&eacute;n incorpora elementos de terceros a una p&aacute;gina web, lo que puede provocar cambios en el dise&ntilde;o.<\/p><p>Para evitar que los elementos incrustados y los iFrames causen puntuaciones CLS bajas, inspecciona sus tama&ntilde;os utilizando las herramientas de desarrollo de tu navegador. Haz clic en el <strong>icono del puntero <\/strong>situado en la esquina superior izquierda de las herramientas de desarrollo y selecciona los elementos que deseas inspeccionar.<\/p><p>Tras seleccionar el elemento, la herramienta mostrar&aacute; su tama&ntilde;o.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"963\" height=\"635\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/uploads\/sites\/32\/2022\/12\/image-48.png\" alt=\"Funci&oacute;n de Inspeccionar de las herramientas del desarrollador de Google Chrome\" class=\"wp-image-43069\" srcset=\"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-48.png 963w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-48-300x198.png 300w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-48-150x99.png 150w, https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-content\/uploads\/sites\/38\/2022\/12\/image-48-768x506.png 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure><p>A&ntilde;ade estos tama&ntilde;os a tus elementos incrustados o iFrames.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-uso-de-font-display-para-fuentes-personalizadas\">3. Uso de font:display para fuentes personalizadas<\/h3><p><strong>Nivel de dificultad: Medio<\/strong><\/p><p><strong>Impacto: Medio<\/strong><\/p><p><a href=\"\/ar\/tutoriales\/fuentes-personalizadas-en-wordpress\">A&ntilde;adir una fuente personalizada<\/a> a tu sitio web puede aumentar la puntuaci&oacute;n CLS causando:<\/p><ul class=\"wp-block-list\">\n<li><strong>Destellos de Texto Invisible (FOIT)<\/strong>:<strong> <\/strong>el renderizado de la p&aacute;gina mostrar&aacute; texto invisible o una fuente en blanco hasta que cargue la fuente personalizada.<\/li>\n\n\n\n<li><strong>Destellos de texto sin estilo (FOUT)<\/strong>: los navegadores muestran una fuente de reserva hasta que cargan la fuente personalizada, ignorando moment&aacute;neamente el dise&ntilde;o de la p&aacute;gina.<\/li>\n<\/ul><p>Cargar una fuente web personalizada puede hacer que el dise&ntilde;o se desplace significativamente, a menudo debido al uso de una cantidad de espacio diferente a la que requiere la fuente del sistema. Utiliza los valores de <strong>font:display, <\/strong>como<strong> auto<\/strong>, <strong>fallback<\/strong>, <strong>block<\/strong>, <strong>swap <\/strong>y <strong>optional<\/strong>, para evitar texto invisible y sin estilo.<\/p><p>Otra forma de evitar cambios de estilo significativos en tus fuentes web es elegir una fuente de sistema similar:&nbsp;<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@font-face {\n  font-family: 'Pacifico';\n  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(www.examplefonts.woff2) format('woff2');\n  font-display: swap;\n}<\/pre><p>Con las fuentes web personalizadas de Google, evita el cambio de dise&ntilde;o a&ntilde;adiendo <strong>&amp;display=swap <\/strong>despu&eacute;s de tu enlace:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto:400,700&amp;display=swap\" rel=\"stylesheet\"&gt;<\/pre><p>A&ntilde;adir un valor <strong>&lt;link rel=preload&gt; <\/strong>a tu archivo de fuentes tambi&eacute;n ayudar&aacute; a evitar el desplazamiento del dise&ntilde;o al cargar fuentes web personalizadas.<\/p><h3 class=\"wp-block-heading\" id=\"h-4-revision-del-contenido-inyectado-dinamicamente\">4. Revisi&oacute;n del contenido inyectado din&aacute;micamente<\/h3><p><strong>Nivel de dificultad: Medio<\/strong><\/p><p><strong>Impacto: Alto<\/strong><\/p><p>Otro motivo de un problema CLS es el contenido din&aacute;mico. Los sitios web suelen utilizar contenido din&aacute;mico para atraer a los visitantes a completar una acci&oacute;n espec&iacute;fica. Sin embargo, cuando un nuevo elemento de contenido aparece en la parte superior o inferior de una p&aacute;gina, usualmente se desplaza el contenido a su alrededor.<\/p><p>Por lo tanto, evita inyectar contenido din&aacute;mico por encima del contenido existente. Algunas de las formas de revisar el contenido inyectado din&aacute;micamente son:&nbsp;<\/p><ul class=\"wp-block-list\">\n<li><strong>Invitar a los usuarios a iniciar cambios<\/strong>: a&ntilde;ade un elemento de interacci&oacute;n con el usuario para activar la carga de nuevos contenidos y evitar cambios inesperados. Algunos ejemplos son los botones <strong>Actualizar <\/strong>o <strong>Leer m&aacute;s<\/strong>. Ten en cuenta que debes mantener los cambios de dise&ntilde;o dentro de los <strong>500 ms <\/strong>para evitar que afecten el CLS.&nbsp;<\/li>\n\n\n\n<li><strong>Cargar contenido fuera de la pantalla<\/strong>: dado que los desplazamientos que se producen fuera de la pantalla no contribuyen a CLS, otra opci&oacute;n es cargar contenido din&aacute;mico fuera de la ventana gr&aacute;fica del usuario y utilizar una superposici&oacute;n para invitar a los usuarios a verlo, como una notificaci&oacute;n de <strong>desplazamiento hacia arriba<\/strong>.<\/li>\n\n\n\n<li><strong>Utilizar un contenedor de tama&ntilde;o fijo<\/strong>: ayuda a evitar que se desplace el dise&ntilde;o. Una de las opciones es utilizar un carrusel, que tambi&eacute;n es una alternativa adecuada si tu contenido din&aacute;mico sustituye un elemento por otro. Aseg&uacute;rate de que los enlaces o controles esperan a la transici&oacute;n para evitar clics accidentales.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>El Cumulative Layout Shift mide los cambios inesperados en el &aacute;rea de visualizaci&oacute;n del usuario para evaluar su experiencia. Adem&aacute;s, como factor de clasificaci&oacute;n de Google, CLS afecta significativamente a tus esfuerzos de SEO.<\/p><p>Una p&aacute;gina web con gran estabilidad visual tiene una puntuaci&oacute;n CLS inferior a <strong>0,1, <\/strong>mientras que todo lo que supere <strong>0,25 <\/strong>indica un rendimiento deficiente. Presentamos dos m&eacute;todos para medir CLS: en laboratorio y sobre terreno. Aunque es posible elegir un solo m&eacute;todo, el uso de ambos producir&aacute; resultados m&aacute;s fiables sobre el rendimiento de la p&aacute;gina web.<\/p><p>Despu&eacute;s de discutir c&oacute;mo identificar los elementos que aumentan tu puntuaci&oacute;n CLS, hemos compartido c&oacute;mo solucionar los problemas del Cumulative Layout Shift utilizando estos cuatro m&eacute;todos:<\/p><ul class=\"wp-block-list\">\n<li>Definici&oacute;n de dimensiones para im&aacute;genes y v&iacute;deos.<\/li>\n\n\n\n<li>Configuraci&oacute;n de anchura y altura para los anuncios de banner, incrustaciones e iFrames.<\/li>\n\n\n\n<li>Uso de los valores <strong>font:display <\/strong>para fuentes personalizadas.<\/li>\n\n\n\n<li>Revisi&oacute;n de contenidos din&aacute;micos.<\/li>\n<\/ul><p>H&aacute;znos saber qu&eacute; m&eacute;todos funcionaron mejor para tu puntuaci&oacute;n CLS en la secci&oacute;n de comentarios a continuaci&oacute;n.<\/p><p>Si quieres seguir mejorando el rendimiento de tu sitio web, aseg&uacute;rate de utilizar un plan de <a href=\"\/ar\/hosting-web\">hosting web<\/a> fiable. &iexcl;Mucha suerte!<\/p><h2 class=\"wp-block-heading\" id=\"h-cumulative-layout-shift-cls-preguntas-frecuentes\">Cumulative Layout Shift (CLS) &ndash; Preguntas frecuentes<\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694471895a440\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">u003cstrongu003e&iquest;Qu&eacute; es un cambio de disposici&oacute;n previsto e imprevisto?u003c\/strongu003e<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Un cambio de dise&ntilde;o esperado ocurre cuando hay una entrada del usuario. Por ejemplo, cuando un usuario pulsa un bot&oacute;n. En cambio, un cambio de dise&ntilde;o inesperado se produce cuando un elemento visible se desplaza sin que el usuario realice ninguna acci&oacute;n. u003cbr \/u003eu003cbr \/u003eTen en cuenta que tu puntuaci&oacute;n CLS s&oacute;lo tiene en cuenta los cambios de dise&ntilde;o inesperados.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694471895a444\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">u003cstrongu003e&iquest;Afecta la carga lenta a el Cumulative Layout Shift?u003c\/strongu003e<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>La carga lenta puede provocar cambios en el dise&ntilde;o cuando un usuario se desplaza por una p&aacute;gina web y el elemento visual a&uacute;n se est&aacute; cargando. Sin embargo, la carga lenta es esencial para u003ca href=u0022\/tutoriales\/optimizar-imagenesu0022u003eoptimizar las im&aacute;genesu003c\/au003e de una p&aacute;gina web.u003cbr \/u003eu003cbr \/u003ePor lo tanto, recuerda especificar las dimensiones de las im&aacute;genes de carga lenta para evitar que afecte a tu puntuaci&oacute;n CLS.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694471895a445\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">u003cstrongu003e&iquest;Se calcula la puntuaci&oacute;n CLS s&oacute;lo para el contenido por encima del pliegue?u003c\/strongu003e<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&iacute;, s&oacute;lo los cambios de dise&ntilde;o en el contenido por encima del pliegue afectan a tu puntuaci&oacute;n CLS. Sin embargo, optimizar todos los elementos de una p&aacute;gina web garantiza un mejor rendimiento general y u003ca href=u0022https:\/\/www.hostinger.com\/es\/tutoriales\/test-velocidad-webu0022u003evelocidad del sitio webu003c\/au003e, lo que a su vez afectar&aacute; al tr&aacute;fico y a la clasificaci&oacute;n.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>El Cumulative Layout Shift (CLS), o desplazamiento de dise&ntilde;o acumulativo en espa&ntilde;ol, es una m&eacute;trica que eval&uacute;a la experiencia del sitio midiendo cu&aacute;nto se desplazan inesperadamente las p&aacute;ginas de tu sitio web.&nbsp; Aunque hay varios elementos del sitio que influyen en la experiencia del usuario, una puntuaci&oacute;n CLS baja tambi&eacute;n afecta a la optimizaci&oacute;n para [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ar\/tutoriales\/que-es-cumulative-layout-shift\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":353,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Entender como funciona el Cumulative Layout Shift es importante para mejorar el rendimiento general de tu sitio web. Aqu\u00ed te explicamos...","rank_math_focus_keyword":"cumulative layout shift","footnotes":""},"categories":[5701],"tags":[],"class_list":["post-26709","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/cumulative-layout-shift","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/cumulative-layout-shift","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cumulative-layout-shift","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/cumulative-layout-shift","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-cumulative-layout-shift","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/cumulative-layout-shift-cls","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/cumulative-layout-shift-cls","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/26709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/comments?post=26709"}],"version-history":[{"count":21,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/26709\/revisions"}],"predecessor-version":[{"id":46673,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/posts\/26709\/revisions\/46673"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/media?parent=26709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/categories?post=26709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ar\/tutoriales\/wp-json\/wp\/v2\/tags?post=26709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}