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 des doutes sur une information, veuillez vous référer à la version anglaise.
Lorsque vous regardez une rediffusion dans Session Replay, les Détails du Réseau vous permettent d'identifier les causes potentielles de friction dans l'expérience utilisateur (comme des requêtes lentes ou échouées).
Le graphique en cascade des Détails du Réseau est une représentation chronologique du trafic réseau associé au chargement d'une page web, y compris toutes les requêtes HTTP envoyées par le navigateur, ainsi que toutes les requêtes supplémentaires effectuées pendant la vue de la page.
Principaux cas d'utilisation
En savoir plus sur certains des cas d'utilisation les plus courants et des suggestions pour chacun :
Découvrez la cause profonde de la friction ou de la frustration des utilisateurs
Lorsque vous regardez une rediffusion, vous pouvez observer la frustration des utilisateurs (comme des clics de rage, des utilisateurs attendant longtemps, ou des interfaces qui ne se comportent pas comme prévu).
Vous pouvez utiliser la fonctionnalité Détails du Réseau pour découvrir la cause profonde de cette frustration et déterminer quelles requêtes connexes peuvent avoir un impact à ce moment-là.
Comment réaliser le cas d'utilisation
Il vous suffit de mettre en pause le Lecteur de Rediffusion de Session au moment où vous observez la frustration, ou de cliquer sur un événement de friction spécifique (par exemple, un clic de rage) dans le Flux d'Événements.
Ensuite, ouvrez les Détails du Réseau et vérifiez les requêtes qui se produisent à peu près au même moment (la barre verticale est synchronisée en même temps entre les Détails du Réseau et le Lecteur de Rediffusion de Session).
Les Détails du Réseau peuvent également vous aider à découvrir si une erreur s'est produite avant que notre Tag ne soit chargé. Lorsque cela se produit, l'erreur n'est pas capturée par le Tag. Avec les Détails du Réseau, vous pouvez observer tous les événements de ressources avant que le Tag ne soit chargé.
Voir comment les erreurs et les requêtes lentes impactent l'expérience utilisateur
En consultant les Détails du Réseau, vous pouvez identifier les impacts potentiels sur l'expérience de vos utilisateurs. Une erreur JS ou API peut avoir des conséquences : d'autres requêtes qui suivraient normalement peuvent disparaître, ou de nouvelles requêtes peuvent être envoyées (pour collecter l'erreur, par exemple).
En utilisant les Détails du Réseau, votre équipe technique peut mieux évaluer l'impact d'une erreur.
Comment réaliser le cas d'utilisation
Si une erreur se produit dans le script de chargement du carrousel, l'examen des Détails du Réseau peut montrer que les images du carrousel ne sont pas chargées.
Si une erreur 500 se produit dans l'API de recommandation de produits tiers, l'examen des Détails du Réseau peut montrer qu'aucun appel subséquent à l'API d'informations sur les produits de première partie pour récupérer les prix des produits recommandés n'a été envoyé.
Après avoir ouvert les Détails du Réseau, vous pouvez vérifier celles qui échouent ou qui sont très longues. Vous pouvez ensuite regarder le moment connexe dans le Lecteur de Rediffusion de Session pour voir comment cela a affecté l'expérience utilisateur, et décider d'enquêter davantage avec votre équipe technique.
Comprendre quelles ressources affectent négativement le chargement de la page
Améliorer le temps de chargement de votre page (comme la métrique Largest Contentful Paint (LCP)) peut être fastidieux si vous ne savez pas quoi améliorer.
Avec la fonctionnalité Détails du Réseau, vous pouvez facilement voir quelles ressources augmentent le temps de chargement de votre page.
Comment réaliser le cas d'utilisation
Vous pouvez créer un segment d'utilisateurs qui n'ont jamais une valeur LCP inférieure à 2,5 secondes. Ensuite, utilisez ce segment dans la Relecture de Session pour voir des exemples de telles sessions.
En regardant les pages vues, ouvrez Détails du Réseau et vérifiez les ressources chargées au début de la vue de la page. Vous verrez rapidement les ressources causant le long temps de chargement.
Aperçu du flux Détails du Réseau
Accéder au flux Détails du Réseau
Lors de la visualisation d'une relecture, cliquez sur le bouton Ouvrir Détails du Réseau en bas du lecteur.
Pour redimensionner la vue du flux, faites glisser la barre bleue vers le haut/bas (soulignée en rouge ci-dessous).
Temps
Cliquez sur 'Temps' pour afficher/masquer les métriques de performance de la page. Cochez ou décochez l'une de ces métriques pour choisir si elles s'affichent dans le rapport de flux sous forme de lignes verticales, afin que vous puissiez les analyser avec le trafic réseau associé.
Notez que les temps des Core Web Vitals ne sont pas actuellement disponibles.
Personnaliser les colonnes
Cliquez sur 'Personnaliser les colonnes' pour trier les colonnes que vous souhaitez afficher. Vous pouvez choisir d'afficher : URL, Domaine, Statut, Type, Taille, Protocole, Schéma, Temps et Type d'Initiateur.
Notez que la colonne Statut (200, 301, 404, etc.) n'est disponible que pour les navigateurs Chrome et lorsqu'elle n'est pas bloquée par des politiques de sécurité.
Filtres
Vous pouvez filtrer la colonne ‘URL’ en entrant des mots-clés dans le champ ‘filtre URL’, ou filtrer la colonne ‘Type’ en sélectionnant le contenu que vous souhaitez afficher (par exemple, ‘Tous’, ‘Document’, ‘Feuille de style’, etc).
Notez que ‘Websocket’ est le seul filtre qui n'est pas disponible dans le flux Détails du Réseau dans la Relecture de Session.
Flux
Utilisez le flux pour voir une liste séquentielle de toutes les requêtes HTTP.
Les informations affichées par défaut incluent :
- URL : L'URL (le nom de la ressource). Survolez le nom pour voir l'URL complète.
- Statut : Le Statut HTTP (200, 301, 404, etc.)
- Type : Le type de contenu
- Taille : La taille de la réponse
- Une barre de progression sur un axe temporel : Cela est synchronisé avec la chronologie de la relecture, avec une répartition des différentes étapes entre l'établissement de la connexion et la réception de la réponse.
Survolez une requête sous la colonne ‘Temps’ pour voir la répartition des temps et le temps total.
Demandes commençant avant et après le début de la lecture
La lecture de session commence à enregistrer une session une fois que la balise de suivi a été chargée. Les demandes de détails réseau sont collectées depuis le début de la vue de page. Par conséquent, certaines demandes de données peuvent avoir eu lieu avant le début de la lecture.
Dans le diagramme de détails réseau, vous pouvez voir la zone correspondant à la lecture sur un fond hachuré dans la chronologie, et ainsi comprendre quelles demandes se sont produites avant et après la lecture.
FAQs
Pourquoi ne puis-je pas voir la taille de transfert de mes demandes ?
Il y a plusieurs raisons à cela :
- La demande peut provenir d'un domaine d'origine croisée. Si c'est le cas, nous ne pouvons pas collecter la taille.
- La demande peut déjà être dans le cache, donc l'utilisateur n'a pas chargé la ressource.
Pourquoi ne puis-je pas voir la répartition du temps de demande ?
Lorsqu'une demande provient d'un domaine d'origine croisée, les détails de timing ne sont pas accessibles. De plus, certaines informations telles que la taille de transfert ne peuvent pas être collectées.
Notez que la durée totale prend en compte le temps de blocage potentiel de la demande.
La fonctionnalité Détails Réseau dans la lecture de session fonctionne-t-elle avec les applications à page unique (SPA) ?
Avec les Détails Réseau dans la lecture de session, vous pouvez voir les ressources qui ont été chargées pendant les vues de page sur vos pages SPA.
Étant donné que les pages SPA ne se chargent pas comme des pages web « régulières », vous ne pouvez pas voir certaines demandes (comme les demandes de documents).
De plus, les temps standards ne sont pas disponibles sur les vues de page artificielles, car ils sont liés aux temps de chargement de page naturels.
Quel est le temps de blocage de ma demande que je peux voir dans la répartition du temps ?
Lors du téléchargement de ressources, les navigateurs n'ont qu'un nombre limité de connexions ouvertes pour chaque origine. Ainsi, les ressources en attente de téléchargement sont bloquées jusqu'à ce qu'une connexion soit disponible. C'est le temps de blocage.
Notez que le temps total de la demande inclut le temps de blocage.
Pourquoi la chronologie des Détails Réseau dans la lecture de session ne correspond-elle pas à la chronologie de la lecture de session ?
Vous pouvez remarquer que la barre verticale noire sur la chronologie des Détails Réseau dans la lecture de session ne commence pas au début de la chronologie de la lecture de session mais avant. Par exemple, si votre lecture est à 5 secondes, vous pouvez remarquer que la barre verticale est à 7 secondes sur la chronologie des Détails Réseau.
Cela est dû au fait que la lecture de session commence à enregistrer dès que la balise est chargée sur la page.
Cependant, nous pouvons collecter des Détails Réseau qui se sont produits avant que la balise ne soit chargée.
C'est pourquoi le début de la chronologie des Détails Réseau commence avec des demandes qui se sont produites avant le début de la lecture.
Pourquoi certaines requêtes n'apparaissent-elles pas dans la chronologie des Détails du Réseau ?
Certaines requêtes peuvent ne pas apparaître dans les Détails du Réseau pour plusieurs raisons :
- Le Tag peut commencer tard et remplir le tampon contenant les requêtes qui se sont produites avant (donc certaines requêtes seront manquantes)
- Limitation de l'API pour les redirections
- Certaines ressources ne peuvent pas être collectées car elles proviennent d'un iFrame.
- Seules les requêtes au niveau du réseau peuvent être capturées, donc une requête bloquée par une Politique de Sécurité de Contenu (CSP) ne sera pas visible.
- Redirections TBC
Puis-je accéder aux en-têtes ou au contenu ?
L'accès au contenu des en-têtes ou au contenu est généralement impossible en raison des limitations de sécurité imposées par les navigateurs, les sites web ou les API.
Je peux voir une erreur d'API dans le Flux d'Événements mais elle n'est pas marquée comme une erreur dans la chronologie des Détails du Réseau. Pourquoi ?
Cela peut se produire pour deux raisons :
- Le navigateur web utilisé dans la lecture n'est pas Google Chrome.
- Il y a une restriction CORS (Access-Control-Allow-Origin) qui empêche la collecte des informations disponibles.