¿Cómo arreglar el cambio de diseño acumulativo en Wordpress?

¿Alguna vez visitó un sitio web y estuvo a punto de hacer clic en un hipervínculo y el diseño cambió repentinamente? Si es así, la experiencia de su página probablemente fue algo como esto:

Aunque inicialmente tenía la intención de verificar las fuentes del artículo, ahora lo llevan a otro lugar desconocido lleno de ofertas de tarjetas de crédito porque en su lugar hizo clic en un anuncio.

A menos que borre su caché de cookies, verá anuncios de MasterCard hasta el final de los tiempos.

Sin ese cambio de diseño, todo este problema podría haberse evitado y Google está de acuerdo.

Para Google, la experiencia del usuario (UX) es una de sus principales prioridades, razón por la cual Cumulative Layout Shift (CLS), junto con otros dos Core Web Vitals , se lanzó en junio de 2021.

Sin embargo, al igual que muchos otros aspectos de la experiencia del usuario, muchos no comprenden Cumulative Layout Shift. Es por eso que los sitios web a menudo están llenos de anuncios y pancartas intrusivos que arruinan por completo la experiencia de la página, pero Core Web Vitals está aquí para cambiar eso.

‍

Tabla de contenido:

• ¿ Qué es el cambio de diseño acumulativo (CLS)?

• ¿ Cómo se calcula el CLS?

• ¿ Cómo reducir el cambio de diseño acumulativo (CLS)?

• ¿ Cómo solucionar problemas de cambios de diseño acumulativos en WordPress?

• Conclusión

• Cambio de diseño acumulativo: preguntas frecuentes

‍

¿Qué es el cambio de diseño acumulativo (CLS)?

El cambio de diseño acumulativo es una medida de cuánto cambia el diseño de una página mientras se carga. Los diseños de página cambian porque diferentes elementos de una página pueden cargarse a diferentes velocidades, alterando la vista de la página del usuario a medida que lo hacen.

Por ejemplo, un anuncio o vídeo de carga lenta puede empujar un bloque de contenido legible ya cargado más abajo en la página una vez que se carga. Esto constituye un CLS grande.

Es importante medir CLS por dos razones:

Afecta la experiencia del usuario.
Afecta la forma en que los rastreadores web leen e interpretan el contenido de la página.

Desde que Google colocó una métrica de clasificación en la experiencia del usuario, los editores se preguntan: "¿Qué es el cambio de diseño acumulativo?" y "¿Cómo puedo utilizarlo para influir en el ranking de mi sitio web?"

El cambio de diseño acumulativo es una métrica de Core Web Vital que suma todos los cambios de diseño en una página, excepto aquellos que no son causados por la interacción del usuario, con un cálculo que depende de la velocidad.

CLS analiza la proporción de la ventana gráfica afectada y la distancia de movimiento.

El umbral CLS también determina la puntuación del cambio de diseño y su factor de clasificación. El cambio de diseño acumulativo es una métrica relevante para la experiencia del usuario y, por lo tanto, afecta su rendimiento de SEO.

De las seis métricas que rastrea PageSpeed de Google, CLS representa el 15% de su puntuación, lo que la convierte en la tercera métrica más importante basada en la velocidad.

CLS resume todos los cambios de contenido inesperados que ocurren en la página. Para aprobar la evaluación de Google, los usuarios necesitan una calificación CLS alta.

Bueno – por debajo de 0,1,
Necesita mejorar: entre 0,1 y 0,25,
Pobre: por encima de 0,25.

El valor numérico de CLS representa la gravedad de cada movimiento. Cuando se producen cambios en el diseño, Google calcula hasta qué punto se movió el contenido dentro de la ventana gráfica durante la vida útil de la página.

¿Cuál es la puntuación umbral ideal?

Una buena puntuación CLS es cualquier valor inferior a 0,1. Aunque Google recomienda mantener la puntuación por debajo de 0,1, la puntuación umbral ideal es 0 para páginas totalmente estáticas. Es más fácil obtener esta puntuación cuando tiene poco o ningún contenido inyectado dinámicamente en sus páginas.

Con código, puede agregar varios anuncios, pancartas y formularios a su página y aun así evitar grandes cambios de diseño.

Siempre que un elemento visible en la ventana gráfica cambia su posición inicial, el cambio se registra como un elemento inestable.

