Diseño acumulativo (CLS) WordPress 2022

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 CLS (Cambio de diseño acumulativo). Esto es cuando los elementos visuales de una página cambian repentinamente 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é sucede esto y cómo podemos solucionarlo? En esta guía, exploraremos qué es CLS y cómo puede evitarlo en su sitio.

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

La forma notable más común de CLS es retraso en la carga de imágenes. En sitios 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 está rodando 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 engorroso sea el sitio, es más probable que cambie el diseño del experimento.

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

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

CLS tiende a ocurrir porque los navegadores web cargan elementos secuencialmente en diferentes momentos. Además, puede tener elementos multimedia en su sitio 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 haya cargado por completo. En consecuencia, el cambio de diseño drástico. En resumen, la razón principal de la mayoría de CLS es una carga ineficiente.

Es importante tener en cuenta que incluso si no ve el cambio de diseño en tiempo real, eso no significa necesariamente que no se estén realizando cambios. Los navegadores web suelen almacenar en caché los datos del sitio web, por lo que es más fácil cargar páginas web cuando las visita de nuevo. Medir su puntuación CLS es la mejor manera de determinar si su sitio está experimentando cambios sustanciales en el diseño.

Cómo medir la puntuación CLS de su sitio

La puntuación CLS denota la cantidad de cambios de diseño que experimenta una página web durante su vida útil. Podemos derivar la puntuación CLS de lo que se conoce como la ventana de sesión. Una ventana de sesión describe la cantidad de cambios de diseño que ocurren 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 visible entre dos marcos. La fracción de distancia describe la cantidad de desplazamiento de un elemento entre marcos. 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 resultar un poco difíciles de entender. Afortunadamente, no es necesario que calcule el CLS de su sitio manualmente. Hay una serie de herramientas en línea (y fuera de línea) que pueden calcular los puntajes de 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 verificar las estadísticas de experiencia de usuario de su sitio para iteraciones móviles y de escritorio.

Otras herramientas de CLS incluyen:

• GT Metrix
• Depurador CLS de Google Web Vitals
• Información vital de la extensión web de Google Chrome
• prueba de página web

Dado que PageSpeed ​​Insights de Google es el más familiar, usémoslo en nuestro ejemplo.

Para medir su puntuación CLS, navegue a la página de inicio de PageSpeed ​​Insight, ingrese la URL de su página web en el campo de texto superior y haga clic en el botón Analizar botón. Dependiendo de la popularidad de su sitio y la velocidad de Internet, PageSpeed ​​Insights debería proporcionar un informe en 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 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 web tiene tantas funciones? Veamos cómo también 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. Muestra un GIF de todas las características cambiantes de su sitio. 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 tenga un CLS de buena reputación es tan importante como asegurarse de que lo tenga. fuerte SEO local y contenido relevante. El motor de búsqueda de Google tiende a favorecer los sitios que brindan una excelente experiencia de usuario y están bien optimizados.

Para hacer eso, 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, aumenta el riesgo de cambio de diseño porque el navegador web deberá calcular el tamaño de la imagen y determinar la orientación del diseño después de la carga. Es más probable que ocurran estas situaciones con imágenes y archivos grandes de alta resolución.

Al enviar archivos multimedia a los que les faltan propiedades de tamaño, ha puesto mucho 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 mientras se carga la fuente. El primer paso para lograrlo es asegurarse de que las fuentes se carguen localmente, en lugar de extraerlas de sitios de fuentes de terceros.

Si descubre que sus fuentes se extraen de un sitio 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 será un paso hacia el diseño ecológico.

Evite FOIT y FOUT

El Flash de texto invisible (FOIT) se produce cuando no especifica una fuente sustituta. Cuando su navegador intente cargar su fuente o encontrar una alternativa, los usuarios verán un espacio vacío donde debería estar el texto.

Durante el destello de texto sin estilo (FOUT), verá la fuente alternativa predeterminada del navegador web hasta que pueda cargar la fuente especificada. Para solucionar esto, puede agregar la propiedad fuente-pantalla: intercambio.

Si ya ha descargado fuentes de Google, notará que Google agrega esta etiqueta al final de cada URL. La forma más fácil de agregar esta propiedad es usar 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 cambio de visualización a estas URL. Si aloja fuentes localmente, puede usar el complemento String Locator para ubicar todos sus archivos de fuentes y cambiarlos. Deberá abrir la hoja de estilo de fuente en WP y modificarla.

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

fuentes precargadas

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

• Cohete WP
• Consejos sobre funciones antes de la fiesta
• Permatters

Si no puede 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. La carga previa de demasiadas fuentes puede dañar su sitio. Entonces, como con todas las grandes oportunidades de backend, le sugerimos que haga una copia de seguridad de su sitio de WordPress con anticipación.

Deshabilitar la optimización de entrega de CSS

Si está utilizando WP Rocket para optimizar la entrega de CSS o cargar CSS de forma asíncrona con LiteSpeed ​​Cache, esto puede causar que Contenido sin estilo en Flash (FOUC). Si desea mejorar su puntuación CLS, le recomendamos que desactive estas opciones en sus respectivos complementos.

Alternativamente, puede definir 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 reducir su puntuación CLS. Le recomendamos que pruebe su CLS con la optimización de entrega de CSS habilitada primero y luego lo pruebe cuando esté deshabilitado para comparar.

Deshabilitar animaciones

Si está utilizando animaciones, le recomendamos que las desactive para la versión móvil de su sitio web, ya que las animaciones pueden ralentizar el tiempo de carga de su sitio web. Si insiste en tener animaciones para su sitio, 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 modificar 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, más probabilidades habrá de que los usuarios lo marquen como favorito y lo vuelvan a visitar.

Diseño acumulativo (CLS) WordPress 2022

En Estrategia Creativa tenemos toda la información que necesitas sobre el mundo de digital y en especial para tus emprendimiento Si quieres seguir leyendo información útil  ¡echa un vistazo a nuestros artículos!