Cambio de diseño acumulativo (CLS) en WordPress: cómo eliminarlo

Con este capítulo sobre Cambio de diseño acumulativo, nos acercamos al final de nuestra miniserie sobre Core Web Vitals para usuarios de WordPress. En los capítulos anteriores sobre la pintura más grande con contenido y el retraso de la primera entrada, ya hablamos sobre qué significan exactamente esos términos y cómo optimizar su sitio web para cada uno de ellos. Ahora, queremos hacer lo mismo con CLS.

A continuación, cubrimos qué es exactamente el cambio de diseño acumulativo, cómo se calcula, cómo probar el rendimiento de su sitio web en esta área y cuál es un buen valor al que apuntar. Después de eso, le brindamos instrucciones paso a paso para abordar cualquier problema de CLS que pueda existir en su sitio de WordPress para mejorarlo.

Cuando termine, junto con las otras dos publicaciones de esta serie, esperamos que se sienta listo para hacer que su sitio web se ajuste al sello de aprobación de Google.

¿Cuál es el significado del cambio de diseño acumulativo?

Como de costumbre, comencemos con una definición. En una frase, CLS mide cuando algo cambia en una página web que hace que los elementos se muevan (o se desplacen si lo desea) sin la interacción del usuario.

Puede ser que un formulario o un anuncio en el artículo que estás leyendo se cargue tarde y se mueva hacia abajo en el párrafo que estás leyendo y tengas que desplazarte para encontrar tu lugar nuevamente. O peor aún, cambia la posición de un botón o enlace en un momento inoportuno para que termines haciendo clic en algo que no querías.

En consecuencia, puede ser cualquier cosa, desde levemente molesto hasta completamente exasperante. El cambio de diseño acumulativo es la métrica que captura este comportamiento para comprender el problema y poder corregirlo.

¿Por qué es importante?

Un sitio web con saltos interrumpe por completo lo que está haciendo actualmente e incluso puede tener consecuencias molestas en la vida real. Como puede imaginar, eso es realmente malo para la experiencia del usuario y puede hacer que los visitantes se vayan. Esto es especialmente cierto en los teléfonos inteligentes donde, debido al tamaño de la pantalla, los pequeños cambios tienen un impacto mayor que en las máquinas de escritorio.

Debido a que es tan perjudicial, Google se enfoca mucho en esta métrica, convirtiéndola en uno de los valores fundamentales por los que juzga los sitios web. Por lo tanto, si desea complacer tanto a sus visitantes como a las personas (me refiero a los robots) que deciden dónde aparece en los resultados de búsqueda, haga todo lo posible para eliminar el cambio de diseño acumulativo en su sitio web.

¿Qué causa CLS?

La causa del cambio de elementos del sitio web suele ser que los archivos de una página web se cargan a diferentes velocidades. Otro factor son los elementos de la página que se agregan dinámicamente durante o después de la carga de la página. Los ejemplos típicos incluyen:

• Visuales como imágenes o videos sin dimensiones definidas correctamente
• Contenido de terceros como anuncios, pancartas, incrustaciones o iframes
• Fuentes web que son más pequeñas o más grandes que las fuentes alternativas mostradas inicialmente

Otra fuente de CLS puede ser el marcado CSS y JavaScript en conflicto. Cuando se bloquean entre sí, se detiene el proceso de carga de las páginas web.

¿Cómo se calcula el cambio de diseño acumulativo?

A diferencia de sus predecesores, el cálculo del cambio de diseño acumulativo es un poco más complicado. Para entenderlo, primero debemos establecer algunos términos:

• Cambio de diseño : es cuando un elemento ya visible en la página se mueve desde su posición inicial después de haber sido renderizado. Este tipo de elementos se llaman elementos inestables (creativos, lo sé).
• Cambios de diseño esperados e inesperados : los cambios de diseño solo son negativos si el usuario no los espera. También hay cambios de diseño que son esperados y bienvenidos, como después de una interacción con una página web (por ejemplo, al enviar un formulario). Las animaciones y transiciones CSS son otros ejemplos de los cambios de diseño esperados. Para dar cuenta de eso, CLS considera que se esperan todos los cambios de diseño que ocurren dentro de los 500 ms de una interacción del usuario.
• Fracción de impacto : el porcentaje de la ventana gráfica (la parte visible del sitio web en la pantalla) que un elemento en movimiento impacta como número decimal (p. ej., 0,5 si impacta el 50 % de la pantalla).
• Fracción de distancia : distancia como el porcentaje de la pantalla que un elemento inestable se mueve durante un turno. También se da como un número decimal.
• Puntuación de cambio de diseño : se calcula multiplicando la fracción de impacto con la fracción de distancia (p. ej., 0,4 x 0,15 = 0,06). Como consecuencia, los elementos grandes que se mueven una gran distancia obtienen una puntuación más alta que los elementos pequeños que se mueven una distancia corta.

