Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez un doute sur une information, veuillez vous référer à la version anglaise.
Introduction
Les graphiques Waterfall vous montrent chaque ressource qui se charge lors du rendu de votre page, vous aidant à diagnostiquer les problèmes de performance et à optimiser les temps de chargement. Que vous ayez besoin d'insights rapides basés sur l'IA ou d'une analyse technique détaillée, les données Waterfall vous aident à comprendre ce qui ralentit vos pages et ce qu'il faut corriger en priorité.
Ce que vous pouvez analyser avec Waterfall :
- Performance de chargement de la page : Identifiez les ressources lentes à charger, les scripts bloquant le rendu et les goulots d'étranglement affectant l'expérience utilisateur
- Chronométrage des ressources : Voyez quand chaque élément (images, JavaScript, feuilles de style, outils tiers) se charge et combien de temps cela prend
- Impact des tiers : Comprenez comment les scripts et services externes affectent la performance de votre page
- Requêtes réseau : Analysez les requêtes HTTP, les temps de réponse et les détails de connexionLes graphiques Waterfall vous aident à comprendre pourquoi vos pages web se chargent lentement et à identifier ce qu'il faut corriger en priorité.
Deux façons d'analyser :
- Résumé Waterfall (basé sur l'IA) : Obtenez des insights en langage clair et des recommandations priorisées sans expertise technique
- Graphique Waterfall détaillé : Accédez à des données techniques complètes incluant les détails de chronométrage, les en-têtes HTTP et les informations au niveau des requêtes
Vous pouvez accéder aux waterfalls interactifs dans les rapports Synthetic Monitoring (rapports autonomes et de comparaison) et dans les rapports détaillés des étapes de la fonctionnalité Scénario de Synthetic Monitoring.
Analyser la performance avec le résumé Waterfall
Qu'est-ce que le résumé Waterfall ?
Le résumé Waterfall utilise l'IA générative pour traduire des graphiques complexes de Waterfall réseau en langage clair et non technique, vous aidant à identifier rapidement et à communiquer les problèmes de performance sans nécessiter d'expertise technique sur les waterfalls.
Avec le résumé Waterfall, vous pouvez :
- Comprendre les problèmes de performance sans avoir à interpréter des graphiques techniques
- Identifier rapidement les problèmes majeurs à corriger en priorité
- Expliquer clairement les problèmes de performance à votre équipe
- Prendre des décisions axées sur les données concernant les priorités
Important : Pour accéder au résumé Waterfall, le planning IA doit faire partie de votre contrat avec Contentsquare ou être accepté par un utilisateur Administrateur sur votre compte. En savoir plus sur comment activer les capacités Sense.
Générer un récapitulatif Waterfall
Vous pouvez générer un récapitulatif Waterfall à partir de n’importe quel rapport de Synthetic Monitoring de deux manières :
Depuis la page des rapports :
- Cliquez sur 'Afficher' sur le rapport que vous souhaitez consulter.
- Faites défiler le rapport vers le bas.
-
Cliquez sur ‘Résumer le waterfall’ pour ouvrir le panneau latéral du récapitulatif Waterfall.
Lors de la consultation du graphique waterfall
- Ouvrez un rapport de Synthetic Monitoring et naviguez vers la ‘section Waterfall’.
-
Cliquez sur ‘Résumer le waterfall’ en haut de la page pour ouvrir le panneau latéral du récapitulatif Waterfall.
Le récapitulatif, qui fournit à la fois l’explication générée par l’IA et les détails techniques, apparaît dans un panneau latéral.
Comprendre le récapitulatif Waterfall
Chaque récapitulatif est organisé en trois sections principales pour vous aider à comprendre et agir sur les problèmes de performance :
- Insights clés : Une explication en langage clair des principales conclusions de performance, incluant les temps de chargement, les tâches JavaScript, et les problèmes de ressources impactant l’expérience utilisateur.
- Problèmes potentiels : Informations sur les goulots d’étranglement de performance détectés, tels que de gros bundles JavaScript, un nombre élevé de requêtes, ou des ressources bloquant le rendu
- Recommandations : Suggestions actionnables pour résoudre chaque problème identifié, extensibles pour plus de détails
Conseil : Vous pouvez copier le récapitulatif pour le partager avec d’autres membres de l’équipe.
Analyser la performance avec le graphique Waterfall détaillé
Détails du graphique
Chronométrages
La section Chronométrages liste les valeurs de toutes les métriques de performance pour la page. Sélectionnez les métriques que vous souhaitez afficher sur le waterfall (sous forme de lignes verticales), afin de pouvoir les analyser avec le trafic réseau associé.
Sélectionnez Largest Contentful Paint (LCP) pour voir la requête associée si le LCP est déclenché par une image.
Tâches longues
Tâches longues (navigateur web occupé pendant plus de 50 ms) et la valeur Total Blocking Time. Les tâches longues liées au Max Potential FID sont mises en évidence avec une couleur différente.
Waterfall
Le Waterfall affiche la liste séquentielle de toutes les requêtes HTTP.
Par défaut, le rapport affichera :
- La méthode HTTP (dans la plupart des cas GET ou POST).
- L’URL (survolez le nom pour voir l’URL complète)
- Le Statut HTTP (200, 301, 404, etc.)
- La taille de la réponse
- Son placement sur un axe temporel, avec un détails des différentes étapes entre l’établissement de la connexion et la réception de la réponse
Valeurs détaillées du Waterfall
Survolez la représentation de la requête pour obtenir des valeurs détaillées sur les jalons de temps de la requête et de la réponse.
- DNS Lookup : le temps nécessaire à la résolution DNS.
- Connecting : le temps nécessaire pour établir la connexion TCP (et éventuellement SSL) requise pour la communication HTTP.
- Waiting : le temps entre l’envoi de la requête HTTP et le début de la réception de la réponse.
- Receiving : le temps entre le début et la fin de la réception de la réponse.
Pour reproduire de manière réaliste le contexte d’un utilisateur Internet, le synthetic monitoring injecte un temps de latence sur toutes ces étapes, à l’exception du DNS Lookup. Tous les délais observés dépendent donc de la nature de la connexion configurée pour vos tests. Cela est particulièrement vrai pour l’étape Connecting, qui subira une latence à la fois sur la connexion TCP et sur la connexion SSL (le cas échéant).
Veuillez noter que les étapes DNS Lookup et Connecting ne seront pas toujours présentes. La résolution DNS est requise une seule fois par domaine, et la connexion TCP (et SSL si applicable) ne sera requise que si une connexion TCP existante n’est pas utilisée.
Voir plus d’informations sur la ressource
Cliquez n’importe où sur la ligne pour voir plus d’informations sur une requête/réponse donnée.
Vous pouvez trouver l’URL complète de la requête, l’adresse IP associée, les en-têtes HTTP de la requête et enfin ceux de la réponse.
Filtres et personnalisation
- Cliquez sur 'Personnaliser les colonnes' pour personnaliser vos paramètres d’affichage.
| Nom de la colonne | Description |
| Method | La méthode HTTP utilisée par la requête (GET, POST, PUT, etc) |
| URL | Le nom de la ressource - L’URL complète s’affiche lors du survol du nom. |
| Domain | Le domaine auquel vous envoyez la requête (par ex. example.com). |
| Status | Le statut de la réponse HTTP (200, 301, 404, etc.), du cache ("from cache") ou l’erreur sur la requête (par ex. "Requête bloquée par le navigateur" si vous utilisez nos fonctionnalités AdBlock ou Blocklist / Allowlist). |
| Type | Le type de contenu associé à la requête (Stylesheet, Image, XHR, etc). |
| Size | Taille de la réponse (telle que transférée sur le réseau, ce sera la taille compressée de la ressource si elle est compressée). Survolez la valeur pour obtenir des détails. |
| Protocol | Le protocole (http/1.1, h2, etc.) |
| Scheme | Le schéma de l’URL (http, https, wss, etc) |
| Remote Address | L’adresse IP du serveur (obtenue après résolution DNS du domaine par Google DNS 8.8.8.8) |
| Initiator | La ressource et la ligne de code source associée déclenchant initialement la requête (exemple : analytics.js : 28). Toute pile d’appels associée sera disponible lors du survol de la valeur Initiator. |
| Time | Le temps total entre l’envoi de la requête et la récupération de la réponse complète. |
| Priority | La priorité donnée à la requête par le navigateur web. |
| Timings | Le détail chronologique des différentes étapes de la communication requête/réponse. |
- Utilisez le 'Filtre URL' pour Afficher uniquement les requêtes contenant le texte choisi dans l’URL complète
Vous pouvez également filtrer les requêtes selon leur type (Script, XHR, etc).
Ces 2 types de filtres peuvent être utilisés indépendamment ainsi qu’en combinaison. La zone en bas à gauche du Waterfall vous montrera le nombre et le poids des éléments filtrés par rapport au total des requêtes.
Vous pouvez cliquer sur n’importe quel nom de colonne pour trier les éléments du Waterfall selon la valeur de cette information. Un premier clic appliquera un tri ascendant. Cliquez une seconde fois pour obtenir un tri descendant.
Conseil : Une bonne approche pour étudier votre contenu tiers (dépendances externes) est d’Afficher les colonnes Domaine et Initiateur puis d’utiliser les fonctionnalités de tri sur ces colonnes.