Resource Waterfall dessine chaque requête effectuée par la page sur une chronologie, chaque barre étant divisée en ses phases réelles - mise en file d'attente, DNS, TCP, TLS, attente et téléchargement - avec des marqueurs pour FCP, LCP, DOMContentLoaded et chargement.
Lorsqu’une page semble lente, la question est toujours la même : qu’attend-elle ? La réponse du navigateur se trouve dans le panneau Réseau, ce qui signifie ouvrir DevTools, ancrer un tiroir sur la page que vous inspectez et recharger pour attraper le début du chargement.
Resource Waterfall place cette chronologie dans un panneau flottant à côté de la page. Chaque requête apparaît sous la forme d'une barre positionnée selon le moment où elle a démarré et segmentée selon l'endroit où son temps s'est réellement écoulé : en file d'attente ou bloquée, recherche DNS, connexion TCP, prise de contact TLS, attente du serveur, puis téléchargement. Un long segment bleu est un serveur lent ; un long vert est un gros dossier ; un long gris signifie que la demande attend son tour. La distinction décide de ce que vous devez corriger.
Les marqueurs en pointillés sur la chronologie affichent First Contentful Paint, Largest Contentful Paint, DOMContentLoaded et Load, afin que vous puissiez voir quelles requêtes se terminent avant que l'utilisateur ne voie quoi que ce soit et lesquelles sont encore en cours après. Les ressources bloquant le rendu et les accès au cache sont signalés sur chaque ligne, et un seul filtre de blocage réduit la liste à ce qui retarde réellement la première peinture.
Filtrez par type, recherchez par URL ou triez par le plus lent ou le plus grand pour trouver rapidement le pire délinquant. Cliquez sur n’importe quelle ligne pour connaître son URL complète, son protocole, ses tailles de transfert et de décodage, son statut et la répartition complète des phases. Les demandes qui arrivent alors que le panneau est ouvert sont diffusées directement et Export JSON copie l'intégralité de la chronologie, jalons inclus, afin qu'un résultat de performances puisse être transmis à quelqu'un d'autre sans capture d'écran.
Chaque barre est divisée en file d'attente, DNS, TCP, TLS, attente et téléchargement, de sorte qu'un serveur lent, un gros fichier et une requête en file d'attente se distinguent immédiatement.
Les lignes pointillées pour FCP, LCP, DOMContentLoaded et load indiquent quelles requêtes se terminent avant que l'utilisateur ne voie le contenu et lesquelles sont toujours en cours d'exécution après celui-ci.
Un clic réduit la liste aux ressources qui bloquent réellement la première peinture, avec le nombre total de blocages dans la barre de résumé.
Les ressources servies à partir du cache sont marquées et étiquetées au lieu d'apparaître sous forme de mystérieuses lignes de zéro octet, afin que vous puissiez vérifier que votre mise en cache fonctionne réellement.
Affinez par type – document, CSS, JS, images, polices, XHR, média – recherchez par URL ou triez par le plus lent ou le plus grand pour atteindre le pire contrevenant en quelques secondes.
Copiez l'intégralité de la cascade au format JSON, y compris les jalons, les totaux et les phases par demande, pour la joindre à un ticket ou la comparer à une exécution ultérieure.
Filtrez les ressources bloquant le rendu et voyez les feuilles de style et les scripts exacts qui se trouvent entre votre visiteur et le contenu visible.
Triez par le plus lent et regardez un fournisseur d'analyse, de police ou de chat apparaître en haut avec une longue phase d'attente qui n'a rien à voir avec votre code.
Lisez les couleurs des phases : le temps passé à attendre est un problème de backend ou de CDN, le temps passé à télécharger est un problème de taille de fichier. Le correctif est différent pour chacun.
Rechargez et confirmez que les ressources proviennent du cache et que les tailles de transfert sont bien inférieures aux tailles décodées, ce qui prouve que la compression est réellement activée.
Exportez la chronologie au format JSON et joignez-la à un ticket afin que la personne suivante voie les mêmes numéros au lieu d'essayer de reproduire votre session.
Cliquez sur l'icône Resource Waterfall dans le dock DevSuite Pro. Tout ce que la page a chargé jusqu'à présent apparaît immédiatement sur la chronologie.
Rechargez avec le panneau ouvert pour capturer la charge dès la première requête, y compris le document lui-même et les jalons de peinture.
Appuyez sur la puce de blocage pour voir uniquement les ressources bloquant le rendu, ou choisissez un type tel que js ou img. Triez par le plus lent pour placer le pire délinquant en tête.
Cliquez sur n’importe quelle ligne pour connaître son URL complète, son protocole, ses tailles, son statut et une répartition étape par phase en millisecondes – et copiez l’URL si vous en avez besoin.
Export JSON copie la chronologie complète avec les jalons et les totaux, prête à être collée dans un ticket ou à conserver comme enregistrement avant et après.
Installez DevSuite Pro gratuitement et débloquez plus de 71 outils de développement pour votre navigateur.