CLS captura la ocurrencia más grande de puntajes de cambios de diseño inesperados durante un intervalo de cinco segundos. Obviamente, más bajo es mejor.

Al final, realmente no necesitas saber los detalles. Todo lo que necesita saber es cómo medir CLS y qué valor debe buscar su sitio.

¿Qué es una buena puntuación de cambio de diseño?

Una buena puntuación es tener un valor CLS de 0,1 o menos. Hasta 0.25 necesita mejoras, cualquier valor por encima de eso es malo y probablemente resultará en un rendimiento de búsqueda reducido.

Cómo probar el cambio de diseño acumulativo

Para poder mejorar el puntaje CLS en su sitio web, primero necesita saber cuál es su posición. Es difícil saber si sucede, porque las páginas web no siempre se comportan de la misma manera en diferentes dispositivos. Por lo tanto, es posible que no lo vea en un sitio de desarrollo, pero los visitantes aún pueden encontrarlo. Por esa razón, lo mejor es probarlo.

Hay varias formas de verificar si el cambio de diseño acumulativo es un problema en su sitio de WordPress. Son prácticamente iguales a las otras métricas de Core Web Vitals. Su primer puerto de escala siempre debe ser PageSpeed ​​Insights, que muestra la métrica en su página de resultados.

Tenga en cuenta que utiliza tanto los resultados de laboratorio como los datos de la vida real del Informe de experiencia del usuario de Chrome. Incluso muestra imágenes de los cambios de diseño y el elemento de origen. De esa manera, tendrá una mejor idea de cuál es el problema y dónde ocurre.

Además, PageSpeed ​​Insights le brinda la proporción de cuánto contribuye cada elemento al puntaje CLS. Esto le permite priorizar lo que tiene el mayor impacto negativo.

Aparte de eso, también puedes usar lo siguiente:

• El informe Core Web Vitals dentro de Google Search Console
• Herramientas para desarrolladores del navegador Chrome
• Faro
• Biblioteca de JavaScript web-vitals

También hay una extensión de Chrome llamada CLS Visualizer. Destaca los elementos cambiantes en sus páginas web. Para Firefox, prueba SpeedVitals.

Cómo reducir el cambio de diseño acumulativo en su sitio de WordPress

Si nota que CLS es un problema en su sitio de WordPress, probablemente quiera solucionarlo. De esto se trata el resto de este artículo.

Proporcionar dimensiones de medios

Muchas soluciones ya se vuelven claras cuando echa un vistazo a las causas de Cambio de diseño acumulativo anterior. Como se mencionó, un culpable común de CLS son las imágenes y otros medios sin valores definidos width y height . Sin dimensiones fijas, el navegador no sabe cuánto espacio reservar para ellas. Eso es especialmente cierto para los medios que aparecen en la página más tarde, como en la carga diferida.

Desafortunadamente, es una práctica común del diseño receptivo no dar dimensiones específicas de la imagen. La mayoría de las veces, las imágenes se configuran en width o max-width: 100%; y height: auto; . Luego depende del navegador averiguar cuáles son las dimensiones reales cuando descarga la imagen.

En el pasado, eso a menudo conducía exactamente al tipo de comportamiento que estamos tratando de evitar. Las imágenes aparecieron de repente, moviendo todo lo demás. Por lo tanto, siempre debe proporcionar dimensiones para sus imágenes o al menos una relación de aspecto CSS.

Afortunadamente, si está utilizando WordPress, su sitio web establece automáticamente las dimensiones de la imagen. Por lo tanto, el problema no suele entrar en juego.

Si ese no es el caso para una imagen específica, puede corregir esto en el editor de Gutenberg.

Manejo de anuncios, incrustaciones y contenido similar

El contenido de terceros cargado en las páginas suele ser una de las mayores fuentes de CLS. Estos son casos en los que no tienes necesariamente el control del tamaño del producto final. Sus editores tampoco saben de antemano cuánto espacio hay disponible en el sitio en el que aparece. Por lo tanto, debe declarar su tamaño de la misma manera que para las imágenes.