Tenga en cuenta que los cambios de diseño solo se registran si un factor hace que los elementos visibles cambien sus posiciones en la página. Si se agregan nuevos elementos del modelo de objetos de documento (elementos DOM) o los elementos existentes cambian de tamaño, la puntuación CLS no se ve afectada.

Las puntuaciones de cambio de diseño están determinadas por dos medidas de cambio de diseño: fracción de impacto y fracción de distancia. Debe calcular la región de impacto antes de la fracción de impacto.

¿Cómo afectan los cambios de diseño a la interacción del usuario?

Los cambios inesperados en el diseño no sólo son frustrantes, sino que también afectan significativamente la interacción del usuario.

Cuando los elementos comienzan a moverse por la página, desconciertan a los usuarios y les dificultan maniobrar en los sitios web. Algunos sitios web están tan llenos de anuncios que pueden mover el cursor hacia el botón "Agregar al carrito" o "Comprar", lo que puede resultar en una compra accidental.

Estas experiencias son visualmente discordantes y dan una mala primera impresión. Para asegurarse de que sus usuarios no floten sobre el contenido de su página, comience a realizar un seguimiento de la puntuación CLS de sus sitios.

‍

¿Cómo se calcula el CLS?

Ahora sabemos que un CLS es causado por elementos inestables que se cargan a velocidades diferenciales y cambian el contenido en la ventana gráfica. De ello se deduce entonces que CLS debe ser directamente proporcional a dos variables: el área de la ventana gráfica que ocupa el elemento inestable y la distancia que este elemento inestable se mueve para provocar un cambio.

Estas dos variables se denominan fracción de impacto y fracción de distancia respectivamente, así que ahora exploremos cómo se miden y utilizan para calcular el CLS.

Cálculo de la fracción de impacto

Calcule la región de impacto, o el espacio afectado por los cambios de diseño, obteniendo un valor numérico para el área de impacto. Luego, para determinar la fracción de impacto, divida el área de impacto por el área de la ventana gráfica. La ventana gráfica es la sección de la página que permanece visible sin desplazarse hacia abajo.

Fórmula para calcular la fracción de impacto

Fracción de impacto = [Área de la región de impacto [300 x 400]] / [Área de la ventana gráfica [500 x 600]]

La fracción de impacto solo representa el movimiento en sí y no considera cuán molesto es el movimiento. La fracción de distancia junto con la distancia de movimiento resuelve este problema.

En este caso, nuestra fracción de impacto resulta ser 0,4.

Cálculo de fracción de distancia

Encuentre primero la distancia de movimiento definiendo qué tan lejos se movieron los elementos. Luego, divida la distancia máxima de movimiento por la altura total de la ventana gráfica para determinar la fracción de distancia.

Fórmula para calcular la fracción de distancia

Fracción de distancia = [Máx. Mover distancia/altura de ViewPort]

Suponiendo que el numerador en este caso sea 100 y el denominador 600, llegamos a un valor de fracción de distancia de 0,166.

Ahora, utilice las soluciones encontradas en ambas fórmulas para completar el cálculo del cambio de diseño.

Fórmula para calcular la puntuación CLS de Google

Como se explicó, CLS es el producto de la fracción de impacto y el factor de distancia.

Utilizando los valores de fracción de impacto y factor de distancia obtenidos anteriormente, obtenemos el siguiente cálculo

CLS = 0,166 x 0,4

Lo que nos da un valor CLS de .066.

Para determinar la puntuación del cambio de diseño para una animación, multiplique la fracción de impacto por la fracción de distancia. Sin embargo, si desea calcular el cambio de diseño acumulativo total, tome todas las puntuaciones de cambio de diseño para la cantidad total de fotogramas de animación y agréguelos.

Aunque agregar todas estas puntuaciones de cambio de diseño fue efectivo, no tuvo en cuenta las aplicaciones de una sola página que tienen una larga duración, lo que hizo que la fórmula fuera demasiado injusta para ciertos usuarios.

Para tener en cuenta esto, Google comenzó a agrupar turnos en ventanas de sesión, que son períodos de tiempo en el ciclo de vida de una página existente.

Luego, los cambios de diseño se resumen dentro de la ventana de la sesión, lo que significa que la puntuación CLS solo se ve afectada durante la duración de la sesión.

