Cómo mejorar el cambio acumulativo de apariencia (CLS) para WordPress

La mayoría de los sitios web se crean para acceder a diferentes dispositivos con diferentes tamaños de pantalla y resoluciones. Por lo tanto, mantener la misma experiencia en varias plataformas puede ser difícil. WordPress facilita el diseño web en múltiples plataformas. Sin embargo, en cualquier forma de desarrollo de software, la construcción de una solución universal puede ser complicada. En el caso del desarrollo web, los usuarios que navegan de una página a otro en un sitio web a veces pueden experimentar lo que se conoce como desplazamiento de diseño acumulativo (CLS). Es cuando los elementos visuales de una página se someten a 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 su posición o la página completa cambia.
¿Por qué está sucediendo esto y cómo podemos solucionarlo? En esta guía, exploraremos qué es CLS y cómo puede evitarlo en su sitio web. ¿Cuál es el cambio acumulativo de apariencia? La forma más común perceptible por CLS es el retraso en la carga de las imágenes. En sitios web complejos que están pesados ​​con elementos visuales, a menudo notará que el texto se carga ante los elementos de los medios. Además, la aparición de la página web cambia cuando todos los elementos visuales finalmente se cargan. Estos incidentes aparecen independientemente de si corre o 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 más difícil sea el sitio web, mayor será la probabilidad de cambiar la apariencia de la experiencia.
Por ejemplo, las páginas web simples de un motor de búsqueda con muy pocos elementos visuales tienen poco o nada. Sin embargo, esto no significa que todos los sitios web complejos o ricos en las funciones tengan puntajes CLS altos. Por ejemplo, la tienda en línea de Amazon está llena de widgets, imágenes y enlaces, pero es rápido, sin cambios notables. ¿Qué causa el cambio acumulativo en la apariencia? CLS tiende a aparecer porque los navegadores web se cargan secuencialmente en diferentes momentos. Además, puede tener elementos de medios en su sitio con propiedades desconocidas (como el tamaño).

En los casos en que no especifique el ancho o la altura de un elemento de medios (como una imagen), su navegador web no sabrá cuánto espacio asignar hasta que la página web se cobre por completo. Por lo tanto, un cambio drástico de apariencia. En conclusión, la razón principal de la mayoría de los CL es la carga ineficiente. Es importante tener en cuenta que, incluso si no nota el cambio en la apariencia de tiempo real, esto no significa necesariamente que no haya cambios. Los navegadores web a menudo memorizan los datos del sitio web en caché, por lo que es más fácil cargar las páginas web cuando vuelve a acceder a ellos. Medir el puntaje CLS es la mejor manera de determinar si su sitio web se somete a una apariencia sustancial.
Cómo medir el puntaje CLS de su sitio Sitio CLS La puntuación denota el número de cambios de apariencia que una página web a lo largo de su vida útil. Podemos derivar la puntuación del CLS de lo que se conoce como ventana de sesión. Una ventana de sesión describe el número de cambios de apariencia que tienen lugar en cinco segundos. Para calcular la puntuación del CLS, debemos multiplicar la fracción de distancia con la fracción de impacto: la puntuación CLS = la fracción de distancia x fracción de impacto La fracción de impacto describe cuánto un elemento inestable es el área perceptible entre dos cuadros. La fracción de distancia describe la cantidad que un elemento ha movido entre los cuadros. Una puntuación de 0.10 y más baja (0.0 – 0.10) es excelente. Una puntuación de CLS más de 0.10, pero por debajo de 0.25 (0.10 -0.25) es moderada y requiere mejoras, mientras que una puntuación de CLS superior a 0.25 (0.25 <) es débil. Estos conceptos pueden ser un poco difícil de entender. Afortunadamente, no tiene que calcular el manual de su sitio web. Hay muchas herramientas en línea (y fuera de línea) que pueden calcular el puntaje CLS para usted. La forma más popular de medir su página web es a través de PageSpeed ​​Insights de Google. Le permite encontrar las estadísticas sobre la experiencia del usuario de su sitio, para iteraciones móviles y de escritorio. Otras herramientas de CLS incluyen:
GT MENO
Google Web Vitals CLS Debugger
Extensión vital de Google Chrome Web Web
Faro de Google
Prueba de la página web
Debido a que PageSpeed ​​Insights de Google es la más familiar, lo usaremos para nuestro ejemplo.
Para medir su puntaje CLS, navegue por la página de inicio de PageSpeed ​​Insight, inserte su página web en su campo de texto superior y luego haga clic en el botón. Dependiendo de la popularidad de su sitio y la velocidad de Internet, PageSpeed ​​Tsights debería proporcionarle un informe en segundos. Para encontrar la puntuación CLS, desplácese hacia abajo en la sección Core Web Vitals de evaluación. Si usamos la página inicial de Amazon, más de lo seguro, encontraremos un puntaje inferior a 0.10. Durante nuestra prueba, descubrimos que el sitio móvil tenía una puntuación de 0.01 CLS, mientras que la versión de escritorio tenía una puntuación de 0.05.
Pero, ¿cómo lo hago cuando su sitio tiene tantos recursos? Veamos cómo puede tener un AMASON similar anotará.
Cómo optimizar la mejor manera de ver qué elementos causan la puntuación de alta CLS es usar los CLS Google Web Vitals. Le muestra un GIF con todos los cambios en su sitio. Los anuncios de medios y los archivos son los más comunes para los puntajes de alto CLS. Otras causas pueden incluir fuentes, CSS asíncrono, animaciones e iframes. Para mejorar su puntaje CLS, deberá optimizar estos elementos. Asegurar que su sitio tenga un CLS respetable es igual de importante para asegurarse de que tenga un SEO local fuerte y contenido relevante. El motor de búsqueda de Google tiende a dar preferencia a los sitios web que brindan una excelente experiencia del usuario y están bien optimizados.

