Vue d'ensemble

Un problème de rendu de page web survient lorsque la page ne s'affiche pas ou ne fonctionne pas correctement sur l'appareil de l'utilisateur. Ce problème peut se manifester de plusieurs façons, telles que des images incomplètes ou déformées, une mise en page cassée, des temps de chargement lents ou des fonctionnalités non réactives. La cause de ces problèmes peut provenir de divers facteurs. 

HTTP Archive (HAR) est un outil qui peut aider à diagnostiquer et résoudre les problèmes de rendu de pages web. HAR permet aux administrateurs réseau de capturer et d'analyser les données de trafic réseau, y compris les requêtes, les réponses et les délais générés lorsque l'utilisateur accède à une page web. Ces données peuvent fournir des informations sur la manière dont une page web se charge et fonctionne, identifier tout goulot d'étranglement ou erreur, et aider à identifier la cause racine des problèmes de rendu.

Cet article abordera comment utiliser les données HAR pour résoudre des problèmes de rendu de pages web.

Environnement

Les données HAR sont requises.

Instructions

Collectez les données HAR en reproduisant le problème. Pour obtenir des instructions sur la manière de collecter des données HAR, consultez cet article. Nous verrons comment utiliser les données HAR collectées pour révéler des problèmes en examinant les codes de statut HTTP ainsi que le temps de réponse des requêtes HTTP.  

Codes de Statut HTTP

Les codes de statut HTTP fournissent des informations sur le statut de la requête d'un client à un serveur, aidant à diagnostiquer et résoudre tout problème pouvant survenir lors du processus de communication. Ci-dessous, les codes de statut HTTP courants et leur signification. Référez-vous à la page Définition des Codes de Statut HTTP/1.1 pour les détails.

• 200 - Succès
• 404 - Page non trouvée / Requête incorrecte
• 401 - Non autorisé
• 403 - Interdit 
• 304 - Non modifié (Le contenu est mis en cache)
• 500 - Erreur Interne du Serveur

Étapes

1. Chargez les données HAR collectées dans l'analyseur HAR de Google
2. Filtrez les requêtes par codes de statut HTTP.
   Exemple
   Ci-dessous montre un fichier HAR qui a été chargé dans l'analyseur HAR de Google. Cette connexion est une tentative de parcourir Facebook dans laquelle le contenu ne s'est pas chargé correctement. En filtrant par codes de statut HTTP non réussis (non-2xx), nous pouvons voir qu'il y a de nombreuses réponses 403 (interdites) pour le nom de domaine x.x.fbcdn.net (marquées en jaune). L'étape suivante serait d'enquêter plus avant pourquoi ces requêtes sont interdites. 
   
   
   
3. Pour le pays où l'accès à Google est restreint (par exemple. Chine), l'accès à l'analyseur HAR de Google n'est pas possible. Dans ce cas, vous pouvez charger les données HAR dans le même outil de développement dans lequel les données ont été collectées, et vous pouvez ensuite trier par le code de statut HTTP par ordre décroissant.
   

Temps de chargement long de la page web

L'un des problèmes les plus fréquents rencontrés avec les applications web est leur chargement lent de page web ou, dans certains cas, l'impossibilité de charger la page web dans son ensemble. En utilisant les données HAR collectées, nous pouvons plonger dans les détails de chaque requête et identifier celles qui rencontrent des délais significatifs de chargement. Il est possible que certaines requêtes soient bloquées dans un état de chargement perpétuel, contribuant à la lenteur générale de l'application. L'analyse des données HAR nous permet de cerner ces requêtes problématiques et de prendre des mesures appropriées pour les traiter.

Étapes

1. Chargez les données HAR collectées dans l'analyseur HAR de Google

2. Cliquez sur la requête qui tarde à répondre (typiquement la barre la plus longue affichant le temps total)

3. Vérifiez quel est le principal contributeur à la latence (Blocage, Attente ou Réception)
   Champs de Temps Importants
   Temps de blocage - Temps que la requête a passé en attente avant de pouvoir être envoyée par le navigateur.
   Temps d'attente - Temps d'attente pour que le serveur réponde. Si cette valeur est élevée, cela pourrait signifier que le serveur est occupé ou connaît un problème de performance. Ci-dessous, nous pouvons voir qu'il y a un temps d'attente d'environ 5 secondes du serveur :
   Temps de réception - Ceci est le temps utilisé par le serveur pour transférer l'information requise au client. C'est généralement ici que nous détectons qu'il y a un problème de réseau. 
   
   NOTE: Le champ de temps est également disponible lors de l'utilisation de l'outil de développement dans Chrome, fournissant une répartition similaire des phases de temps. Pour une explication détaillée des phases de répartition du temps, veuillez consulter la prévisualisation des délais.
   

4. Pour le pays où l'accès à Google est restreint (par exemple. Chine), l'accès à l'analyseur HAR de Google ne sera pas possible. Dans ce cas, vous pouvez charger les données HAR dans le même outil de développement dans lequel les données ont été collectées.
5. L'analyse serait similaire à l'étape 2 où nous nous concentrons sur l'identification des connexions avec les temps de réponse les plus longs. Pour illustrer, dans la capture d'écran fournie ci-dessous, sous la Section Vue d'ensemble, nous pouvons observer plusieurs connexions qui connaissent des retards significatifs de chargement. En soulignant ces connexions dans la Section Vue d'ensemble, nous pouvons identifier certaines requêtes qui prennent plus de 30 secondes à se charger. Sélectionner l'une de ces connexions révèle que c'est une requête à app.launchdarkly.com.
   
6. Une fois que les requêtes qui connaissent de longs temps de chargement ont été identifiées, une enquête plus approfondie peut être menée pour découvrir la cause sous-jacente du retard. Un facteur potentiel à explorer est la présence de pare-feu locaux qui pourraient bloquer ces requêtes.
7. Dans certaines régions, comme la Chine, il est un problème connu que certaines requêtes en suspens prolongées au sein des applications puissent être attribuées à des traceurs intégrés. Pour plus de détails, consultez Chine | Problèmes de rendu de pages web.