Resource Waterfall dibuja cada solicitud que realizó la página en una línea de tiempo, cada barra dividida en sus fases reales (en cola, DNS, TCP, TLS, espera y descarga) con marcadores para FCP, LCP, DOMContentLoaded y carga.
Cuando una página se siente lenta, la pregunta es siempre la misma: ¿a qué espera? La propia respuesta del navegador se encuentra en el panel Red, lo que significa abrir DevTools, acoplar un cajón sobre la página que está inspeccionando y recargar para captar el inicio de la carga.
Resource Waterfall coloca esa línea de tiempo en un panel flotante al lado de la página. Cada solicitud aparece como una barra posicionada según el momento en que comenzó y segmentada según dónde pasó realmente su tiempo: en cola o detenida, búsqueda de DNS, conexión TCP, protocolo de enlace TLS, espera del servidor y luego descarga. Un segmento azul largo es un servidor lento; una larga y verde es una lima gruesa; uno gris largo significa que la solicitud estaba esperando su turno. La distinción decide lo que debes arreglar.
Los marcadores discontinuos a lo largo de la línea de tiempo muestran la primera pintura con contenido, la pintura con contenido más grande, DOMContentLoaded y carga, para que pueda ver qué solicitudes finalizan antes de que el usuario vea algo y cuáles continúan después. Los recursos de bloqueo de renderizado y los aciertos de caché se marcan en cada fila, y un único filtro de bloqueo reduce la lista a lo que realmente está retrasando la primera pintura.
Filtre por tipo, busque por URL u ordene por más lento o más grande para encontrar rápidamente al peor infractor. Haga clic en cualquier fila para ver su URL completa, protocolo, tamaños de transferencia y descodificación, estado y desglose completo de las fases. Las solicitudes que llegan mientras el panel está abierto se transmiten directamente y Export JSON copia toda la línea de tiempo, incluidos los hitos, por lo que se puede entregar un resultado de rendimiento a otra persona sin una captura de pantalla.
Cada barra se divide en en cola, DNS, TCP, TLS, espera y descarga, por lo que un servidor lento, un archivo pesado y una solicitud en cola se distinguen inmediatamente.
Las líneas discontinuas para FCP, LCP, DOMContentLoaded y load muestran qué solicitudes se completan antes de que el usuario vea el contenido y cuáles aún se ejecutan después de él.
Un clic reduce la lista a los recursos que realmente retienen la primera pintura, con el recuento total de bloqueos en la barra de resumen.
Los recursos servidos desde la caché están marcados y etiquetados en lugar de aparecer como misteriosas filas de cero bytes, para que pueda verificar que su almacenamiento en caché realmente funciona.
Limite por tipo (documento, CSS, JS, imágenes, fuentes, XHR, medios): busque por URL u ordene por más lento o más grande para llegar al peor infractor en segundos.
Copie toda la cascada como JSON, incluidos los hitos, los totales y las fases por solicitud, para adjuntarla a un ticket o compararla con una ejecución posterior.
Filtre los recursos que bloquean el procesamiento y vea las hojas de estilo y los scripts exactos que se interponen entre su visitante y el contenido visible.
Ordene por más lento y observe cómo aparece un proveedor de análisis, fuentes o chat en la parte superior con una larga fase de espera que no tiene nada que ver con su código.
Lea los colores de las fases: el tiempo de espera es un problema de backend o de CDN, el tiempo de descarga es un problema de tamaño de archivo. La solución es diferente para cada uno.
Vuelva a cargar y confirme que los recursos provienen del caché y que los tamaños de transferencia son mucho más pequeños que los tamaños decodificados, lo que demuestra que la compresión está realmente activada.
Exporte la línea de tiempo como JSON y adjúntela a un ticket para que la siguiente persona vea los mismos números en lugar de intentar reproducir su sesión.
Haga clic en el icono Resource Waterfall en el Dock de DevSuite Pro. Todo lo que la página ha cargado hasta ahora aparece en la línea de tiempo inmediatamente.
Vuelva a cargar con el panel abierto para capturar la carga desde la primera solicitud, incluido el documento en sí y los hitos de pintura.
Presione el chip de bloqueo para ver solo los recursos que bloquean el procesamiento, o elija un tipo como js o img. Ordene por el más lento para colocar al peor infractor en primer lugar.
Haga clic en cualquier fila para ver su URL completa, protocolo, tamaños, estado y un desglose fase por fase en milisegundos, y copie la URL si la necesita.
Export JSON copia la línea de tiempo completa con hitos y totales, lista para pegar en un ticket o conservar como un registro de antes y después.
Instala DevSuite Pro gratis y desbloquea más de 71 herramientas de desarrollador para tu navegador.
