El cambio acumulativo de diseño (Cumulative Layout Shift) es un de Core Web Vitals que evalúa el grado de coherencia visual de una página. El número de cambios inesperados en el diseño sin que el usuario interactúe con el sitio web determina el nivel de estabilidad visual. Cada vez que cambia el contenido de la página, se considera que el diseño ha cambiado, incluso si no se debe a que el usuario haya hecho clic en un enlace o algo similar.
La puntuación general del turno de diseño acumulativo se determina sumando todos estos turnos.
¿Qué es el cambio de diseño acumulativo?
El retraso en la carga de fotos es el problema más frecuente que CLS . Es común que el texto se cargue antes que los elementos multimedia. Además, la estructura de la página web cambia una vez que todos los componentes gráficos se han cargado por completo. Estos problemas ocurren independientemente de si se está desplazando la página.
Aunque una página web tenga una puntuación CLS alta, puede ser difícil determinar cuándo ha terminado de cargarse. La complejidad del sitio web y la cantidad de contenido multimedia aumentan la probabilidad de que los usuarios experimenten cambios de diseño.
¿Reducir el cambio de diseño acumulativo en WordPress?
Usar el depurador CLS de Google Web Vitals es el método más eficaz para determinar qué componentes son responsables de la alta puntuación CLS de su sitio web. Le presenta un GIF que ilustra todos los elementos rotatorios de su sitio web. La mayoría de las puntuaciones CLS altas pueden atribuirse a anuncios y recursos multimedia. Deberá optimizar cada componente para aumentar su puntuación CLS.
Para ello, a continuación se presentan algunos métodos que pueden utilizarse para mejorar la puntuación CLS de su sitio web:
1. Agregar atributos de dimensión a todos los archivos multimedia
Dado que su navegador web deberá evaluar el tamaño de la imagen y la orientación del diseño una vez cargada, la posibilidad de un cambio de diseño puede aumentar si carga recursos multimedia con atributos desconocidos. Las fotos grandes y los archivos de alta calidad tienen una mayor probabilidad de experimentar uno de estos problemas que los más pequeños. Redimensione las imágenes en el editor multimedia de WordPress.
2. Asegúrese de que las fuentes se carguen localmente
Durante la carga de la fuente, el texto debe permanecer visible. Por lo tanto, para lograr este objetivo, es fundamental garantizar que las fuentes se carguen localmente en lugar de obtenerse de sitios web que alojan fuentes de terceros.
3. Evite FOIT y FOUT
El del destello de texto invisible (FOIT) ocurre cuando no se especifica una fuente alternativa. Como resultado, los usuarios verán un área en blanco donde normalmente estaría el texto mientras su navegador web intenta cargar la fuente o busca una alternativa.
Durante un periodo conocido como "flash de texto sin estilo" (FOUT), su navegador web usará su fuente de reserva predeterminada hasta que pueda cargar la fuente seleccionada. Para solucionarlo, puede agregar el atributo font-display: switch.
Puede leer más artículos como este en Seahawk Media Blog.
