Comment mesurer les performances d’un site Web à l’aide des Outils de développement de Google Chrome

Cet article décrit comment utiliser les outils de développement de Google Chrome pour mesurer et surveiller les performances d’un site Web.

Utilisation des Outils de développement Chrome

Le navigateur Web Google Chrome inclut des outils de développement, une fonctionnalité qui aide les développeurs Web à déboguer les problèmes avec HTML, CSS et JavaScript:

• Pour accéder aux Outils de développement sous Microsoft Windows ou Linux, appuyez sur Ctrl +Maj + I.
• Pour accéder aux Outils de développement sous Apple Mac OS X, appuyez sur Option + Commande + I.

L’image suivante montre Les Outils de développement ouverts sur la page d’accueil de Google:

Dans l’onglet Réseau du volet Outils de développement, Chrome répertorie toutes les connexions pour la page en cours. Pour tester une page spécifique, ouvrez Outils de développement et accédez à la page que vous souhaitez tester. Sinon, si vous souhaitez tester la page en cours, actualisez simplement la page.

Chrome affiche des informations pour chaque ressource de page et sa demande :

Nom : Le nom ou l’URL de la ressource demandée.

Méthode : La méthode HTTP (GET ou POST).

Status : Le code d’état HTTP renvoyé par le serveur.

Type : Le type MIME de la ressource.

Initiateur : Le référent envoyé au serveur ; il s’agit généralement de l’URL de la page que vous consultez.

Taille: La taille de la ressource telle que reçue par le navigateur (si la page a été compressée par le serveur, cette valeur est plus petite que la taille réelle du fichier).

Temps : Le temps total de récupération de la ressource, y compris le temps de recherche DNS et de téléchargement.

Chronologie : La chronologie est une vue en accéléré ” en cascade ” de chaque requête. Si vous passez le pointeur de votre souris sur une barre de la cascade, une info-bulle apparaît avec une ventilation détaillée du temps de téléchargement:

• Blocage : Cela inclut le temps nécessaire à la recherche DNS, à la prise de contact SSL et à la connexion au serveur.
• Envoi: Cela inclut le temps nécessaire pour envoyer la demande avec toutes les données de la demande au serveur et pour recevoir la confirmation du serveur qu’il a reçu la demande.
• Attente : Cela inclut le temps pour le serveur de rendre le contenu à servir et de commencer à l’envoyer au navigateur.
• Réception : Cela inclut le temps nécessaire pour télécharger le contenu.

La combinaison des temps d’attente et de réception est le facteur le plus important pour déterminer la vitesse du site. Cependant, la vitesse de connexion Internet peut également affecter les performances, vous devez donc toujours comparer les temps depuis le même emplacement lorsque vous établissez des repères de performance du site.

Au bas de l’onglet Réseau se trouve un résumé du processus de chargement de la page. Ce résumé comprend le nombre total de demandes, la taille totale de la page entière, y compris ses ressources, et une ventilation du temps passé à rendre la page dans le navigateur.

La première valeur de temps correspond au temps total passé à charger tout le contenu de la page. Cette valeur inclut le contenu chargé par JavaScript après le rendu de la page ; par conséquent, ce nombre peut changer si des requêtes se produisent en arrière-plan.

Les deux valeurs de temps Entre parenthèses sont des événements importants pour l’optimisation du site:

• charge: Cet événement est le moment de charger la page, y compris tous les fichiers JavaScript, CSS et image qui se trouvent dans le document HTML d’origine. Cet événement prend généralement plus de temps que l’événement DOMContentLoaded.
• DOMContentLoaded : Cet événement représente le temps perçu par un utilisateur pour charger la page. Il est temps de rendre la page comme décrit dans le document d’origine avant que JavaScript ne demande des ressources supplémentaires. Ce temps est stocké lorsque le navigateur déclenche l’événement DOMContentLoaded en JavaScript. (Google Analytics est un exemple de ressource demandée en dehors du DOM.)