Afortunadamente para los usuarios de WordPress, cuando usan el editor de Gutenberg para incrustar automáticamente contenido de redes sociales, portales de video o proveedores similares en su contenido, el editor agrega automáticamente las declaraciones width y height adecuadas.

De esa forma, aunque el contenido tarde más en cargarse que el resto de la página, ya tiene reservado su tamaño correcto. Como consecuencia, el diseño no cambia cuando aparece.

Para otros tipos de contenido que agregue manualmente, asegúrese de agregar width y height a mano. Si no sabe la altura exacta que ocupará un anuncio u otro elemento, al menos agréguele una propiedad min-height . Eso aún permite elementos más grandes pero reserva algo de espacio y puede eliminar o al menos reducir CLS en la página.

Otra técnica para minimizar el cambio de diseño acumulativo en WordPress para contenido de terceros es evitar colocarlo en lo alto de la página. Cuanto más alto esté, más contenido debajo puede empujar hacia abajo y mayor será su puntaje CLS. Por lo tanto, si puede, colóquelo en el medio o en la parte inferior.

Optimizar contenido dinámico

El contenido dinámico son elementos de página que se agregan a una página después de que ya se ha cargado. El ejemplo anterior eran imágenes cargadas de forma diferida, pero normalmente también incluye cosas como pancartas, formularios o incluso productos relacionados que aparecen en el desplazamiento.

Naturalmente, si no los planifica adecuadamente, también puede provocar cambios en el diseño. Aquí hay algunas maneras de evitar eso:

• Reserve espacio de antemano : similar al anterior, si tiene un contenedor con un tamaño fijo en el que puede cargar el contenido, mantiene el diseño estable incluso si llega más tarde. Un contenedor fijo también puede ser un carrusel o algo similar.
• Conéctelo con una interacción del usuario : si el contenido se carga dinámicamente después de una acción del usuario, no conlleva ninguna penalización para CLS, incluso si el diseño cambia. Sin embargo, tenga en cuenta el límite de 500 ms.
• Cargar contenido fuera de la pantalla : si carga contenido fuera de la ventana gráfica y luego proporciona al usuario un aviso de que está disponible y una opción para desplazarse hasta él, tampoco hay CLS. A las plataformas de redes sociales les gusta hacer eso para las nuevas actualizaciones.

Mejorar el manejo de fuentes web

Las fuentes web también pueden causar cambios en el diseño. Las dos formas comunes son que primero ve el texto sin estilo antes de que aparezca la fuente web (Flash of Unstyled Text o FOUT) o no ve ningún texto al principio y luego aparece junto con la fuente web (Flash of Invisible Text o FOITO).

Ambos pueden conducir a cambios de diseño y esto es lo que puede hacer al respecto:

• Use el formato de fuente correcto : si carga fuentes personalizadas en su sitio web de WordPress, asegúrese de usar el formato WOFF2 o WOFF. Los que ocupan el espacio más pequeño, se cargan más rápido y ayudan a evitar los problemas anteriores.
• Use la fuente alternativa correcta : si está utilizando una fuente alternativa que es muy diferente a su fuente real, en el momento en que ocurra el cambio, es probable que se produzca un movimiento en el diseño. Puede evitar eso usando una fuente fallida que esté cerca del producto final. Font Style Matcher puede ayudarte a encontrar uno.
• Fuentes precargadas : coloque recursos de fuentes web al principio del documento y agrégueles rel=preload . De esa forma, los navegadores les darán prioridad.

También ayuda alojar fuentes localmente o al menos usar un CDN para que estén disponibles para los usuarios lo más rápido posible. De esa forma, reduce la probabilidad de cambiar las fuentes tarde durante la carga y provocar cambios en el diseño.

No permita que el cambio de diseño acumulativo destruya su sitio de WordPress

El cambio de diseño acumulativo es una de las tres métricas que Google considera vitales y la última de esta serie detallada. Es un indicador importante para la experiencia del usuario, ya que mide la estabilidad del diseño de la página durante e incluso después de la carga.

Al igual que las otras métricas en Core Web Vitals, no solo es importante para los usuarios, sino que también cuenta para el ranking de búsqueda y, por lo tanto, es importante para el éxito de su sitio web.

A estas alturas, ya sabe qué es, cómo se calcula, qué lo causa y cómo probarlo y tratarlo. Que tu diseño sea para siempre sólido, amigo mío.

¿Tiene consejos adicionales sobre cómo evitar el cambio de diseño acumulativo en WordPress? ¡Háganos saber en los comentarios a continuación!