Para este propósito, aquí hay algunos pasos para mejorar la puntuación CLS de su sitio: agregue el tamaño a todos los archivos multimedia Si carga archivos multimedia con propiedades desconocidas, aumentará el riesgo de cambio, porque su navegador web necesitará descubrir el tamaño de la imagen y determinar la orientación de la apariencia después de la carga. Es más probable que estas situaciones aparezcan para imágenes y archivos de alta resolución. Al cargar los archivos multimedia con propiedades de tamaño faltante, pone demasiado trabajo en manos del navegador web. Debe agregar las propiedades de altura y ancho para cada archivo de medios visuales que cargue. Puede hacerlo visualizando el código fuente y agregando manualmente las propiedades del ancho y la altura. Asegúrese de que las fuentes estén cargadas 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 extraerse de sitios web con tercera fuentes. Si descubre que sus fuentes se extraen de un sitio web de terceros, puede usar un complemento como OMGF para alojarlas localmente y subirlas más rápido. Esto no solo mejorará su puntaje CLS, sino que también es un paso hacia un diseño ecológico. Evite aparece FOIT y Fout Flash de texto invisible (FOIT) cuando no especifica una fuente alternativa. Mientras su navegador web intenta cargar su fuente o encontrar una alternativa, los usuarios recibirán un espacio vacío donde deben ser texto.
Durante el intermitente del texto sin texto (FOUT), será presentado por la fuente alternativa predeterminada del navegador web hasta que pueda cargar la fuente especificada. Para remediar esto, puede agregar la propiedad de pantalla de fuentes: intercambio. Si alguna vez ha descargado fuentes de Google, notará que agrega esta etiqueta al final de cada URL. La forma más sencilla de agregar personalmente esta propiedad es usar el complemento de intercambio de visualización de Google Fonts. Sin embargo, tenga en cuenta que este complemento funciona solo para Google Fonts y agrega automáticamente la apariencia de esa pantalla URL. Si aloja las fuentes locales, puede usar el complemento de localización de cadenas para encontrar todos sus archivos de fuentes y cambiarlas. Deberá abrir la hoja de estilo de fuente en el WP y cambiarla. Alternativamente, puede usar complementos de almacenamiento de caché, como uno que optimizará automáticamente las fuentes para usted, agregando la propiedad de cambio de fuente. Fuentes de precarga para asegurarse de alojar fuentes locales, puede precargar las fuentes con un complemento como: WP Rocket

Consejos sobre recursos de fiesta Party*
Habilitar
Si no se permite usar estos complementos, puede precargar su fuente editando el archivo Header.php. Asegúrese de probar bien su sitio después de precargar las fuentes. Preparar demasiadas fuentes puede dañar su sitio. Por lo tanto, como con cualquier trasero importante, le sugerimos que haga una copia de seguridad de su sitio de WordPress de antemano. Deshabilite la optimización de entrega de CSS Si utiliza WP Rocket para optimizar la entrega de CSS o para cargar CSSCRON con caché de Litespeed, puede causar un destello de contenido de estilo (FOUC). Si desea mejorar su puntaje CLS, le recomendamos que apague estas opciones en sus respectivos complementos. Alternativamente, puede establecer lo que se conoce como crítico de reserva. Esto implica generar un script de reserva crítico utilizando un instrumento como el generador CSS de ruta crítica. Eliminar los scripts de bloqueo de renderizado también puede reducir su puntaje. Recomendamos que primero pruebe la optimización de entrega de CSS y luego la pruebe cuando lo desactive para comparar. Deshabilite las animaciones Si usa animaciones, le recomendamos que las apague para la versión móvil de su sitio, porque las animaciones pueden evitar el tiempo de carga de su sitio si insiste en su sitio, le sugerimos que use opciones de transformación y traducción de CSS. Alternativamente, puede usar el complemento de complementos felices. Esto le permite animar elementos sin causar cambios de apariencia.