Es más, la puntuación CLS final representa la puntuación máxima de una ventana de sesión, por lo que si un usuario cierra la ventana durante un turno, no se tiene en cuenta. Cualquier cosa que se mueva dentro de la ventana de exclusión de entrada, que incluye el tiempo que lleva cargar la página, tampoco se cuenta.

Otros cálculos: cómo medir CLS

Hay algunos otros elementos considerados en CLS, que incluyen:

Cambios intencionales en el diseño: la ventana de exclusión de entrada ignora los cambios que ocurren dentro de medio segundo de la entrada del usuario.
Cambios de diseño y animación: Google ignora los cambios y animaciones de transformación CSS.
Generación de cambios de diseño: si se producen cambios de diseño cuando se carga la página, puede afectar negativamente su puntuación CLS si ocurre fuera de la ventana de exclusión.
Cambios de diseño encima del pliegue: Google solo cuenta los cambios dentro de la ventana visible.

Para realizar un seguimiento preciso de los cambios de diseño y los cambios de diseño, utilice una herramienta de medición CLS.

Herramientas para medir CLS

Las herramientas de medición de puntuaciones de CLS pueden ayudar activamente a prevenir cambios de diseño. Las herramientas de software miden su contenido existente y utilizan su respectiva pestaña de rendimiento de métricas Cumulative Layout Shift para ofrecer a las empresas una puntuación CLS final que pueden mejorar.

La mayoría de las siguientes soluciones de software interpretan datos de laboratorio, pero PageSpeed Insights de Google también mide datos de campo. Search Console ofrece un informe básico de Core Web Vitals.

Los datos de laboratorio implican recopilar datos de rendimiento en un entorno controlado, pero como se basan en condiciones predefinidas, la mayoría de las puntuaciones de los datos de laboratorio no reflejan la experiencia real del usuario al 100 %.

Por otro lado, los datos de campo se basan en datos agravados, que se adquieren combinando datos a nivel individual. A menudo se utiliza para proporcionar análisis estadísticos de grupos de personas y para resumir datos comerciales. Aunque los datos de campo son más precisos, no siempre están disponibles.

Los términos "datos de usuario reales" y "datos de campo" son lo mismo, pero la API de JavaScript es su propio sistema. Si tiene algo de experiencia en codificación, puede utilizar la API de JavaScript para medir CLS por minuto. Inicie la API de inestabilidad de diseño si desea comprobar si hay cambios de diseño inesperados.

PageSpeed Insights y Search Console pueden ayudarle a optimizar CLS y evitar grandes cambios de diseño. Las comprobaciones de la prueba de cambio de diseño acumulativo de PageSpeed para un diseño web responsivo brindan más detalles para los desarrolladores web y lo ayudan a inyectar contenido dinámico.

Se logra una puntuación de PageSpeed ideal cuando todas las métricas de velocidad promedian 90 o más. Si nota que una o más de sus métricas están en naranja, concéntrese en mejorar esas áreas.

Bueno: 90 o más (verde)
Necesita mejoras: 50 a 90 (naranja)
Pobre: menos de 50 (rojo).

En la pestaña de rendimiento, los usuarios pueden ver con precisión cómo PageSpeed Insights mide la estabilidad visual. PageSpeed utiliza Chrome User Experience Report, su software de análisis estadístico, para colaborar con métricas que son útiles para medir la estabilidad visual, ya que verifica las imágenes responsivas, la relación de aspecto de la imagen, la fuente web, la visualización de la fuente, la carga inicial de la página y mucho más.

Todos los web vitals colocados en la pestaña de resumen tienen una ponderación diferente: FID, índice de velocidad y tiempo de interacción se puntúan en un 10 %, CLS en un 15 %, LCP en un 25 % y tiempo total de bloqueo en un 30 %. Google no cuenta los cambios que se realizan a partir de las interacciones de los usuarios.

Tenga en cuenta que las métricas se complementan entre sí. Por ejemplo, si LCP y el tiempo total de bloqueo son lentos, es probable que el tiempo de carga avance a paso de tortuga.

¿Cómo reducir el cambio de diseño acumulativo (CLS)?

Para mejorar los problemas de cambios de diseño acumulativos , es esencial comprender qué afecta a CLS en primer lugar. Varios factores contribuyen a las malas puntuaciones de CLS, entre ellos:

Agregar videos e imágenes sin dimensiones
Instalación de anuncios, iframes e incrustaciones sin dimensiones
Acciones en espera de que se cargue una página o una respuesta de la red para actualizar los elementos DOM (contenido inyectado dinámicamente)
Fuentes web que provocan un destello de texto invisible (FOIT) o un destello de texto sin estilo (FOUT), fuentes del sistema lentas, carga de fuentes o visualización de fuentes defectuosas

CLS juega un papel importante en los dispositivos móviles. El 77% de los estadounidenses tiene un teléfono inteligente y casi el 40% de todas las compras de comercio electrónico se realizaron mediante un dispositivo móvil. Sin embargo, las tabletas y los teléfonos inteligentes son los dispositivos más difíciles de optimizar.

Debido a una CPU más débil, una red complicada y una ventana gráfica más pequeña, puede resultar difícil para los codificadores móviles determinar cuánto espacio necesita en la página para mantener todos sus elementos visibles.

Debería asegurarse de que los atributos de vídeo e imagen se reduzcan según el tamaño de la ventana gráfica.

1. Atributos de ancho y alto de la imagen

Si no especifica los atributos de ancho y alto para su sitio, el navegador no sabrá cuánto espacio se necesita para asignar correctamente los elementos mientras se carga la página.

Lo más probable es que el espacio reservado no sea suficiente y la pantalla se mueva para que quepa.

Incluya dimensiones de imagen y elementos de video para crear la cantidad correcta de espacio.

2. Fuente web FOUT/FOIT

A veces pueden ser necesarios más de dos fotogramas renderizados para que se cargue el texto personalizado, lo que da como resultado un texto invisible o el uso de una fuente alternativa. Si el texto personalizado tarda más en aparecer que el permiso de carga de la página inicial, provocará cambios en el diseño y afectará su puntuación CLS y la fuente web misma.

Para resolver este problema, utilice una fuente precargada o una fuente del sistema que esté integrada directamente en su código.

3. Anuncios, iframes y dimensiones incrustadas no especificadas

Otra forma de evitar grandes cambios de diseño es especificando anuncios, iframes y dimensiones incrustadas. Se produce un cambio de diseño cuando se incrusta una relación de aspecto de anuncio incorrecta en el código del sitio web.

Si bien es posible que deba tener en cuenta diferencias sutiles en los tamaños de anuncios/marcadores de posición y factores de forma al utilizar consultas de medios, puede reservar espacio para evitar este problema.

4. Cómo las animaciones y el contenido dinámico

Las acciones que esperan una respuesta de la red del servidor web antes de completarse también provocan cambios.

Si la entrada del usuario hizo que las regiones de cambio de diseño crecieran, entonces no contará para la puntuación CLS, especialmente si el cambio cae en la misma relación de aspecto utilizada antes del cambio de diseño. Sin embargo, si se tienen en cuenta las entradas de cambio de diseño codificadas, deberá reservar espacio para ello.

Para aprender cómo resolver problemas de cambio de diseño en WordPress, continúe con la siguiente sección.

¿Cómo solucionar problemas de cambios de diseño acumulativos en WordPress?

Los programadores tienen varios métodos que pueden utilizar para solucionar problemas de cambio de diseño acumulativo en WordPress . Si tiene habilidades de codificación competentes y desea reducir un cambio de diseño acumulativo que se encuentra en su sitio web, este proceso de 10 pasos eliminará los problemas de CLS específicos de WordPress.

Paso 1: aprenda qué elementos están cambiando

Herramientas como Cumulative Layout Shift Debugger y PageSpeed Insights pueden mostrarle exactamente dónde se producen los cambios. Alternativamente, puede usar Chrome Dev Tools y habilitar la casilla de verificación Diseño de regiones de cambio, donde los elementos desplazados se resaltan en azul.

Paso 2: deshabilite CSS asincrónico o use CSS crítico

La mayoría de los complementos de caché tienen una configuración para cargar CSS de forma asincrónica, pero esto puede causar FOUC y cambiar la fuente web. Puede desactivar la entrega de CSS en la configuración de su complemento.

Los desarrolladores también podrían cargar CSS crítico deshabilitando mod_pagespeed o generando rutas CSS críticas específicas de la página.

Paso 3: Aloje fuentes locales precargadas

Las fuentes precargadas no permiten la optimización. La mayoría de las veces, estas fuentes web tardan una eternidad en cargarse y recurren a una fuente alternativa antes de completarse. Aloje siempre las fuentes localmente desde su sitio web utilizando herramientas como Transfonter o el complemento OMGF para pegar las URL de las fuentes directamente.

