\u00bfQu\u00e9 Es el Cambio de Dise\u00f1o Acumulativo (CLS)? Explicaci\u00f3n del Significado del Cambio de Dise\u00f1o Acumulativo<\/h2>\n
El Cumulative Layout Shift es la medida de cu\u00e1nto se desplaza inesperadamente una p\u00e1gina de tu sitio durante la visita de un usuario, seg\u00fan las mediciones de la API de Layout Instability<\/a>, una API estandarizada de pruebas de rendimiento<\/a>.<\/p>\n El Cambio de Dise\u00f1o Acumulativo (CLS) es una de las tres m\u00e9tricas de la iniciativa Core Web Vitals de Google<\/a>, junto con el Renderizado del Mayor Elemento con Contenido (LCP – Largest Contentful Paint) y la Latencia de la Primera Interacci\u00f3n (FID – First Input Delay).<\/p>\n Para entender el significado de Cumulative Layout Shift, es importante hablar del cambio de dise\u00f1o en general.<\/p>\n Un cambio de dise\u00f1o se produce cuando el contenido de tu sitio se \u00abmueve\u00bb o \u00abdesplaza\u00bb inesperadamente.<\/p>\n O, en t\u00e9rminos t\u00e9cnicos, es cuando cualquier elemento visible en la ventana gr\u00e1fica cambia su posici\u00f3n inicial entre dos fotogramas.<\/p>\n Un ejemplo com\u00fan ser\u00eda que estuvieras en mitad de la lectura de un bloque de texto… pero entonces aparece de repente un anuncio que se carga tarde y empuja el contenido del texto hacia abajo en la p\u00e1gina.<\/p>\n Aqu\u00ed tienes otra imagen de ejemplo de Google que muestra c\u00f3mo ocurre esto:<\/p>\n Es casi seguro que te has encontrado con cambios de dise\u00f1o al navegar por la web, aunque no los conozcas por ese nombre.<\/p>\n Una sola visita puede tener varios cambios de dise\u00f1o distintos. Por ello, la m\u00e9trica Cambio de Dise\u00f1o Acumulativo pretende captar la imagen completa midiendo la cantidad total de cambios de dise\u00f1o inesperados en una p\u00e1gina*.<\/p>\n *La medida exacta es un poco m\u00e1s t\u00e9cnica tras algunos cambios introducidos por Google, pero la idea b\u00e1sica sigue siendo \u00e9sa. Si te interesan los detalles concretos, puedes <\/em>lee sobre ello aqu\u00ed<\/em><\/a>.<\/em><\/p>\n\n La raz\u00f3n principal por la que el Cambio de Dise\u00f1o Acumulativo es malo es que crea una mala experiencia de usuario<\/a> en tu sitio.<\/p>\n En el mejor de los casos, es ligeramente molesto para tus visitantes. En el peor de los casos, puede hacer que los visitantes realicen acciones que no desean.<\/p>\n Por ejemplo, imagina que un usuario quiere hacer clic en \u00abCancelar\u00bb pero accidentalmente hace clic en \u00abConfirmar\u00bb porque un cambio de dise\u00f1o ha desplazado la posici\u00f3n de los botones justo cuando estaba haciendo clic.<\/p>\n Adem\u00e1s de afectar a la experiencia de tus visitantes humanos, tener malas puntuaciones de Cumulative Layout Shift tambi\u00e9n puede ser un lastre para la clasificaci\u00f3n de tu sitio en los motores de b\u00fasqueda<\/a>.<\/p>\n A partir de la actualizaci\u00f3n de la Experiencia en la P\u00e1gina de Google<\/a> (que termin\u00f3 de lanzarse en agosto de 2021), Google utiliza Core Web Vitals como uno de sus factores de clasificaci\u00f3n SEO. Dado que el Cumulative Layout Shift forma parte de Core Web Vitals, esto significa que puede afectar al rendimiento de b\u00fasqueda de tu sitio<\/a>.<\/p>\n B\u00e1sicamente, arreglar cualquier problema con el Cumulative Layout Shift en tu sitio ayudar\u00e1 a mejorarlo tanto para los visitantes humanos como para los motores de b\u00fasqueda.<\/p>\n Entonces, \u00bfcu\u00e1les podr\u00edan ser las causas del Cumulative Layout Shift? Ve\u00e1moslo a continuaci\u00f3n…<\/p>\n Aqu\u00ed tienes un breve resumen de las causas m\u00e1s comunes del desplazamiento de dise\u00f1o:<\/p>\n M\u00e1s adelante profundizaremos en estos problemas y te mostraremos c\u00f3mo solucionar cada uno de ellos.<\/p>\n Existen varias herramientas que puedes utilizar para comprobar la puntuaci\u00f3n del Cumulative Layout Shift de tu sitio.<\/p>\n Cumulative Layout Shift forma parte de la auditor\u00eda de Lighthouse, por lo que cualquier herramienta de prueba de velocidad que utilice Lighthouse como parte de su auditor\u00eda incluir\u00e1 datos CLS: esto incluye PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools y muchas otras herramientas de prueba populares<\/a>.<\/p>\n \u00c9stas son algunas de las principales herramientas de comprobaci\u00f3n del Cumulative Layout Shift que destacan por su utilidad…<\/p>\n PageSpeed Insights<\/a>\u00a0es una de las herramientas m\u00e1s \u00fatiles para evaluar el estado del cambio de dise\u00f1o de tu sitio porque te proporciona dos fuentes de datos:<\/p>\n Tambi\u00e9n puedes ver datos tanto para escritorio como para m\u00f3vil cambiando entre las pesta\u00f1as.<\/p>\n Nota<\/strong>: los datos de laboratorio s\u00f3lo pueden medir los cambios de dise\u00f1o que se producen durante la carga de la p\u00e1gina, por lo que los resultados de usuario real pueden ser ligeramente superiores si los cambios de dise\u00f1o se producen despu\u00e9s de la carga de la p\u00e1gina.<\/p>\n Las Herramientas para desarrolladores de Chrome ofrecen algunos recursos \u00fatiles<\/a> tanto para medir CLS como para depurar los cambios de dise\u00f1o individuales que se producen en tu sitio.<\/p>\n En primer lugar, puedes ejecutar una auditor\u00eda Lighthouse para ver la puntuaci\u00f3n CLS de tu sitio. He aqu\u00ed c\u00f3mo hacerlo:<\/p>\n Tras una breve espera, deber\u00edas ver la interfaz normal de auditor\u00eda de Lighthouse (que se parece mucho a PageSpeed Insights).<\/p>\n Sin embargo, las Herramientas para desarrolladores de Chrome tambi\u00e9n te permiten profundizar en CLS con su an\u00e1lisis de renderizado<\/strong>. Esto te permitir\u00e1 resaltar regiones individuales de cambio de dise\u00f1o en tu sitio, lo que te ayudar\u00e1 a depurarlas.<\/p>\n He aqu\u00ed c\u00f3mo hacerlo:<\/p>\n Ahora, vuelve a cargar la p\u00e1gina que quieres probar y Chrome deber\u00eda resaltar las \u00e1reas con cambios de dise\u00f1o mediante un recuadro azul. Estos resaltes aparecer\u00e1n en la p\u00e1gina real mientras se carga el contenido y desaparecer\u00e1n una vez finalizado el desplazamiento.<\/p>\n Si las zonas resaltadas aparecen demasiado r\u00e1pido para que puedas seguirlas, puedes ralentizar tu sitio y ver c\u00f3mo se carga fotograma a fotograma utilizando la pesta\u00f1a Rendimiento<\/strong>.<\/p>\n Aunque Google Search Console<\/a> no te permite realizar pruebas de laboratorio para determinar el cambio de dise\u00f1o acumulativo, te ofrece una forma sencilla de ver los problemas con el cambio de dise\u00f1o acumulativo en tu sitio, medidos por el informe UX de Chrome.<\/p>\n La ventaja de utilizar Google Search Console<\/a> en lugar de otras herramientas es que te permite ver r\u00e1pidamente los problemas en todo tu sitio en lugar de probar p\u00e1gina por p\u00e1gina.<\/p>\n A continuaci\u00f3n te explicamos c\u00f3mo ver los posibles problemas de tu sitio:<\/p>\n Si procede, Google resaltar\u00e1 las URL<\/a> con puntuaciones de Desplazamiento de dise\u00f1o acumulativo problem\u00e1ticas.<\/p>\n Nota<\/strong>: s\u00f3lo ver\u00e1s datos aqu\u00ed si tu sitio tiene suficiente tr\u00e1fico mensual para ser incluido en el informe Chrome UX.<\/p>\n Como su nombre indica, el Generador Generador de GIF Layout Shift<\/a> genera un GIF de los cambios de dise\u00f1o de tu sitio para que puedas ver exactamente qu\u00e9 contenido est\u00e1 causando problemas. Tambi\u00e9n te dar\u00e1 tu puntuaci\u00f3n, aunque ese no es el objetivo principal de la herramienta.<\/p>\n Todo lo que tienes que hacer es a\u00f1adir la URL que quieres probar y elegir entre m\u00f3vil o escritorio. A continuaci\u00f3n, generar\u00e1 un GIF de tu sitio con resaltes verdes que muestran los elementos exactos que est\u00e1n cambiando.<\/p>\n Al ver qu\u00e9 elementos se est\u00e1n desplazando y contribuyen a tu puntuaci\u00f3n de cambio de dise\u00f1o acumulativo, puedes saber exactamente d\u00f3nde centrarte a la hora de mejorar las puntuaciones de tu sitio.<\/p>\n Seg\u00fan la iniciativa Core Web Vitals de Google, una buena puntuaci\u00f3n del Cambio de dise\u00f1o acumulativo es de 0,1 o menos<\/strong>.<\/p>\n Si tu puntuaci\u00f3n de Cambio de dise\u00f1o acumulativo est\u00e1 entre 0,1 y 0,25, Google lo define como \u00abNecesita mejorar\u00bb.<\/p>\n Y si tu puntuaci\u00f3n de Desplazamiento de dise\u00f1o acumulativo es superior a 0,25, Google lo define como \u00abDeficiente\u00bb.<\/p>\n Aqu\u00ed tienes un gr\u00e1fico del sitio web Core Web Vitals de Google que muestra visualmente estas puntuaciones:<\/p>\n Ahora que ya sabes lo que ocurre con el Cumulative Layout Shift, es hora de pasar a algunos consejos pr\u00e1cticos sobre c\u00f3mo solucionar el Cumulative Layout Shift en WordPress.<\/p>\n Aunque estos consejos se refieren a WordPress, todos son universales y puedes aplicarlos a otras herramientas de creaci\u00f3n de sitios web.<\/p>\n Una de las causas m\u00e1s comunes del cambio del dise\u00f1o son las im\u00e1genes que se cargan tarde y desplazan el contenido, especialmente si utilizas t\u00e1cticas como la carga lenta<\/a>.<\/p>\n Para evitarlo, puedes especificar las dimensiones de una imagen en el c\u00f3digo cuando la incrustes. De este modo, el navegador del visitante reservar\u00e1 ese espacio aunque la imagen a\u00fan no se haya cargado, lo que significa que la imagen no tendr\u00e1 que desplazar el contenido.<\/p>\n Si incrustas im\u00e1genes a trav\u00e9s del editor de WordPress (ya sea el editor de bloques Gutenberg<\/a> o el editor cl\u00e1sico TinyMCE<\/a>), no es necesario especificar manualmente las dimensiones de la imagen porque WordPress lo har\u00e1 por ti autom\u00e1ticamente.<\/p>\n Lo mismo ocurre con los plugins constructores de p\u00e1ginas m\u00e1s populares<\/a>, como Elementor, Divi<\/a>, Beaver Builder, etc.<\/p>\n Sin embargo, pueden surgir problemas si est\u00e1s incrustando im\u00e1genes manualmente utilizando tu propio c\u00f3digo, lo que puede ocurrir si est\u00e1s a\u00f1adiendo contenido a un plugin, editando los archivos de plantilla de tu tema hijo<\/a>, etc.<\/p>\n El c\u00f3digo HTML para incrustar una imagen b\u00e1sica tiene este aspecto:<\/p>\n Para especificar sus dimensiones, puedes a\u00f1adir par\u00e1metros de altura<\/strong> y anchura<\/strong>. Aqu\u00ed tienes un ejemplo de c\u00f3mo quedar\u00eda una imagen de 600x300px:<\/p>\n Muchos plugins de rendimiento de WordPress<\/a> tambi\u00e9n incluyen funciones para automatizar esto, como las funciones A\u00f1adir dimensiones de im\u00e1genes que faltan<\/strong> en WP Rocket o Perfmatters.<\/p>\n Al igual que con las im\u00e1genes, tambi\u00e9n deber\u00e1s especificar las dimensiones cuando a\u00f1adas v\u00eddeos, iframes u otros elementos incrustados.<\/p>\n La mayor\u00eda de las herramientas de incrustaci\u00f3n de los sitios web deber\u00edan especificar autom\u00e1ticamente las dimensiones de la incrustaci\u00f3n.<\/p>\n Por ejemplo, si miras el c\u00f3digo de incrustaci\u00f3n de YouTube<\/a>, ver\u00e1s que incluye dimensiones:<\/p>\n Lo mismo ocurre con muchos otros servicios.<\/p>\n Sin embargo, si tu c\u00f3digo de incrustaci\u00f3n no especifica la altura y la anchura, puedes a\u00f1adir manualmente estas dimensiones al c\u00f3digo de incrustaci\u00f3n.<\/p>\n Los problemas con la carga y optimizaci\u00f3n de las fuentes pueden ser otra fuente com\u00fan de cambios de dise\u00f1o a trav\u00e9s de dos problemas potenciales:<\/p>\n Para evitar estos problemas, debes optimizar la forma en que cargas las fuentes en tu sitio (lo que tambi\u00e9n puede tener algunas ventajas para el rendimiento de tu sitio).<\/p>\n Al alojar las fuentes localmente y utilizar la precarga, indicas a los navegadores de los visitantes que den mayor prioridad a la carga de archivos de fuentes personalizadas.<\/p>\n Al cargar los archivos de fuentes antes que otros recursos, puedes asegurarte de que los archivos de fuentes ya est\u00e9n cargados cuando el navegador empiece a procesar tu contenido, lo que puede evitar problemas con FOUT y FOIT.<\/p>\n Para saber c\u00f3mo alojar fuentes localmente en WordPress, puedes leer nuestra gu\u00eda completa para alojar fuentes localmente en WordPress<\/a>.<\/p>\n A partir de ah\u00ed, puedes configurar la precarga de fuentes manualmente o mediante un plugin. La mayor\u00eda de los plugins de rendimiento incluyen opciones para precargar fuentes, como WP Rocket, Perfmatters, Autoptimize<\/a> y otros.<\/p>\n Si utilizas Google Fonts<\/a>, tambi\u00e9n puedes usar el plugin gratuito OMGF<\/a> para alojar las fuentes localmente y<\/em> precargarlas.<\/p>\n Tambi\u00e9n puedes precargar manualmente las fuentes a\u00f1adiendo el c\u00f3digo a la secci\u00f3n <head><\/strong> de tu sitio.<\/p>\n Aqu\u00ed tienes un ejemplo del c\u00f3digo – aseg\u00farate de sustituirlo por el nombre\/ubicaci\u00f3n real del archivo de fuentes que quieres precargar:<\/p>\n Puedes a\u00f1adirlo directamente utilizando un tema hijo de WordPress<\/a> o inyectarlo con el gancho wp_head<\/a> y un plugin como Code Snippets<\/a>.<\/p>\n La propiedad CSS Font-Display<\/a> te permite controlar el comportamiento de representaci\u00f3n de las fuentes en tu sitio y evitar FOIT.<\/p>\n B\u00e1sicamente, te permite utilizar una fuente alternativa en situaciones en las que tu fuente personalizada a\u00fan no se ha cargado.<\/p>\n Hay dos opciones principales que puedes utilizar para hacer frente a CLS:<\/p>\n Con Swap<\/strong>, el navegador siempre<\/strong> cambiar\u00e1 a la fuente personalizada una vez que se cargue.<\/p>\n Aunque Swap<\/strong> resuelve completamente FOIT, puede provocar FOUT. Para minimizarlo, debes asegurarte de que la fuente alternativa utiliza un espaciado id\u00e9ntico al de la fuente personalizada (al menos en la medida de lo posible). De este modo, aunque cambie el estilo de la fuente, no se producir\u00e1n cambios en el dise\u00f1o porque el espaciado ser\u00e1 el mismo.<\/p>\n Con Optional<\/strong>, el navegador dar\u00e1 a la fuente personalizada 100 ms para cargarse. Sin embargo, si la fuente personalizada no est\u00e1 disponible para entonces, el navegador seguir\u00e1 utilizando la fuente alternativa y nunca cambiar\u00e1 a la fuente personalizada para esa p\u00e1gina(utilizar\u00e1 la fuente personalizada para las siguientes p\u00e1ginas, ya que es probable que el archivo de fuente se haya descargado y almacenado en cach\u00e9 para entonces<\/em>).<\/p>\n Aunque Optional<\/strong> puede resolver tanto FOIT como FOUT, la desventaja es que el visitante puede quedarse con la fuente alternativa en su primera visita a la p\u00e1gina.<\/p>\n Si te sientes c\u00f3modo trabajando con CSS, puedes editar manualmente la propiedad Font-Display en la hoja de estilos de tu tema hijo.<\/p>\n Si no te sientes c\u00f3modo haci\u00e9ndolo, tambi\u00e9n puedes encontrar algunos plugins que te ayudar\u00e1n:<\/p>\n Si utilizas Elementor<\/a>, Elementor tambi\u00e9n incluye una opci\u00f3n integrada para hacer esto. Ve a Elementor \u2192 Ajustes \u2192 Avanzado<\/strong>. A continuaci\u00f3n, puedes establecer el desplegable Carga de Google Fonts<\/strong> igual a Intercambiar u Opcional seg\u00fan tus preferencias:<\/p>\n Si toda esta charla sobre precarga y visualizaci\u00f3n de fuentes te resulta un poco confusa, una soluci\u00f3n f\u00e1cil es utilizar una pila de fuentes del sistema en lugar de una pila de fuentes personalizada.<\/p>\n Aunque esto limita tus opciones de dise\u00f1o, resolver\u00e1 por completo los problemas de desplazamiento de dise\u00f1o acumulativo, FOIT y FOUT. Adem\u00e1s, har\u00e1 que tu sitio se cargue mucho m\u00e1s r\u00e1pido.<\/p>\n Si te interesa, consulta la gu\u00eda de Brian sobre el uso de una pila de fuentes de sistema en WordPress<\/a>.<\/p>\n Si utilizas anuncios de display, es importante que reserves espacio para esos anuncios en el c\u00f3digo de tu sitio. Esto sigue la misma idea que reservar espacio para im\u00e1genes, v\u00eddeos e incrustaciones.<\/p>\n Sin embargo, los anuncios de display merecen una menci\u00f3n especial porque es muy com\u00fan que los anuncios de display se carguen tarde si utilizas alg\u00fan tipo de tecnolog\u00eda de pujas. Esto se debe a que la tecnolog\u00eda de pujas necesita tiempo para funcionar y averiguar qu\u00e9 anuncio mostrar.<\/p>\n Tambi\u00e9n puede ser un problema con los anuncios autom\u00e1ticos de Ad Sense<\/a>\u00a0si tienes espacios publicitarios din\u00e1micos, porque, adem\u00e1s del problema de la puja, AdSense tambi\u00e9n cargar\u00e1 anuncios de diferentes tama\u00f1os<\/a> (por lo que es posible que no sepas el tama\u00f1o del anuncio de antemano).<\/p>\n Si utilizas una de las redes publicitarias de display m\u00e1s populares<\/a>, como Mediavine o AdThrive, ya deber\u00edan ofrecer herramientas que te ayuden a evitar cambios de dise\u00f1o con tus anuncios. Por ejemplo, si abres el \u00e1rea de Configuraci\u00f3n de anuncios<\/strong> de Mediavine, puedes activar una opci\u00f3n para Optimizar anuncios para CLS<\/strong>:<\/p>\n Optimizar AdSense para el desplazamiento de dise\u00f1o acumulativo es un poco m\u00e1s complicado.<\/p>\n Una soluci\u00f3n habitual es a\u00f1adir un elemento envolvente <div> alrededor de cada unidad de anuncio que especifique una altura m\u00ednima mediante la propiedad CSS min-height <\/strong><\/a>. Tambi\u00e9n puedes utilizar consultas de medios para cambiar la altura m\u00ednima en funci\u00f3n del dispositivo del usuario.<\/p>\n Google recomienda establecer la altura m\u00ednima igual al tama\u00f1o de anuncio m\u00e1s grande posible. Aunque esto puede provocar que se desperdicie espacio si se publica un anuncio m\u00e1s peque\u00f1o, es la mejor opci\u00f3n para eliminar cualquier posibilidad de que se produzca un desplazamiento del dise\u00f1o.<\/p>\n Cuando configures este elemento envolvente, aseg\u00farate de utilizar un ID CSS en lugar de una clase<\/a>, ya que AdSense suele eliminar la clase CSS de los objetos padre.<\/p>\n Este es el aspecto que podr\u00eda tener el CSS:<\/p>\n Y aqu\u00ed tienes el aspecto que podr\u00eda tener la incrustaci\u00f3n de AdSense:<\/p>\n En el frontend, ahora ver\u00e1s que tu sitio reserva espacio para ese anuncio, aunque est\u00e9 vac\u00edo:<\/p>\n Muchos sitios de WordPress inyectan contenido din\u00e1micamente para funciones como avisos de consentimiento de cookies, contenido relacionado, formularios de suscripci\u00f3n por correo electr\u00f3nico<\/a>, etc.<\/p>\n Aunque esto est\u00e1 bien, debes tener cuidado de no hacerlo de forma que provoque cambios en el dise\u00f1o.<\/p>\n Una buena pr\u00e1ctica de dise\u00f1o web<\/a> en este caso es no inyectar nunca contenido sobre<\/em> el contenido existente a menos que el usuario haya realizado espec\u00edficamente una interacci\u00f3n (por ejemplo, haciendo clic en un bot\u00f3n).<\/p>\n Por ejemplo, si est\u00e1s a\u00f1adiendo un aviso de consentimiento de cookies<\/a>, no querr\u00e1s inyectarlo en la parte superior de la p\u00e1gina, porque eso har\u00eda que el contenido se desplazara hacia abajo(a menos que ya est\u00e9s reservando espacio para el banner de consentimiento de cookies<\/em>).<\/p>\n En su lugar, debes mostrar el aviso en la parte inferior de la p\u00e1gina, lo que evitar\u00e1 desplazar hacia abajo el contenido visible.<\/p>\n Para ver si el contenido din\u00e1mico est\u00e1 causando el problema, puedes utilizar las herramientas de visualizaci\u00f3n anteriores (por ejemplo, el Generador de Layout Shift GIF<\/a>).<\/p>\n Si ves que el contenido de un plugin espec\u00edfico est\u00e1 provocando desplazamientos de dise\u00f1o, puedes considerar ajustar la configuraci\u00f3n de ese plugin o cambiar a un plugin diferente.<\/p>\n Por ejemplo, algunos plugins de consentimiento de cookies son mejores que otros en lo que respecta a los cambios de dise\u00f1o, por lo que vale la pena experimentar con diferentes plugins si tienes problemas.<\/p>\n Si quieres profundizar a\u00fan m\u00e1s en el comportamiento de los plugins, puedes utilizar una herramienta de monitorizaci\u00f3n del rendimiento de las aplicaciones<\/a>. Si alojas con Kinsta, la herramienta APM de Kinsta<\/a> est\u00e1 disponible gratuitamente en tu panel de control MyKinsta<\/a>, o puedes encontrar otras herramientas APM<\/a>.<\/p>\n Para ayudarte a probar los plugins, tambi\u00e9n puedes utilizar los sitios de staging de Kinsta<\/a>\u00a0o la herramienta de desarrollo local DevKinsta<\/a>.<\/p>\n Si utilizas animaciones en tu sitio, \u00e9stas pueden ser uno de los culpables comunes de los cambios de dise\u00f1o.<\/p>\n Para evitar que las animaciones provoquen desplazamientos del dise\u00f1o, debes utilizar la funci\u00f3n Transformar CSS<\/a>\u00a0para las animaciones en lugar de otras t\u00e1cticas:<\/p>\n Se trata m\u00e1s bien de un consejo t\u00e9cnico, por lo que es poco probable que tengas que hacerlo a menos que a\u00f1adas tu propio CSS. Para saber m\u00e1s, puedes leer la p\u00e1gina de Google sobre CLS y animaciones\/transiciones<\/a>.<\/p>\n\n Si tu sitio web tiene una puntuaci\u00f3n alta de Cumulative Layout Shift, es importante que lo corrijas tanto para crear una mejor experiencia para tus visitantes humanos como para maximizar el rendimiento de tu sitio en los resultados de b\u00fasqueda de Google.<\/p>\n Dos de los problemas m\u00e1s comunes son la falta de dimensiones de las im\u00e1genes\/embeds y los problemas con la carga de fuentes. Si los solucionas, conseguir\u00e1s una puntuaci\u00f3n mucho mejor.<\/p>\n Otros sitios pueden necesitar ir m\u00e1s all\u00e1 y profundizar en la carga de anuncios, el contenido din\u00e1mico y las animaciones. Si tienes problemas para implementar este tipo de optimizaciones por ti mismo, puedes considerar la posibilidad de trabajar con una agencia<\/a> o un aut\u00f3nomo de WordPress.<\/p>\n Para saber m\u00e1s sobre las Core Web Vitals en general, puedes leer la gu\u00eda completa de Kinsta sobre las Vitales Web B\u00e1sicas<\/a>.<\/p>\n Y si quieres un alojamiento WordPress que pueda ayudarte a crear un sitio de alto rendimiento<\/a> que funcione bien en Core Web Vitals, considera utilizar el alojamiento administrado de WordPress<\/a> – \u00a0\u00a1Nosotros migraremos tus sitios WordPress gratis<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" \u00bfTienes problemas con el Cumulative Layout Shift Explicado en tu sitio web? \u00bfO no est\u00e1s seguro de lo que significa Cumulative Layout Shift? Cumulative Layout Shift …<\/p>\n","protected":false},"author":199,"featured_media":61486,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1324,1330],"class_list":["post-61485","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-estrategia-seo","topic-experiencia-de-usuario"],"yoast_head":"\n![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
\u00bfPor Qu\u00e9 es malo el Cambio de Dise\u00f1o Acumulativo?<\/h2>\n
\u00bfQu\u00e9 Causa el Cumulative Layout Shift?<\/h2>\n
\n
C\u00f3mo Medir el Cumulative Layout Shift: Las Mejores Herramientas de Prueba<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Puntuaciones](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Herramientas de Desarrollo de Chrome<\/h3>\n
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Google Search Console<\/h3>\n
\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
Generador de GIF Layout Shift<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
\u00bfQu\u00e9 Se Considera una Buena Puntuaci\u00f3n para el Cumulative Layout?<\/h2>\n
![\"Recomendaciones](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
C\u00f3mo Corregir el Cambio de Dise\u00f1o Acumulativo en WordPress (U Otras Plataformas)<\/h2>\n
Siempre Especifica las Dimensiones de las Im\u00e1genes<\/h3>\n
<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nSiempre Especifica las Dimensiones de los V\u00eddeos, iframes y Otros Elementos Incrustados<\/h3>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Corrige y Optimiza la Carga de Fuentes<\/h3>\n
\n
Aloja las Fuentes Localmente y C\u00e1rgalas Previamente<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nEstablece Font-Display como Opcional o Intercambiar<\/h4>\n
\n
\n
![\"Las](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
\u00bfDemasiado Complejo? Considera una Pila de Fuentes del Sistema<\/h4>\n
Reserva Espacio para Anuncios (Si Utilizas Anuncios de Display)<\/h3>\n
![\"Configuraci\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Ejemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"Envuelve](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Tu](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
S\u00e9 Inteligente al Inyectar Contenido Din\u00e1micamente con Plugins<\/h3>\n
Utiliza la Propiedad CSS Transform para las Animaciones Siempre que Sea Posible<\/h3>\n
\n
Resumen<\/h2>\n