A very effective tool to visualize where Cumulative Layout Shift (CLS) is exactly coming from and increase your page score rating so as your visitor’s experience.
Genera un GIF animado que muestra los movimientos de los elementos mientras se carga la página.
En algunos casos, mucho más efectivo que un diagrama de carga en cascada.
| Análisis de cambios de diseño acumulativos | Faro | Prueba de página web | Herramientas para desarrolladores de Chrome |
|---|---|---|---|
| Output: Genera un GIF que muestra qué elementos se mueven en la ventana gráfica y devuelve la puntuación CLS. En páginas con mucho movimiento vertical, puede resultar difícil identificar qué elementos se desplazaron. | Output: El informe incluye CLS entre First Contentful Paint, Speed Index, Total Blocked Time y Largest Contentful Paint. La salida predeterminada es un informe HTML, y se puede obtener en formato JSON mediante un indicador. | Output: La tira de imágenes muestra los fotogramas clave de la carga, y las cascadas presentan una línea roja sincronizada con la tira. La documentación define CLS como la medida de cuánto se desplaza el diseño dentro del área visible mientras se carga la página. | Output: En el panel Rendimiento, la pista de cambios de diseño muestra los cambios como rombos morados agrupados. Al pasar el cursor sobre ellos, se resalta el elemento en la ventana gráfica, y la pestaña Resumen proporciona información sobre la duración, las puntuaciones, los elementos afectados y las posibles causas. |
| Condiciones de la prueba: La resolución de la ventana gráfica de escritorio es fija, de 1920 x 1080 píxeles. En dispositivos móviles se utiliza el perfil Lighthouse Nexus 5X, y la CPU y la red se limitan para simular una buena conexión 3G. | Condiciones de la prueba: Se ejecuta en Chrome local, desde las herramientas para desarrolladores, la línea de comandos, un módulo de Node o PageSpeed Insights. La línea de comandos requiere Node 22 o posterior. | Condiciones de la prueba: Las pruebas se realizan en navegadores reales desde ubicaciones de todo el mundo bajo condiciones de red personalizables. Chrome proporciona la mayor cantidad de información. | |
| Definición de CLS: La versión 1.2.0 utiliza la métrica de ventana de sesión máxima. Se aplica limitación de velocidad durante la prueba. | Definición de CLS: Las herramientas de laboratorio, como Lighthouse, solo registran los cambios durante la carga de la página, por lo que los valores pueden ser inferiores a los que experimentan los usuarios reales. | Definición de CLS: Se aplican las mismas limitaciones de laboratorio. La puntuación es el producto de la fracción de impacto y la fracción de distancia, y el objetivo es 0,1 o menos. | Definición de CLS: Cada turno tiene su propia puntuación en la pestaña Resumen. CLS agrupa los turnos en ventanas de sesión de hasta 5 segundos, con intervalos inferiores a 1 segundo. |
| Apertura y automatización: Se instala una versión de línea de comandos con npm (layout-shift-gif). Admite opciones de URL, dispositivo y salida, un archivo de cookies opcional y certificados HTTPS autofirmados. La página solicita donaciones opcionales a través de Ko-fi. | Apertura y automatización: Lighthouse tiene licencia Apache 2.0. Puede ejecutarse en integración continua (CI) a través de Lighthouse CI y como módulo de Node. | Apertura y automatización: El repositorio cuenta con una rama principal (master) bajo Polyform Shield 1.0.0 y una rama de Apache bajo Apache 2.0. Documenta cómo ejecutar una instancia propia y una API REST. La mayoría de los experimentos requieren WebPageTest Pro. |
Temas tratados: Desplazamiento acumulativo de diseño (CLS), puntuación de página, experiencia del visitante, GIF animado, movimiento de elementos, optimización de carga, interfaz de usuario, rendimiento web, análisis visual, diagrama de carga, métricas web, ISO 9241, ISO/IEC 25010, ISO 25012, ISO 25000 e ISO 9241-11.
Sugiera su mejor herramienta en línea:
¿Conoce algún sitio web mejor, complementario o sustituto del mencionado anteriormente?
> Sugerirlo aquí <
Las imágenes en tamaño completo y las descargas solo están disponibles, de forma totalmente gratuita, para los miembros registrados.
> Acceso <
