Cómo mejorar el cambio de diseño acumulativo (CLS) para WordPress

La mayoría de los sitios web están diseñados para acceder desde varios dispositivos con diferentes tamaños de pantalla y resoluciones. Por lo tanto, mantener la misma experiencia en múltiples plataformas puede ser difícil. WordPress facilita el diseño web multiplataforma. Sin embargo, en cualquier forma de desarrollo de software, crear una solución única para todos puede ser complicado.

En el caso del desarrollo web, los usuarios que navegan de una página a otra en un sitio web a veces pueden experimentar lo que se conoce como cambio de diseño acumulativo (CLS). Es cuando los elementos visuales de una página sufren un cambio repentino o cargan incorrectamente. De repente, el texto se vuelve más grande o más pequeño, las imágenes cambian de posición o cambia todo el diseño de la página.

¿Por qué ocurre esto y cómo podemos solucionarlo? En esta guía, exploraremos qué es CLS y cómo puede prevenirlo en su sitio web.

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

La forma perceptible más común de CLS es el retraso en la carga de imágenes. En sitios web complejos con muchos elementos visuales, a menudo notará que el texto se carga antes que los elementos multimedia. Además, el diseño de la página web cambia cuando finalmente se cargan todos los elementos visuales. Estos incidentes ocurren tanto si te desplazas como si no.

Cuando una página web tiene una puntuación CLS alta, es difícil determinar cuándo se ha cargado por completo. Cuanto más complicado y lleno de medios sea el sitio web, mayor será la probabilidad de cambios en el diseño de la experiencia.

Por ejemplo, las páginas web de motores de búsqueda simples con muy pocos elementos visuales tienen poco o ningún CLS. Sin embargo, esto no significa que todos los sitios web complejos o con muchas funciones tengan puntajes CLS altos. Por ejemplo, la tienda en línea de Amazon está repleta de widgets, imágenes y enlaces, pero se carga rápidamente sin cambios perceptibles.

¿Qué causa el cambio de diseño acumulativo?

CLS tiende a ocurrir porque los navegadores web cargan elementos secuencialmente en diferentes momentos. Además, es posible que tenga elementos multimedia en su sitio web con propiedades desconocidas (como las dimensiones).

En los casos en los que no especifique el ancho o la altura de un elemento multimedia (como una imagen), su navegador web no sabrá cuánto espacio asignar hasta que la página web se cargue por completo. Por lo tanto, el cambio drástico de diseño. En resumen, la razón principal de la mayoría de los CLS es la carga ineficiente.

Es importante tener en cuenta que incluso si no nota que el diseño cambia en tiempo real, no significa necesariamente que no se esté produciendo ningún cambio. Los navegadores web a menudo almacenan en caché los datos del sitio web, por lo que es más fácil cargar las páginas web cuando las vuelve a visitar. Medir el puntaje CLS es la mejor manera de determinar si su sitio web sufre cambios sustanciales en el diseño.

Cómo medir el puntaje CLS de su sitio web

La puntuación CLS indica la cantidad de cambios de diseño que experimenta una página web a lo largo de su vida útil. Podemos derivar la puntuación CLS de lo que se conoce como ventana de sesión. Una ventana de sesión describe el número de cambios de diseño que se producen en un intervalo de cinco segundos. Para calcular la puntuación CLS, necesitamos multiplicar la fracción de distancia por la fracción de impacto:

 Puntaje CLS = Fracción de distancia x Fracción de impacto

La fracción de impacto describe cuánto afecta un elemento inestable al área perceptible entre dos marcos. La fracción de distancia describe la cantidad que un elemento se ha desplazado entre fotogramas. Una puntuación CLS de 0,10 o menos (0,0 - 0,10) es excelente. Una puntuación CLS superior a 0,10 pero inferior a 0,25 (0,10 -0,25) es moderada y requiere mejoras, mientras que una puntuación CLS superior a 0,25 (0,25 <) es mala.

Estos conceptos pueden ser un poco difíciles de comprender. Afortunadamente, no tienes que calcular el CLS de tu sitio web manualmente. Hay una gran cantidad de herramientas en línea (y fuera de línea) que pueden calcular el puntaje CLS por usted.

Actualmente, la forma más popular de medir el CLS de su página web es a través de PageSpeed ​​Insights de Google. Le permite determinar las estadísticas de experiencia del usuario de su sitio web para las iteraciones móviles y de escritorio.

Otras herramientas CLS incluyen:

• Metrix GT
• Depurador CLS de Google Web Vitals
• Extensión de Google Chrome Web Vitals
• Faro de Google
• Prueba de página web

Dado que PageSpeed ​​Insights de Google es el más familiar, lo usaremos para nuestro ejemplo.

Para medir su puntaje CLS, navegue a la página de inicio de información de PageSpeed, inserte la URL de su página web en el campo de texto superior y luego haga clic en el botón Analizar . Según la popularidad de su sitio web y la velocidad de Internet, PageSpeed ​​Insights debería proporcionarle un informe en unos segundos.

Para encontrar su puntaje CLS, desplácese hacia abajo hasta la sección Evaluación Core Web Vitals.

Si usamos la página de inicio de Amazon como ejemplo, lo más probable es que encontremos una puntuación CLS inferior a 0,10. Durante nuestras pruebas, encontramos que el sitio web móvil tenía una puntuación CLS de 0,01, mientras que la versión de escritorio tenía una puntuación de 0,05.

Pero, ¿cómo lo hacen cuando su sitio tiene tantos recursos? Veamos cómo puede tener también una puntuación CLS similar a la de Amazon.

