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.
Lors du visionnage d’une session 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 Waterfall des Détails du réseau est une représentation chronologique du trafic réseau associé au chargement d’une page web, incluant toutes les requêtes HTTP envoyées par le navigateur, ainsi que toutes les requêtes supplémentaires effectuées durant la consultation de la page.
Deux façons d’analyser la performance d’une session :
- Explorer le graphique des Détails du réseau : Accéder aux données techniques complètes incluant les détails du timing, les en-têtes HTTP, et les détails au niveau des requêtes
- Résumé des Détails du réseau (basé sur l’IA) : Obtenir des insights en langage clair et des recommandations priorisées sans expertise technique
Principaux cas d’usage
En savoir plus sur certains des cas d’usage les plus courants et des suggestions pour les réaliser :
Découvrir la cause profonde de la friction ou de la frustration utilisateur
Lors du visionnage d’une session, vous pouvez observer une frustration utilisateur (comme des rage clicks, des utilisateurs qui attendent 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 identifier quelles requêtes associées peuvent avoir un impact à ce moment-là.
Comment réaliser ce cas d’usage
Il suffit de mettre en pause le lecteur Session Replay au moment où vous observez la frustration, ou de cliquer sur un événement de friction spécifique (par ex. un rage click) 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 Session Replay).
Les Détails du réseau peuvent également vous aider à savoir si une erreur est survenue avant que notre Tag ne soit chargé. Dans ce cas, 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 le chargement du Tag.
Voir comment les erreurs et les requêtes lentes impactent l’expérience utilisateur
En examinant 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 ce cas d'usage
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 produit tiers, l'examen des détails du réseau peut montrer qu'aucun appel ultérieur à l'API d'information produit propriétaire 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 ceux qui échouent ou sont très longs. Vous pouvez ensuite visionner le moment lié dans le Player Session Replay pour voir comment cela a affecté l'expérience utilisateur, et décider d'enquêter plus avant avec votre équipe technique.
Comprendre quelles ressources affectent négativement le temps de 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 ce cas d'usage
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 Session Replay pour voir des exemples de telles sessions.
En regardant les pages vues, ouvrez les détails du réseau et vérifiez les ressources chargées au début de la page vue. Vous verrez rapidement les ressources causant le long temps de chargement.
Explorer les détails du réseau
Accéder au Waterfall des détails du réseau
Lors du visionnage d'une session replay, cliquez sur le bouton Ouvrir les détails du réseau en bas du lecteur.
Pour redimensionner la vue Waterfall, faites glisser la barre bleue vers le haut/bas (mise en évidence en rouge ci-dessous).
Chronométries
Cliquez sur 'Chronométries' pour afficher/masquer les métriques de performance de la page. Cochez ou décochez n'importe laquelle de ces métriques pour choisir si elles s'affichent dans le rapport Waterfall sous forme de lignes verticales, afin que vous puissiez les analyser avec le trafic réseau associé.
Remarque, les chronométries Core Web Vitals ne sont pas encore disponibles.
Personnaliser les colonnes
Cliquez sur 'Personnaliser les colonnes' pour trier les colonnes que vous souhaitez voir apparaître. Vous pouvez choisir d'afficher : URL, Domaine, Statut, Type, Taille, Protocole, Schéma, Temps, et Type d'initiateur.
Remarque, la colonne Statut (200, 301, 404, etc.) est uniquement disponible 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 saisissant des mots-clés dans le champ ‘Filtre URL’, ou filtrer la colonne ‘Type’ en sélectionnant le contenu que vous souhaitez afficher (par ex. ‘Tout’, ‘Document’, ‘Feuille de style’, etc.).
Notez que « Websocket » est le seul filtre qui n’est pas disponible dans le Waterfall des détails réseau dans Session Replay.
Waterfall
Utilisez le waterfall 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 : Ceci est synchronisé avec la chronologie de la lecture, avec un détail 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 « Timings » pour voir le détail du timing et le temps total.
Requêtes démarrant avant et après le début de la lecture
Session Replay commence à enregistrer une session une fois que le Tag de Tracking a été chargé. Les requêtes des détails réseau sont collectées depuis le début de la page vue. Par conséquent, certaines requêtes de données peuvent avoir eu lieu avant le début de la lecture.
Dans le waterfall des détails réseau, vous pouvez voir la zone correspondant à la lecture sur un fond hachuré dans la chronologie, et ainsi comprendre quelles requêtes ont eu lieu avant et après la lecture.
Analyser la performance avec les Résumés des détails réseau
Le Résumé des détails réseau est une capacité Sense. Il utilise l’IA générative pour transformer les données réseau d’une page vue spécifique en un résumé en langage clair, afin que vous puissiez rapidement comprendre ce qui se passe, pourquoi c’est important, et quoi faire ensuite.
Le résumé est limité à une seule page vue dans la session. L’URL analysée est affichée en haut du résumé pour que vous sachiez toujours exactement ce qui est analysé.
Comment générer un Résumé des détails réseau
- Ouvrez une lecture et faites défiler jusqu’à la section « Détails réseau » dans le lecteur.
- Cliquez sur le bouton « Résumer le réseau » en haut de la section Détails réseau.
- Le résumé s’ouvre dans le panneau en pleine hauteur à côté des détails réseau.
Si vous aviez précédemment généré un Résumé de Session Replay, il sera remplacé par le Résumé des détails réseau.
Comprendre le Résumé des détails réseau
Le résumé est organisé en deux sections :
Insights clés
Un détail en langage clair de l’état de la performance réseau, avec des références spécifiques au timing des requêtes et à l’impact sur l’expérience de l’utilisateur.
Problèmes potentiels
Chaque problème détecté comprend :
- Un label court décrivant le problème
- Une explication du problème, y compris les métriques impliquées et l’Impact sur l’utilisateur / utilisatrice
- Des recommandations spécifiques et exploitables pour résoudre le problème
Le récapitulatif couvre une vue de page à la fois
Naviguez vers la vue de page que vous souhaitez analyser avant de générer le récapitulatif.
Si vous naviguez vers une vue de page différente, déclenchez à nouveau le récapitulatif pour
obtenir des résultats mis à jour.
FAQ
Pourquoi ne puis-je pas voir la taille de transfert de mes requêtes ?
Il y a plusieurs raisons à cela :
- La requête peut provenir d’un domaine cross-origin. Dans ce cas, nous ne pouvons pas collecter la taille.
- La requête peut déjà être dans le cache, donc l’utilisateur / utilisatrice n’a pas chargé la ressource.
Pourquoi ne puis-je pas voir le détail du timing des requêtes ?
Lorsque la requête provient d’un domaine cross-origin, les détails du 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 requête.
La fonctionnalité Network Details dans Session Replay fonctionne-t-elle avec les Single Page Applications (SPA) ?
Avec Network Details dans Session Replay, vous pouvez voir les ressources qui ont été chargées pendant les vues de page sur vos pages SPA.
Comme les pages SPA ne se chargent pas comme des pages web « classiques », vous ne pouvez pas voir certaines requêtes (comme les requêtes de document).
De plus, les timings standards ne sont pas disponibles sur les vues de page artificielles, car ils sont liés aux timings de chargement naturel des pages.
Qu’est-ce que le temps de blocage de ma requête que je peux voir dans le détail du timing ?
Lors du téléchargement des 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 requête inclut le temps de blocage.
Pourquoi la chronologie Network Details dans Session Replay ne correspond-elle pas à la chronologie de Session Replay ?
Vous pouvez remarquer que la barre verticale noire sur la chronologie Network Details dans Session Replay ne commence pas au début de la chronologie de Session Replay mais avant. Par exemple, si votre replay est à 5 secondes, vous pouvez remarquer que la barre verticale est à 7 secondes sur la chronologie Network Details.
Cela s’explique par le fait que Session Replay commence l’enregistrement dès que le Tag est chargé sur la page.
Cependant, nous pouvons collecter les Network Details qui se sont produits avant que le Tag ne soit chargé.
C’est pourquoi le début de la chronologie Network Details commence avec des requêtes qui se sont produites avant le début du replay.
Pourquoi certaines requêtes n’apparaissent-elles pas dans la chronologie Network Details ?
Certaines requêtes peuvent ne pas apparaître dans les Détails du Réseau pour plusieurs raisons :
- Le Tag peut démarrer tard et remplir le tampon contenant les requêtes survenues 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é du Contenu (CSP) ne sera pas visible.
- Redirections TBC
Puis-je accéder aux en-têtes ou au contenu du payload ?
L'accès au contenu des en-têtes ou du payload est généralement impossible en raison des limitations de sécurité imposées par les navigateurs, les sites web ou les API.
Je vois 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 arriver pour deux raisons :
- Le navigateur web utilisé lors de la relecture n'est pas Google Chrome.
- Il existe une restriction CORS (Access-Control-Allow-Origin) qui empêche la collecte des informations disponibles.
Que contient le résumé des Détails du Réseau ?
Ce que l'IA analyse :
- Le timing, les tailles et le nombre de requêtes
- Les codes de statut HTTP et les types de ressources
- Les URL assainies (chemins et noms d'hôte uniquement)
- Les statistiques de performance totalisées au niveau de la page
Ce qui n'est jamais envoyé :
- Les en-têtes de requête ou de réponse (pas de cookies, pas de jetons d'authentification)
- Le contenu du corps de la requête ou de la réponse
- Les identifiants personnels (ID utilisateur, ID de session, adresses IP)
- Le contenu généré par les utilisateurs sur le site web