¡Atención desarrolladores web y amantes del SEO! Según la fuente, Google ha arrojado luz sobre cómo se mide el Cumulative Layout Shift (CLS), un aspecto crucial para optimizar la experiencia del usuario.
Google explica cómo se mide el Cumulative Layout Shift
Barry Pollard, defensor del rendimiento web en Google, ha proporcionado detalles sobre la medición del CLS. Esta aclaración es importante porque el CLS es uno de los Core Web Vitals, esenciales para el posicionamiento en Google.
Comprender cómo se calcula el CLS ayuda a los desarrolladores a optimizar sus sitios web, mejorando así la experiencia del usuario y potencialmente su visibilidad en los resultados de búsqueda.
Entendiendo la medición del CLS
Según la fuente, Pollard comenzó explicando que el CLS es «sin unidad», a diferencia de otras métricas que se miden en segundos o milisegundos. Cada cambio de diseño se calcula multiplicando dos fracciones: lo que se movió (fracción de impacto) y cuánto se movió (fracción de distancia).
Este método de cálculo ayuda a cuantificar la gravedad de los cambios de diseño inesperados en una página web. Por ejemplo, si toda la pantalla se mueve hacia abajo, es peor que si solo se mueve la mitad.
El peor escenario posible
Pollard describió el peor caso para un solo cambio de diseño: «El máximo cambio es si el 100% de la pantalla (fracción de impacto = 1.0) se mueve una pantalla completa hacia abajo (fracción de distancia = 1.0). Esto da un puntaje de cambio de diseño de 1.0 y es básicamente el peor tipo de cambio.»
Sin embargo, recordó que el CLS es acumulativo: «Tomamos todos los cambios individuales que ocurren en un corto espacio de tiempo (máximo 5 segundos) y los sumamos para obtener el puntaje de CLS.»
La ventana de medición de 5 segundos
La razón detrás de la ventana de medición de 5 segundos es, según la fuente, que acumular todos los cambios no medía realmente la experiencia del usuario, especialmente para páginas abiertas durante mucho tiempo. Medir todos los cambios significaba que, dado suficiente tiempo, incluso las mejores páginas fallarían.
Pollard también señaló el máximo teórico del puntaje CLS: «Dado que cada elemento solo puede cambiar cuando se dibuja un frame y tenemos un límite de 5 segundos, y la mayoría de los dispositivos funcionan a 60fps, eso da un límite teórico en el CLS de 300.»
Interpretando los puntajes de CLS
Para entender mejor los puntajes, Pollard sugirió pensar en el CLS como un porcentaje de movimiento. El umbral bueno de 0.1 significa que aproximadamente la página se movió un 10%. Esto podría significar que toda la página se movió un 10%, o la mitad de la página se movió un 20%.
En cuanto a los valores específicos de umbral, explicó: «¿Por qué 0.1 es ‘bueno’ y 0.25 es ‘pobre’? Fue una combinación de lo que queríamos (¡CLS = 0!) y lo que es alcanzable. 0.05 era alcanzable en la mediana, pero para muchos sitios no lo sería, así que fuimos un poco más altos.»
Importancia para desarrolladores y SEO
Según la fuente, los insights de Pollard proporcionan a los desarrolladores web y profesionales de SEO una comprensión más clara de cómo medir y optimizar el CLS. Al trabajar con el CLS, es crucial tener en cuenta que:
- El CLS es sin unidad y se calcula a partir de las fracciones de impacto y distancia.
- Es acumulativo, midiendo cambios en una ventana de 5 segundos.
- El umbral «bueno» de 0.1 equivale aproximadamente a un 10% de movimiento de pantalla.
- Los puntajes de CLS pueden superar 1.0 debido a múltiples cambios acumulados.
- Los umbrales equilibran el rendimiento ideal con objetivos alcanzables.
Con esta información, los desarrolladores pueden realizar ajustes para alcanzar el umbral establecido por Google y mejorar así la experiencia del usuario.
Por qué esto importa
Comprender cómo se mide el CLS es vital para ofrecer una experiencia de usuario estable y satisfactoria. Un bajo puntaje de CLS puede llevar a una mejor visibilidad en las búsquedas, ya que es un factor que Google considera en su algoritmo.
Además, optimizar el CLS contribuye a reducir la frustración del usuario causada por elementos que se mueven inesperadamente en la página, mejorando así la usabilidad del sitio.
Pasos a seguir para optimizar el CLS
Para lograr un buen puntaje de CLS, la fuente sugiere:
- Asegurarse de que las imágenes y videos tengan dimensiones especificadas.
- Reservar espacio para anuncios y elementos incrustados.
- Evitar insertar contenido nuevo encima de contenido existente.
Estos pasos ayudarán a minimizar los cambios de diseño inesperados y mejorar el puntaje de CLS de tu sitio web.
Conclusión
Según la fuente, las aclaraciones de Barry Pollard sobre el CLS ofrecen una guía valiosa para desarrolladores y profesionales de SEO. Entender y aplicar estos conceptos es esencial para mejorar la experiencia del usuario y potenciar la visibilidad en los resultados de búsqueda de Google.
Al centrarse en optimizar el CLS, estarás un paso más cerca de ofrecer un sitio web de alta calidad que cumpla con los estándares actuales de rendimiento web.
Fuente: https://www.searchenginejournal.com/google-explains-how-cumulative-layout-shift-cls-is-measured/529987/