Cómo optimizar CLS

La mejor manera de ver qué elementos están causando su puntaje CLS alto es usar el depurador CLS de Google Web Vitals. Le muestra un GIF de todas las funciones cambiantes en su sitio web. Los anuncios y los archivos multimedia son los culpables más comunes de las puntuaciones CLS altas. Otras causas pueden incluir fuentes, CSS asíncrono, animaciones e Iframes. Para mejorar su puntaje CLS, deberá optimizar estos elementos.

Asegurarse de que su sitio web tenga un CLS respetable es tan importante como asegurarse de que tenga un SEO local sólido y contenido relevante. El motor de búsqueda de Google tiende a dar preferencia a los sitios web que brindan una excelente experiencia de usuario y están bien optimizados.

Con ese fin, aquí hay algunos pasos para mejorar el puntaje CLS de su sitio:

Agregar propiedades de dimensión a todos los archivos multimedia

Si carga archivos multimedia con propiedades desconocidas, aumentará el riesgo de cambio de diseño porque su navegador web deberá calcular el tamaño de su imagen y determinar la orientación del diseño después de la carga. Estas situaciones tienen una mayor probabilidad de ocurrir para imágenes y archivos grandes de alta resolución.

Al cargar archivos multimedia sin propiedades de tamaño, ha puesto demasiado trabajo en manos del navegador web. Debe agregar las propiedades de alto y ancho para cada archivo de medios visuales que cargue. Puede hacer esto viendo su código fuente y agregando manualmente las propiedades de ancho y alto.

Asegúrese de que las fuentes se carguen localmente

El texto debe permanecer visible durante la carga de la fuente. El primer paso para lograr esto es asegurarse de que las fuentes se carguen localmente en lugar de extraerlas de sitios web de fuentes de terceros.

Si descubre que sus fuentes se extraen de un sitio web de terceros, puede usar un complemento como OMGF para alojarlas localmente y cargarlas más rápido. Esto no solo mejorará su puntaje CLS, sino que también es un paso hacia el diseño ecológico.

Evitar FOIT y FOUT

El destello de texto invisible (FOIT) se produce cuando no se especifica una fuente alternativa. Mientras su navegador web intenta cargar su fuente o encontrar una alternativa, a los usuarios se les presentará un espacio vacío donde debería estar el texto.

Durante la actualización del texto sin estilo (FOUT), se le presentará la fuente alternativa predeterminada del navegador web hasta que pueda cargar la fuente especificada. Para solucionar esto, puede agregar la propiedad font-display: swap .

Si alguna vez ha descargado fuentes de Google, notará que agrega esta etiqueta al final de cada URL. La forma más fácil de agregar esta propiedad usted mismo es usando el complemento Swap Google Fonts Display en WP.

Sin embargo, tenga en cuenta que este complemento solo funciona para las fuentes de Google y agrega automáticamente la propiedad de intercambio de visualización a esas URL. Si está alojando fuentes localmente, puede usar el complemento String Locator para encontrar todos sus archivos de fuentes y modificarlos. Deberá abrir la hoja de estilo de fuente en WP y modificarla.

Alternativamente, puede usar complementos de almacenamiento en caché, como uno que optimizará automáticamente las fuentes agregando la propiedad de intercambio de fuentes.

Precargar fuentes

Para asegurarse de alojar fuentes localmente, puede precargar sus fuentes con complementos como:

• Cohete WP
• Consejos de recursos previos a la fiesta
• Permateria

Si no puede permitirse el lujo de usar estos complementos, puede precargar sus fuentes editando su archivo header.php. Solo asegúrese de probar su sitio a fondo después de precargar las fuentes. Precargar demasiadas fuentes puede dañar su sitio web. Entonces, como con cualquier posibilidad importante de back-end, le sugerimos que haga una copia de seguridad de su sitio de WordPress de antemano.

Deshabilitar la optimización de entrega de CSS

Si está utilizando WP Rocket para optimizar la entrega de CSS o cargando CSS de forma asíncrona con LiteSpeed ​​Cache, puede causar un destello de contenido sin estilo (FOUC). Si desea mejorar su puntaje CLS, le recomendamos deshabilitar estas opciones en sus respectivos complementos.

Alternativamente, puede configurar lo que se conoce como un CSS crítico alternativo. Esto implica generar un script de respaldo crítico utilizando una herramienta como Critical Path CSS Generator.

La eliminación de secuencias de comandos que bloquean el renderizado también puede disminuir su puntaje CLS. Recomendamos que primero pruebe su CLS con la optimización de entrega de CSS habilitada, luego pruébelo cuando esté deshabilitado para comparar.

Deshabilitar animaciones

Si está utilizando animaciones, le recomendamos que las deshabilite para la versión móvil de su sitio web porque las animaciones pueden obstaculizar los tiempos de carga de su sitio web. Si insiste en tener animaciones para su sitio web, le sugerimos que utilice las opciones de transformación y traducción de CSS.

Alternativamente, puede usar el complemento Happy Addons Elementor. Esto le permite animar elementos sin provocar cambios de diseño.

La mejor manera de eliminar la mayoría de los cambios de diseño es modificando la forma en que se carga su página web. A su vez, puede aumentar la velocidad y la eficiencia de su sitio de WordPress. Como siempre, se trata de mejorar la experiencia del usuario. Cuanto más receptivo sea su sitio web, mayor será la probabilidad de que los usuarios lo marquen como favorito y lo vuelvan a visitar.