{"id":26709,"date":"2022-12-20T17:48:04","date_gmt":"2022-12-20T16:48:04","guid":{"rendered":"\/tutoriales\/?p=26709"},"modified":"2025-12-18T22:26:33","modified_gmt":"2025-12-18T21:26:33","slug":"que-es-cumulative-layout-shift","status":"publish","type":"post","link":"\/es\/tutoriales\/que-es-cumulative-layout-shift\/","title":{"rendered":"\u00bfQu\u00e9 es Cumulative Layout Shift (CLS) y c\u00f3mo mejorarlo?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Empecemos por responder a la pregunta principal: &iquest;Qu&eacute; es CLS?<\/p><p class=\"wp-block-paragraph\"><\/p><p class=\"wp-block-paragraph\"><div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   &iquest;Qu&eacute; es Cumulative Layout Shift (CLS)?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">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><\/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 class=\"wp-block-paragraph\">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=\"\/es\/tutoriales\/core-web-vitals\/\">Core Web Vitals<\/a> y Google puede penalizar a un sitio que no cumpla su est&aacute;ndar.<\/p><p class=\"wp-block-paragraph\">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=\"\/es\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-1.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"Puntuaci&oacute;n del Cumulative Layout Shift\" class=\"wp-image-27035\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-1.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-1.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-1.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-1.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    M&aacute;s informaci&oacute;n sobre Core Web Vitals                <\/p>\n            <\/div>\n            <p class=\"protip__content\"> <a href=\"\/es\/tutoriales\/largest-contentful-paint\/\">&iquest;Qu&eacute; es el Largest Contentful Paint (LPC) y c&oacute;mo optimizarlo?<\/a> <\/p>\n                    <\/div>\n        <\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\/public\" alt=\"Herramientas del desarrollador de Google Chrome\" class=\"wp-image-43059\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\/w=1032,fit=scale-down 1032w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-39.png\/w=768,fit=scale-down 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\/public\" alt=\"Secci&oacute;n de Rendimiento de lash erramientas del desarrollador de Google Chrome\" class=\"wp-image-43060\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\/w=1028,fit=scale-down 1028w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-40.png\/w=768,fit=scale-down 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\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"679\" height=\"389\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-41.png\/public\" alt=\"Secci&oacute;n de Layout Shift en las herramientas del desarrollador de Google Chrome\" class=\"wp-image-43061\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-41.png\/w=679,fit=scale-down 679w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-41.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-41.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-42.png\/public\" alt=\"Evaluaci&oacute;n general de Core Web Vitals en PageSpeed Insights\" class=\"wp-image-43062\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-42.png\/w=932,fit=scale-down 932w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-42.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-42.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-42.png\/w=768,fit=scale-down 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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-43.png\/public\" alt=\"Evaluaci&oacute;n general de Core Web Vitals en PageSpeed Insights\" class=\"wp-image-43063\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-43.png\/w=930,fit=scale-down 930w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-43.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-43.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-43.png\/w=768,fit=scale-down 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\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"470\" height=\"246\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-44.png\/public\" alt=\"Evaluaci&oacute;n del Cumulative Layout Shift (CLS) en PageSpeed Insights\" class=\"wp-image-43065\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-44.png\/w=470,fit=scale-down 470w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-44.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-44.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 470px) 100vw, 470px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">El c&aacute;lculo para obtener una puntuaci&oacute;n CLS es:<\/p><p class=\"wp-block-paragraph\"><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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Fracci&oacute;n de impacto = Regi&oacute;n de impacto \/ &Aacute;rea de visualizaci&oacute;n<\/strong><\/p><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-2.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"Fracci&oacute;n de impacto para calcular el CLS\" class=\"wp-image-27037\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-2.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-2.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-2.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-2.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\">Fracci&oacute;n de distancia<\/h3><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Fracci&oacute;n de distancia = Distancia m&aacute;xima de movimiento \/ &Aacute;rea de visualizaci&oacute;n<\/strong><\/p><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-3-1.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"Fracci&oacute;n de distancia para calcular el CLS\" class=\"wp-image-27039\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-3-1.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-3-1.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-3-1.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/cumulative-layout-shift-es-3-1.jpg\/w=768,fit=scale-down 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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Estas acciones suelen esperar una respuesta de la red para cargar elementos, lo que provoca mayores desplazamientos inesperados del dise&ntilde;o.<\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-45.png\/public\" alt=\"Elementos inestables en el panel Rendimiento de las herramientas del desarrollador\" class=\"wp-image-43066\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-45.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-45.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-45.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-45.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"506\" height=\"317\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-46.png\/public\" alt=\"Secci&oacute;n de resumen en las herramientas del desarrollador de Google Chrome\" class=\"wp-image-43067\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-46.png\/w=506,fit=scale-down 506w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-46.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-46.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-47.png\/public\" alt=\"Secci&oacute;n de Diagn&oacute;sticos en PageSpeed Insights\" class=\"wp-image-43068\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-47.png\/w=949,fit=scale-down 949w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-47.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-47.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-47.png\/w=768,fit=scale-down 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 class=\"wp-block-paragraph\">La puntuaci&oacute;n CLS es un factor de clasificaci&oacute;n, por lo que optimizarla te ayudar&aacute; a atraer <a href=\"\/es\/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 class=\"wp-block-paragraph\"><strong>Nivel de dificultad: F&aacute;cil<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impacto: Alto<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Nivel de dificultad: Medio<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impacto: Alto<\/strong><\/p><p class=\"wp-block-paragraph\">Reservar espacio para banners, incrustaciones e iFrames ayuda a evitar cambios en el dise&ntilde;o.<\/p><p class=\"wp-block-paragraph\"><strong>Anuncios<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Incrustaciones e iFrames<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Del mismo modo, un <a href=\"\/es\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-48.png\/public\" alt=\"Funci&oacute;n de Inspeccionar de las herramientas del desarrollador de Google Chrome\" class=\"wp-image-43069\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-48.png\/w=963,fit=scale-down 963w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-48.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-48.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2022\/12\/image-48.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Nivel de dificultad: Medio<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impacto: Medio<\/strong><\/p><p class=\"wp-block-paragraph\"><a href=\"\/es\/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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\"><strong>Nivel de dificultad: Medio<\/strong><\/p><p class=\"wp-block-paragraph\"><strong>Impacto: Alto<\/strong><\/p><p class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">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 class=\"wp-block-paragraph\">Si quieres seguir mejorando el rendimiento de tu sitio web, aseg&uacute;rate de utilizar un plan de <a href=\"\/es\/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 \"><strong>&iquest;Qu&eacute; es un cambio de disposici&oacute;n previsto e imprevisto?<\/strong><\/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. <\/p>\n<p>Ten 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 \"><strong>&iquest;Afecta la carga lenta a el Cumulative Layout Shift?<\/strong><\/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 <a href=\"\/tutoriales\/optimizar-imagenes\">optimizar las im&aacute;genes<\/a> de una p&aacute;gina web.<\/p>\n<p>Por 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 \"><strong>&iquest;Se calcula la puntuaci&oacute;n CLS s&oacute;lo para el contenido por encima del pliegue?<\/strong><\/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 <a href=\"https:\/\/www.hostinger.com\/es\/tutoriales\/test-velocidad-web\/\">velocidad del sitio web<\/a>, 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=\"\/es\/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":1},{"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-PH","link":"https:\/\/www.hostinger.com\/ph\/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-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/cumulative-layout-shift-cls\/","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":"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},{"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":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/cumulative-layout-shift\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/26709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=26709"}],"version-history":[{"count":20,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/26709\/revisions"}],"predecessor-version":[{"id":49852,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/26709\/revisions\/49852"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=26709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=26709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=26709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}