La mayoría de los sitios web están diseñados para acceder a ellos desde varios dispositivos con diferentes tamaños de pantalla y resoluciones. Por tanto, mantener la misma experiencia en varias plataformas puede resultar complicado. WordPress facilita el diseño web multiplataforma. Sin embargo, en cualquier forma de desarrollo de software, crear una solución única para todos puede resultar 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 se cargan incorrectamente. De repente, el texto se vuelve más grande o más pequeño, las imágenes cambian de posición o todo el diseño de la página cambia.
¿Por qué ocurre esto y cómo podemos solucionarlo? En esta guía, exploraremos qué es CLS y cómo puede evitarlo en su sitio web.
¿Qué es el cambio de diseño acumulativo?
La forma perceptible más común de CLS es retraso en la carga de imágenes. En sitios web complejos que están cargados de 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 se desplaza 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 pesado es el sitio web, mayor es 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 puntuaciones CLS altas. 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 dimensiones).
En los casos en los que no especifique el ancho o el alto 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. De ahí el drástico cambio 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 páginas web cuando las vuelve a visitar. Medir la puntuación CLS es la mejor manera de determinar si su sitio web sufre cambios sustanciales en el diseño.
Cómo medir la puntuación CLS de su sitio web
La puntuación CLS denota el número 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:
CLS Score = Distance Fraction x Impact Fraction
El 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 y 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 mejora, mientras que una puntuación CLS superior a 0,25 (0,25 <) es mala.
Estos conceptos pueden ser un poco difíciles de entender. Afortunadamente, no tiene que calcular el CLS de su sitio web manualmente. Hay una gran cantidad de herramientas en línea (y fuera de línea) que pueden calcular la puntuación 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 conocer las estadísticas de la experiencia del usuario de su sitio web para las iteraciones móviles y de escritorio.
Otras herramientas de CLS incluyen:
- GT Metrix
- 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 puntuación CLS, vaya a la página de inicio de PageSpeed insight, inserte la URL de su página web en el campo de texto superior y luego haga clic en el Analizar botón. Según la popularidad de su sitio web y la velocidad de Internet, PageSpeed Insights debería proporcionarle un informe en unos pocos segundos.
Para encontrar su puntaje de CLS, desplácese hacia abajo hasta la sección de Evaluación de Vitales Básicos en la Web.
Si usamos la página de inicio de Amazon como ejemplo, lo más probable es que encontremos una puntuación CLS de menos de 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 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 de su sitio web. Los anuncios y los archivos multimedia son los culpables más comunes de los puntajes CLS altos. Otras causas pueden incluir fuentes, CSS asincrónico, animaciones e Iframes. Para mejorar su puntuación CLS, deberá optimizar estos elementos.
Asegurarse de que su sitio web tenga un CLS respetable es tan importante como asegurarse de que tenga fuerte SEO local 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 la puntuación 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á determinar 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 a los que les faltan propiedades de tamaño, ha puesto demasiado trabajo en manos del navegador web. Debe agregar las propiedades de alto y ancho para cada archivo multimedia visual 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 fuentes. El primer paso para lograrlo 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 puntuación CLS, sino que también es un paso hacia el diseño ecológico.
Evite FOIT y FOUT
El destello de texto invisible (FOIT) ocurre cuando no 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 el destello de texto sin estilo (FOUT), se le presentará la fuente alternativa predeterminada del navegador web hasta que pueda cargar la fuente especificada. Para solucionar este problema, puede agregar la propiedad fuente-pantalla: intercambio.
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 utilizando el complemento Swap Google Fonts Display en WP.
Sin embargo, tenga en cuenta que este complemento solo funciona para fuentes de Google y agrega automáticamente la propiedad de intercambio de visualización a esas URL. Si aloja fuentes de forma local, puede utilizar 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 que está alojando fuentes localmente, puede precargar sus fuentes con complementos como:
Si no puede permitirse el lujo de utilizar 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. La precarga de demasiadas fuentes puede dañar su sitio web. Entonces, al igual que con cualquier oportunidad importante de backend, 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 asincrónica con LiteSpeed Cache, puede causar un destello de contenido sin estilo (FOUC). Si desea mejorar su puntuación CLS, le recomendamos que desactive estas opciones en sus respectivos complementos.
Alternativamente, puede configurar lo que se conoce como CSS crítico de respaldo. Esto implica generar un script de respaldo crítico utilizando una herramienta como Generador de CSS de ruta crítica.
La eliminación de los scripts de bloqueo de procesamiento también puede disminuir su puntuación CLS. Le recomendamos que pruebe su CLS con la optimización de entrega de CSS habilitada primero, luego pruébelo cuando lo tenga deshabilitado para comparar.
Deshabilitar animaciones
Si está utilizando animaciones, le recomendamos que las desactive 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 el CSS transformar y traducir opciones.
Alternativamente, puede usar el complemento Happy Addons Elementor. Esto le permite animar elementos sin provocar cambios en el 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.