Mesurer les performances de WordPress avec les outils de développement chrome

C’est un billet invité. Ces observations et suggestions sont les siennes. Chez savvii, nous aimons le chargement du site, comme vous et les gens derrière WP Rocket. Si votre site Web n’est pas aussi rapide que vous le souhaitez, il est temps de l’améliorer. Le temps de charge actuel doit être mesuré avant l’amélioration. Dans cet article, je vais vous montrer comment trouver facilement des goulets d’étranglement et des erreurs dans les sites WordPress en quelques minutes en utilisant les outils de développement Chrome. Comment ouvrir l’outil de développement d’abord, allez à la page que vous voulez tester dans Chrome. Appuyez sur commande + Option + I (MAC) ou Ctrl + Maj + I (Windows et Linux). Vous verrez le panneau outils de développement s’ouvrir. Cliquez sur l’onglet réseau et c’est là que la magie se produit.
Il est important de reproduire les connexions et les appareils utilisés par l’utilisateur lors de la mise à l’essai d’un site Web. Les outils de développement ont de bonnes options pour cela. Vous pouvez sélectionner une connexion en cliquant sur en ligne, vous pouvez maintenant passer à une connexion mobile 2G, etc. En cliquant sur l’icône du périphérique, vous pouvez basculer entre les périphériques les plus courants, le Bureau étant l’option par défaut. Conseil supplémentaire: cliquez sur l’icône de la caméra pour voir le film. Ceci affiche la vitesse à laquelle votre contenu est visible à l’utilisateur. Rappelez – vous: il est plus important pour les utilisateurs de lire et de parcourir le site le plus rapidement possible que d’interagir avec la page. Pour mettre en cache ou ne pas mettre en cache, activez la boîte désactiver la mise en cache. Cela nous donnera le temps de charger la page sans aucun cache de navigateur, ce qui nous donnera de meilleures informations à améliorer. Toutes les pages ne peuvent pas être mises en cache. Vous pouvez toujours faire un clic droit sur can dans le panneau outils du développeur
Bloquez les cookies du navigateur et le cache du navigateur. Quels indicateurs devrions – nous cibler? Avant le premier test, vous devez expliquer la mesure la plus importante que l’outil de développement vous montrera: la charge. Le temps de chargement indique le temps pendant lequel la page est prête et disponible à l’écran, y compris tous les autres actifs que la page doit charger, tels que les images, les CSS et les scripts.
Vous êtes maintenant sur la page à tester et l’onglet réseau est ouvert dans l’outil de développement. Recharger (la description est visible dans le panneau outils de développement). Chrome génère un diagramme en cascade pour vous. Vous verrez les résultats entrants qui sont chronométrés et affichés avec différentes ressources dans le diagramme en cascade. Maintenant nous savons exactement comment le navigateur a chargé cette page. Trouvez d’abord le coupable et voyons combien de temps il faut \
Rendre un script de bloc avant que le navigateur puisse dire ce que vous devez voir sur la page, il doit analyser tous les scripts chargés sur la page. Par conséquent, si vous placez un fichier javascript dans le titre d’une page, le navigateur doit lire tout le code dans le fichier avant de pouvoir décider quoi afficher sur la page. Ces scripts retardent la visualisation du contenu de votre site à l’écran. Pour réduire la fréquence de rebond, il est important d’afficher quelque chose à l’écran dès que possible. Vous pouvez trouver un script de bloc de rendu en regardant les lignes bleues qui indiquent \
Limitez – les complètement. Google a écrit un excellent article sur le blocage du rendu et le javascript asynchrone.
Code d’état suspect toutes les ressources téléchargées à partir du serveur ont un code d’état. Ces lois de l’État en parlent beaucoup. Un code d’état de 200 indique « OK ». Vous voulez un code d’état de 200 pour tous les actifs. Les codes d’état suspects peuvent être trouvés en triant les ressources de l’adaptateur réseau par colonne d’état. Sautez 200 et concentrez – vous sur les autres. Les principaux codes d’état que vous souhaitez corriger sont: 4xx – erreur client, 404 (Fichier introuvable) 3xx – redirection, 301 (permanente) redirection et 302 (temporaire) 5xx (erreur serveur). Vérifiez httpstatus pour une liste complète.
Il n’est pas surprenant que les grandes demandes ne soient pas bonnes. Ils sont lents et prennent beaucoup de bande passante (en particulier pour les utilisateurs de téléphones cellulaires dont la bande passante est limitée). Triez sur la colonne Taille pour trouver la plus grande ressource. La plupart du temps, ces grandes ressources seront des images ou des fichiers vidéo. Assurez – vous que la taille de l’image correspond à la taille de l’image que vous utilisez sur votre site et sauvegardez l’image avec la quantité compressée afin qu’elle so it toujours visible. Des services comme imaginy compresseront davantage ces images tout en conservant un bon aspect.
Demandes lentes les grandes demandes sont généralement lentes, mais les demandes lentes ne signifient pas qu’elles sont toujours grandes. Par conséquent, vous pouvez également trier dans la colonne temps. Les requêtes lentes sont généralement des scripts externes pour la surveillance ou des fonctions spécifiques. Dans la colonne démarrer, vous pouvez voir quelle ressource demande le téléchargement de cette ressource. Si vous n’êtes pas sûr du contenu de la ressource, vous pouvez également utiliser l’onglet aperçu pour vérifier le contenu de la ressource. Les scripts externes sont difficiles à optimiser.