¿Qué es un Waterfall?
El gráfico de cascada es cualquier diagrama que representa los datos que se generan de forma acumulativa y secuencial en todo el proceso de carga de una web, el cual, nos ofrece el rendimiento específico de los recursos necesarios entre navegador y servidor para que el usuario pueda ver una página específica.
Cada recurso de página, desde HTML a imágenes, CSS, JavaScript y otros scripts, está representado en su propia línea en el gráfico, por tanto la cascada muestra el momento en que cada recurso se llama desde el servidor, hasta el momento en que se ha descargado y procesado en el navegador.
Partes de una petición

Partes de un Waterfall

Lo que vemos aquí es que el DOM se ha cargado tras los 0,8 segundos y el documento completo, transcurrido los 2,0.
Solo se observa un recurso js que se demora más en cargar.
Colores del Waterfall
- Errores en rojo
- Redirecciones en amarillo
- Caché en amarillo
- Azul verdoso es la búsqueda DNS
- Naranja es Connection
- Morado es la negocación SSL
Franjas verticales
- Línea verde, el Start render
- Línea morada, el DOM Content Loaded
- Línea azul fuerte, el Document complete
- Los status code, errores o ineficiencias, se visualizarán con un color constante en la fila implicada.
- Las fases de la conexión, se visualizarán con barras horizontales en distintas tonalidades, secuenciales como un flujo, junto a una simbología del tiempo transcurrido.
- Las fases de la carga de la web analizada, se visualizarán con columnas o barras verticales de colores, que se iniciarán en distintas fases, junto a una simbología del tiempo transcurrido.
Un ejemplo de los colores, donde las líneas amarillas son las redirecciones y las franjas anchas moradas, son imágenes susceptibles de ser optimizadas. También el alto volumen de ficheros js, va retrasando la carga y sumando muchas peticiones que deben realizarse cada vez.
La franja vertical morada, marca el momento en el cual se ha cargado el contenido del DOM, en este caso tiene lugar a los 8 segundos, para acabar cargado el documento completo casi a los 12 segundos.
Análisis básico de un Waterfall
- número de peticiones
- el tiempo que trascurre hasta el primer byte (TTFB)
- el tiempo que transcurre hasta iniciar el render
- el tiempo que transcurre hasta completa el documento
Para analizar de forma completa estos diagramas tenemos que tener en nuestra mente 3 puntos interesantes, que nos harán hacer una correcta lectura de estas cascadas de información, yendo más allá de los datos cuantitativos:
- la latencia que experimentan los recursos
- el orden en el que se cargan los recursos
- si un recurso bloque la carga de otros recursos
Una mala cascada por tanto, puede ser la que origina muchas peticiones de recursos, además de cargar los recursos de forma más lenta.
Algunos ejemplos:
Concluyendo:
- las líneas "start render" y "document complete" verticales deben producirse lo antes posible y deben estar tan cerca una de la otra como sea posible.
- que existan cuantas menos filas posibles.
- que existan cuantas menos barras naranjas posibles.
- el ttfb va más allá de las configuraciones del server, también tienen que ver con servir de forma eficiente contenido dinámico y tener las bbdd bien optimizadas.
Trucos finales con Webpagetest
Para acabar el post, hay algunas características que nos ayudarán a continuar con nuestros análisis:
- Exportar
- Customizar
- Tabla de detalles: es la versión numérica de lo que hemos visto en el waterfall
- Pinchar en una fila para obtener detalles concretos
- Puntuación o Grados de Webpagetest: donde se asocian las carencias del análisis con recomendaciones a llevar a cabo respecto a compresión, caches, cdns y otros aspectos.
¡Esto es todo por hoy!
En el próximo post ya hablaremos sobre comparar test con Webpagetest
Deja tu comentario