Autor
Hace ya 1 año que Google tiene en cuenta la experiencia del usuario como factor de posicionamiento en sus resultados de búsqueda. Los KPI de rendimiento web que son los Core Web Vitals son seguidos desde hace tiempo por los responsables SEO. Intéressons-nous aujourd'hui au Cumulative Layout Shift.
Les Core Web Vitals (Signaux Web Essentiels en français) evalúan el rendimiento de la carga de una página web para un internauta :
¿Qué es el desplazamiento de disposición acumulativo?
El CLS (Cumulative Layout Shift) mide así la estabilidad visual de una página. L'exemple le plus parlant est celui d'un site média, par nature dense en encart publicitaire. Le titre et le début d'un article apparaissent, l'internaute s'apprète à les faire défiler, mais au moment où il clique apparaît un bandeau publicitaire. L'internaute est donc amené vers un site tiers non souhaité, il lui faut faire marche arrière pour revenir à son article, et être vigilant à ne pas re-cliquer sur le bandeau surprise.
Optimizar el desplazamiento de diseño acumulativo - Google - https://web.dev/optimize-cls/
La situación es actual en los sitios web modernos, por lo que Google ha lanzado un indicador de medición para animar a los editores de sitios web a mejorarlo.
¿Cómo medirlo?
C'est une métrique composée de deux éléments :
Dans l'exemple : l'élément principal couvre 50% de l'écran et se déplace de 25%, il a donc exploité 75% de l'écran au total.
Le CLS est donc : Superficie x Distancia = 0,75 * 0,25 = 0,1875
Por tanto, se trata de una mejora necesaria para que la página en cuestión se considere deficitaria de CLS.
Más sencillamente, las herramientas de rendimiento web de Google permiten conocer el CLS de una página dada : PageSpeed Insights (a nivel de sitio) y Lighthouse (módulo del navegador Google Chrome). La mejor fuente de datos sigue siendo, por naturaleza, la que recoge los datos reales de los usuarios, por ejemplo, Search Console. En el informe de Signaux Web Essentiels, se releva el número de páginas consideradas como Lentes o que necesitan una mejora, y cada KPI dispone de su informe.
Así se identifican fácilmente las páginas más afectadas, reagrupadas por páginas similares (gabarit / plantilla).
¿Cómo mejorar el CLS?
Bonne nouvelle, en plus de nous donner le maximum de données de mesure, Google nous guide para resolver posibles problemas de inestabilidad visual.
Plusieurs scénarios courants sont abordés :
El caso de las imágenes que se cargan después de la estructura de la página es frecuente en todo tipo de sitios, sobre todo en el comercio electrónico (fichas o listas de productos).
En el siguiente ejemplo, el nombre de los productos se carga en primer lugar y a continuación aparecen las imágenes de los productos. Éstas eliminan los nombres ya cargados, haciendo que la página sea inestable durante su carga.
Es posible evitar este comportamiento definiendo zonas reservadas para las imágenes antes de cargarlas.
Uno de los métodos posibles consiste en determinar las dimensiones de las imágenes, para que los navegadores les devuelvan un espacio calculando la relación entre tamaño y altura (relación de aspecto).
También es posible definir directamente una relación de aspecto en el CSS para aplicarla a una categoría de imágenes similares.
Notons que cette amélioration a nettement amélioré les scores du site web concerné lors de sa mise en production : d'un CLS de 0.178 on est passé à 0.002. Y de 26% de visitantes afectados por una inestabilidad visual del sitio, se ha pasado a 1,27% (datos procedentes de la Search Console, restando los rendimientos constatados por los usuarios del sitio).