Paso 4: Agregar visualización de fuentes: cambiar a fuentes

Es posible que las fuentes web específicas aún se carguen lentamente dependiendo de su tamaño, pero agregar font-display:swap al CSS de su fuente garantizará que su diseño no cambie debido a FOIT.

Para mantener una visualización de fuente activa, instale String Locator para buscar la fuente problemática, luego agregue &display=swap a su código .

Agregar visualización de fuentes: cambiar a fuentes

Paso 5: configure la fuente global en Mulish en Oxygen Builder

Si está utilizando Oxygen Build, puede resolver sus problemas de CLS abriendo su hoja de estilo y agregando 'Mulish' en medio del cuerpo del texto, así: body { font-family: 'Mulish', Arial; }

Paso 6: Especificar las dimensiones de imagen, video e iframe

Simplemente inserte ancho=”000” alto=“000” después del significante de la imagen en el código o ancho=”000” alto=“000 > después de un video o iframe para asegurarse de que sus medios tengan suficiente espacio.

Paso 7: use la propiedad de transformación CSS para animaciones

Las animaciones pueden provocar cambios dramáticos en el diseño y es posible que tener en cuenta las relaciones de aspecto no resuelva el problema. Agregue la propiedad de transformación CSS transform:translate() en lugar de usar ancho + alto.

Paso 8: deje espacio para los anuncios y sírvalos correctamente

Reserva espacio para anuncios. De lo contrario, los anuncios desplazarán otros contenidos de la página cuando finalmente se carguen.

Google aconseja a los creadores que dejen espacio para el anuncio de mayor tamaño configurado para publicarse así:

Paso 9: instale un complemento GDPR ligero

El software de cumplimiento de cookies GDPR es útil para sitios web que desean cumplir con CCPA, pero a menudo causan problemas de cambio de diseño acumulativo.

Los complementos de GDPR pesados pueden apilar elementos uno encima de otro mientras se cargan, así que use un GDPR/CCPA liviano para resolver este problema.

Paso 10: Codifique encabezados y menús

Es posible que sus encabezados y menús se estén sumando al cambio de diseño de su sitio web. Codificar estos aspectos en CSS causará menos problemas a las páginas web. La mayoría de los creadores de páginas también provocarán cambios en el encabezado y el menú, pero Elementor y Divi agregan elementos de codificación para los usuarios.

Conclusión

Cumulative Layout Shift (CLS) es uno de los tres Core Web Vitals creados por Google para colocar la experiencia del usuario en el centro de atención de los propietarios de sitios web. Si bien es posible que sea necesario acostumbrarse a CLS y otras métricas vitales, CLS puede mejorar el rendimiento de un sitio web y el tiempo de carga general.

Con el uso de software de terceros, como Lighthouse y PageSpeed Insights de Google, los usuarios pueden localizar dónde se producen los cambios de diseño de CLS. Al mismo tiempo, el software puede ofrecer a los usuarios las mejores prácticas para mejorar su puntuación general de SEO, lo que les ayudará a obtener una clasificación más alta.

Los usuarios pueden codificar correcciones de cambios de diseño o usar complementos para mejorar su puntuación CLS. Cuando su contenido dinámico permanece estático, reducirá la frustración del usuario y aumentará los ingresos generales.

Ahora que sus anuncios se sienten cómodos en sus lugares, comuníquese con Publift para descubrir cómo puede aumentar aún más sus ingresos publicitarios optimizando la ubicación de sus anuncios y sus socios publicitarios.

Cambio de diseño acumulativo: preguntas frecuentes

¿Qué es un cambio de diseño esperado e inesperado?

Cuando el diseño de una página cambia en respuesta a un evento esperado, como una entrada del usuario, se denomina cambio de diseño esperado. Los cambios de diseño inesperados ocurren cuando diferentes elementos de una página se cargan en diferentes momentos o cuando la página no se comporta como se esperaba.

¿La carga diferida afecta el cambio de diseño acumulativo?

Sí, la carga diferida puede provocar cambios de diseño acumulativos. La carga diferida o carga diferida es la práctica de cargar elementos no esenciales de una página a un ritmo más lento para permitir que los elementos críticos se carguen primero.

Si bien esta es una buena estrategia para ahorrar ancho de banda, los elementos de carga más lentos aún pueden causar que los elementos cargados previamente se desplacen.

‍