Lorsque vous travaillez sur un projet de développement WordPress avec des dizaines ou plus d’extensions installées, il est courant de rencontrer des problèmes de performances. Cependant, il n’est pas toujours facile de trouver ce qui cause le problème de performance.
Vous avez éliminé les suspects habituels : l’hébergement est adéquat, il n’y a pas d’erreurs JavaScript ou PHP apparentes, et rien d’autre ne cloche. Vous soupçonnez qu’une ou plusieurs des extensions que vous avez installées sont à blâmer, mais comment savoir quelle extensions est à l’origine du problème ?
La méthode habituelle pour identifier une extension gênante consiste à désactiver les extensions jusqu’à ce que vous trouviez le goulot d’étranglement des performances.
Cependant, il existe un moyen plus rapide et plus efficace. C’est ce scénario que l’extension gratuite Query Monitor a été conçue pour résoudre. Elle peut vous aider à déboguer les problèmes de performance, à développer des sites plus efficacement et à mieux gérer votre site WordPress.
Dans ce guide, vous apprendrez tout ce que vous devez savoir sur Query Monitor – ce qu’il est, ce qu’il fait, et comment l’utiliser.
Qu’est-ce que Query Monitor ?
Query Monitor est une extension 100 % gratuite qui vous aide à déboguer les performances et le développement de votre site WordPress.
Vous pouvez l’imaginer comme l’outil des développeurs de Chrome, mais spécifiquement pour WordPress. Vous pouvez creuser dans les requêtes de base de données, les scripts, le timing, et plus encore. Et vous pouvez également afficher des tonnes d’informations utiles, telles que des informations générales sur l’environnement et des détails sur des pages spécifiques.
Query Monitor présente ensuite toutes ces informations d’une manière facilement accessible que vous pouvez consulter de n’importe où sur votre site.
Query Monitor est maintenue par John Blackbourn, un ingénieur web principal chez Human Made. Il possède également plusieurs autres extensions utiles, notamment WP Crontrol (excellent pour le débogage de wp-cron) et User Switching (excellent pour le débogage des expériences de différents rôles d’utilisateur).
John est très réactif et travaille constamment à la maintenance et à l’amélioration de Query Monitor. Automattic et d’autres sponsors soutiennent son travail.
Si vous trouvez de la valeur dans l’extension au moment où vous terminez cet article, vous pouvez soutenir Query Monitor en parrainant le projet sur GitHub pour aussi peu que 1 $ par mois.
Que fait Query Monitor ?
Query Monitor peut vous aider à déboguer plus que les requêtes à la base de données de WordPress, malgré son nom.
Ne vous méprenez pas – le débogage des requêtes de base de données est quelque chose que Query Monitor fait bien et l’un des avantages les plus importants de l’extension.
Cependant, elle s’attaque également à de nombreux autres domaines, notamment le débogage axé sur les performances et le débogage général du développement.
Voici un échantillon des nombreux détails que Query Monitor peut vous aider à analyser et déboguer :
- Requêtes de base de données, notamment en vous montrant les requêtes de certaines extensions spécifiques
- Erreurs PHP
- Utilisation de la mémoire
- Appels d’API HTTP
- Scripts et styles en file d’attente, y compris les dépendances
- Hooks et actions
- Fichiers de modèle de thème
- Langues et traductions
- Règles de réécriture
- Blocs de l’éditeur de blocs
- Informations générales sur l’environnement
- Écrans d’administration de WordPress
Une limitation notable de Query Monitor est qu’il est principalement destiné au débogage « sur le moment ». Lorsqu’il vous montre les requêtes de base de données, le timing, etc., il le fait uniquement pour le chargement de la page en cours.
En général, il ne suit pas ou n’affiche pas les informations/tendances historiques, bien que John indique que cette fonctionnalité est prévue pour les futures versions.
Comment utiliser Query Monitor pour déboguer WordPress et améliorer ses performances
Maintenant que vous savez ce qu’est Query Monitor et ce que cette extension fait, voyons comment vous pouvez utiliser Query Monitor pour déboguer les performances de votre site et certains des autres outils de débogage de développement général.
Nous vous donnerons une introduction générale à l’interface de Query Monitor et à son fonctionnement. Ensuite, nous approfondirons chaque zone de l’interface.
Il existe plus de 12 zones d’interface de haut niveau différentes, il y a donc beaucoup à couvrir. Cependant, le nombre exact de menus d’interface que vous verrez dépendra de la page que vous analysez.
Allons-y.
Une introduction à l’interface de Query Monitor
Query Monitor ne dispose pas de sa propre zone d’interface séparée. Au lieu de cela, elle affiche de nouvelles informations à l’intérieur de la barre d’administration de WordPress à la fois sur l’interface publique et l’administration.
Query Monitor affiche d’abord un résumé rapide avec quatre éléments d’information :
- Temps de génération de la page – 0.05 s dans la capture d’écran.
- Utilisation maximale de la mémoire – 7,7 Mo dans la capture d’écran.
- Temps total pris par les requêtes SQL (en secondes) – 0.00 s dans la capture d’écran.
- Nombre total de requêtes SQL – 54 dans la capture d’écran.
Si vous cliquez sur ce résumé, vous ouvrirez l’interface complète de Query Monitor, qui s’affiche comme une fenêtre superposée sur la page que vous êtes en train de consulter.
Toutes les fonctions et informations que Query Monitor offre sont contenues dans cette fenêtre de superposition.
Si vous préférez changer la disposition de la fenêtre de superposition, vous pouvez cliquer sur le bouton dans le coin supérieur droit pour la transformer en une interface à colonne latérale. Vous pouvez également utiliser la fonction de glisser-déposer pour modifier la taille de la fenêtre.
L’interface Query Monitor et ses informations ne sont visibles que pour les administrateurs (ou les super administrateurs sur les multisites WordPress).
Il existe également une option permettant de définir un cookie d’authentification pour continuer à afficher les résultats de Query Monitor, même si vous n’êtes pas connecté (ou si vous êtes connecté en tant qu’utilisateur avec un rôle inférieur). Nous vous expliquerons comment procéder un peu plus loin dans ce guide.
Passons en revue chaque onglet de l’interface et expliquons comment vous pouvez l’utiliser pour déboguer votre site WordPress.
Aperçu
L’onglet Aperçu affiche plus de détails du résumé de la barre d’administration et quelques informations générales sur l’environnement.
Par exemple, au lieu de se contenter de voir le pic d’utilisation de la mémoire, l’onglet Vue d’ensemble va un peu plus loin pour voir comment ce pic d’utilisation se compare aux limites de mémoire de votre serveur et de WordPress.
Il n’y a rien de trop détaillé ici – c’est juste un aperçu (d’où le nom).
Requêtes
L’onglet Requêtes vous permet de creuser dans chaque requête de base de données pour la page que vous regardez. C’est l’une des zones les plus riches en informations de Query Monitor, ce qui est logique si l’on considère le nom de l’extension.
Pour chaque requête, vous pouvez voir les informations suivantes :
- La requête complète
- Appelant de la requête
- Composant de la requête (par exemple, si elle provient du cœur, d’un thème ou d’une extension)
- Nombre de lignes
- Le temps que la requête a pris
Parmi les débogages généraux, vous pouvez l’utiliser pour trouver les requêtes à chargement lent qui bloquent les performances de votre site.
Query Monitor répartira les requêtes en fonction de votre thème et des extensions individuelles afin que vous puissiez voir l’impact de chaque extension.
Supposons qu’une extension spécifique soit à l’origine de nombreuses requêtes à chargement lent. Dans ce cas, vous devrez trouver un moyen d’y remédier, soit en optimisant les paramètres de l’extension ou la configuration de votre serveur (par exemple, en utilisant la mise en cache de la base de données ou des objets), soit en passant à une autre extension plus efficace.
Dans l’onglet principal, vous pouvez voir toutes les informations de haut niveau pour chaque requête.
Si vous souhaitez en savoir plus sur une requête spécifique, cliquez sur l’icône plus pour développer des informations plus détaillées.
Si vous voyez des chiffres anormalement bas ici, cela peut être dû à un certain type de mise en cache – par exemple, la mise en cache des pages ou une extension qui met en cache ses requêtes de base de données. Pour cette raison, il peut être utile de désactiver la mise en cache pendant que vous déboguez les choses.
Il existe également quelques sous-menus dans cette zone qui vous aident à trouver des types de requêtes spécifiques :
- Requêtes dupliquées
- Requêtes par appelant
- Requêtes par composant
Requêtes dupliquées
La zone Requêtes dupliquées met en évidence les requêtes dupliquées et répertorie les « fauteuses de troubles potentiels » pour vous aider à les déboguer et à rationaliser les choses.
Requêtes par appelant
La zone Requêtes par appelant vous permet de visualiser tous les appelants sur cette page. Si vous cliquez sur l’un d’entre eux, vous pouvez voir une liste de requêtes pour cet appelant.
Requêtes par composant
La zone Requêtes par composant affiche une liste de tous les composants qui ont effectué des requêtes, y compris le cœur de WordPress, votre thème et les extensions individuelles.
Vous pouvez cliquer sur un composant spécifique pour afficher toutes ses requêtes.
Encore une fois, c’est l’un des rapports les plus précieux car il vous permet de trouver les extensions spécifiques qui dégradent les performances de votre site avec des requêtes lentes.
Lisez ceci si vous ne voyez pas les requêtes par composant
Si vous ne voyez pas les informations sur les composants dans Query Monitor, c’est probablement parce que Query Monitor ne peut pas établir de lien symbolique avec son fichier db.php. Vous verrez un message d’erreur comme celui ci-dessous dans ces situations.
Il y a deux causes probables ici :
- Les autorisations de fichier du répertoire wp-content de votre site.
- Le fichier wp-content/db.php existe déjà (peut-être à cause d’une extension de mise en cache comme W3 Total Cache).
Vous pouvez voir quelques corrections et solutions de contournement dans cet article GitHub. Si vous vous sentez à l’aise pour vous connecter à votre serveur via SSH, vous pouvez résoudre le problème avec une commande WP-CLI (bien qu’il existe d’autres méthodes).
La plupart des fonctionnalités de Query Monitor fonctionneront toujours avec ce problème, mais vous ne pourrez pas voir d’informations sur les composants tant que vous n’aurez pas résolu le problème.
Journaux
L’onglet Journaux est un onglet avancé qui vous permet de configurer vos messages et variables à enregistrer. Cela peut vous aider à déboguer des problèmes techniques ou à garder un œil sur votre site pour détecter les problèmes.
Lorsque vous installez Query Monitor pour la première fois, cet onglet n’affiche rien car vous n’avez pas configuré de variables de journalisation.
Cependant, si vous souhaitez configurer des variables de journalisation personnalisées, vous pouvez le faire en utilisant une syntaxe simple comme celle-ci :
do_action( 'qm/debug', 'This happened!' );
Query Monitor prend en charge les actions suivantes, qui vous permettent de consigner les problèmes à différents niveaux :
- qm/emergency
- qm/alert
- qm/critical
- qM/error
- qM/warning
- qm/notice
- qm/info
- qm/debug
Si vous souhaitez en savoir plus et voir quelques exemples, consultez la page Variables de journalisation de Query Monitor.
Requête
L’onglet principal Requête affiche les variables de requête pour la requête actuelle.
Il existe également des sous-menus pour voir les en-têtes de la requête et les en-têtes de la réponse, qui sont probablement plus utiles pour le débogage des performances.
Par exemple, vous voulez peut-être déboguer le comportement du cache ou du CDN. Dans le sous-menu En-têtes de réponse, vous pouvez voir le comportement de Cache-Control, ce qui vous permet de déboguer la mise en cache du navigateur sur votre site.
Blocs
L’onglet Blocs est uniquement visible si vous regardez une page construite avec l’éditeur de blocs natif de WordPress (alias Gutenberg).
Dans ces situations, cette page énumérera chaque bloc individuel sur la page, ainsi que des informations détaillées sur ce bloc.
Une chose intelligente ici est qu’il vous dira si le bloc provient du cœur de WordPress ou d’une extension différente.
Modèle
L’onglet Modèle ne sera visible que si vous utilisez Query Monitor sur l’interface publique de votre site. Il vous aide à visualiser et à déboguer la hiérarchie des modèles pour la page que vous regardez.
Vous pouvez voir le fichier de modèle spécifique à cette page et les différentes parties de modèle et classes de corps.
Cela n’a rien à voir avec les performances, mais cela peut être bénéfique pour le développement de thèmes personnalisés.
Écran d’administration
L’onglet Écran d’administration ne sera visible que si vous utilisez Query Monitor dans le tableau de bord d’administration de WordPress. Vous ne l’utiliserez probablement pas si souvent, mais il peut être utile si vous devez déboguer un comportement dans un écran d’administration personnalisé.
Si vous regardez un écran d’administration avec une liste de tables, il vous montrera les filtres et les actions de la colonne personnalisée. Il vous montrera également l’état de get_current_screen.
Scripts
Après l’onglet Requêtes, l’onglet Scripts est probablement la zone de débogage des performances la plus utile dans Query Monitor.
Cet onglet affiche tous les scripts JavaScript mis en file d’attente sur la page ainsi que leurs dépendances. Vous disposez également de filtres pour trouver rapidement les scripts provenant d’un hôte spécifique ou ayant des dépendances explicites.
En règle générale, un plus grand nombre de scripts équivaut à un site web plus lent, car ils augmentent la taille de la page et ajoutent des requêtes HTTP.
Vous pouvez utiliser cette zone pour découvrir l’impact de différentes extensions et trouver des moyens de réduire le nombre de scripts en file d’attente qui se chargent sur chaque page.
Query Monitor ne vous montre pas le timing du chargement de tous ces scripts, cependant. Si vous voulez voir cela, vous devrez utiliser un outil de test de vitesse et creuser dans l’analyse de la cascade – Pingdom et GTmetrix sont deux excellentes options.
Si vous avez besoin d’aide pour utiliser ces détails afin d’optimiser les scripts de votre site, nous avons beaucoup de guides précieux pour optimiser le JavaScript sur WordPress :
- Comment différer l’analyse du JavaScript
- Comment éliminer le JavaScript qui bloque le rendu
- Comment réduire le nombre de requêtes HTTP
Styles
L’onglet Styles est comme l’onglet Scripts, mais il affiche les CSS en file d’attente au lieu de JavaScript. C’est un autre onglet pratique pour déboguer les performances de votre site.
Tout comme pour les scripts, le chargement d’un plus grand nombre de feuilles de style sur une page entraîne, en règle générale, un chargement plus lent du site.
Dans cette zone, vous pouvez découvrir l’impact de différentes extensions sur votre site. Vous pouvez utiliser ces informations pour réduire le nombre de feuilles de style à charger sur la page, ce qui réduira la taille du fichier et les requêtes HTTP nécessaires au chargement de la page.
Comme pour les scripts, Query Monitor ne vous donnera pas une analyse approfondie de la façon dont votre CSS se charge et si elle bloque le chargement de parties critiques de votre site. Pour cela, vous devrez à nouveau utiliser l’analyse en cascade.
Nous avons quelques articles utiles pour vous aider à optimiser le CSS de votre site :
Hooks et actions
L’onglet Crochets (ou hooks) et actions répertorie tous les hooks et actions de la page actuelle, ainsi que leur priorité.
Pour les actions, vous pouvez développer une action individuelle pour voir le fichier réel et la ligne de code associée à cette action. Vous pouvez également filtrer les actions par composant pour trouver les actions du cœur WordPress, des extensions et des thèmes.
Cette zone n’est pas vraiment axée sur les performances, mais elle est pratique pour le développement personnalisé.
Langues
L’onglet Langues vous montre les domaines de langue et de texte sur votre site et le fichier de langue utilisé pour chaque extension.
Ce n’est pas très utile si vous avez un site monolingue en anglais. Cependant, cet onglet peut être utile si vous avez un site multilingue et/ou votre site est dans une langue qui pourrait ne pas avoir une couverture complète du pack de traduction.
Appels d’API HTTP
L’onglet Appels d’API HTTP vous montre toutes les requêtes HTTP côté serveur qui ont eu lieu pendant le chargement de la page, y compris les détails de la requête, le moment et le code d’état HTTP.
Si une extension ou un thème effectue des appels d’API HTTP lents, il s’agit souvent d’une cause « cachée » de mauvaises performances. Vous devrez donc trouver un moyen de résoudre ce problème, soit en modifiant les réglages de l’extension, soit en optant pour une autre extension.
Pour de nombreuses pages, vous devriez voir « Aucun appel HTTP API », ce qui est bon signe car cela signifie que rien n’entrave les performances de votre site.
Vérifications des capacités
La zone Vérifications des capacités vous permet de voir quelles capacités d’utilisateur peuvent accéder au contenu actuel que vous regardez. Cela peut être pratique pour voir si différents utilisateurs peuvent accéder à certains contenus frontends ou backend.
Cette fonctionnalité est cependant désactivée par défaut pour des raisons de performance. Si vous souhaitez l’activer, vous devez modifier le fichier wp-config.php de votre site et ajouter l’extrait de code suivant :
define( 'QM_ENABLE_CAPS_PANEL', true );
Environnement
L’onglet Environnement fournit un résumé détaillé des environnements de votre site, notamment :
- PHP
- Base de données
- WordPress
- Serveur
Vous pouvez voir les détails importants, les limites, les numéros de version, les réglages de configuration, etc.
Cela peut également éclairer des décisions importantes concernant les performances.
Par exemple, si vous voyez que la limite de mémoire de votre site est limitée, vous pourriez vouloir augmenter la limite de mémoire pour éviter les erreurs liées à la limite de mémoire.
De même, si vous constatez que vous utilisez une ancienne version de PHP, vous pourriez vouloir passer à la dernière version pour améliorer les performances.
Conditionnels
L’onglet Conditionnels vous aide à voir quelles déclarations de condition s’appliquent à la page que vous regardez, ce qui peut être utile dans le développement personnalisé.
Vous pouvez voir les conditionnels « True » et les conditionnels « False ».
Comment afficher les informations de Query Monitor en tant qu’utilisateur non-administrateur
Dans certaines situations, vous pouvez vouloir afficher les informations de Query Monitor en tant que rôle d’utilisateur différent ou en tant qu’utilisateur déconnecté. Cela peut être très utile pour les boutiques WooCommerce, les sites d’adhésion et les sites similaires.
Pour cela, vous devez définir un cookie d’authentification dans votre navigateur. Une fois que vous avez défini ce cookie, vous pourrez afficher les informations de Query Monitor chaque fois que vous visitez le site, même si vous êtes déconnecté.
Pour définir le cookie d’authentification, cliquez sur l’icône d’engrenage dans le coin supérieur droit du panneau de Query Monitor. Ensuite, cliquez sur le bouton Définir le cookie d’authentification.
Si vous souhaitez un jour désactiver cette fonctionnalité, vous pouvez revenir à cette interface et cliquer sur le bouton Effacer le cookie d’authentification pour supprimer le cookie.
Si vous combinez ceci avec User Switching, une autre extension utile du même développeur, vous pouvez rapidement passer d’un rôle d’utilisateur à un autre sur votre site.
Comment étendre Query Monitor avec des modules
Jusqu’à présent, nous nous sommes concentrés exclusivement sur les fonctions et les options d’analyse de l’extension principale Query Monitor. Cependant, plusieurs modules tiers peuvent étendre davantage Query Monitor.
Ils peuvent ajouter la prise en charge de technologies de performance spécifiques, telles que Memcached et Redis, ainsi que d’extensions WordPress spécifiques, telles que WooCommerce ou GiveWP.
Query Monitor prend également en charge tous les modules de l’extension Debug Bar, qui ajoute des intégrations pour ElasticPress, Elementor, Cache Lookup, et bien d’autres.
Vous pouvez voir une liste complète des modules de Query Monitor sur cette page GitHub.
Autres outils utiles pour déboguer et améliorer les performances de WordPress
Bien que Query Monitor soit un outil gratuit très pratique pour déboguer les performances de WordPress, il ne couvre pas tout. Il existe d’autres outils utiles que vous devriez considérer pour analyser différents domaines de performance de WordPress.
Kinsta APM (Application Performance Monitoring)
Si vous hébergez votre site chez Kinsta, vous obtenez un accès gratuit à l’outil Kinsta Application Performance Monitoring (APM).
Un outil APM comme Kinsta APM va encore plus loin que Query Monitor avec les types d’analyses suivants :
- Processus PHP lents
- Requêtes de base de données lentes
- Appels d’API longs
- Longues requêtes d’URL externes
- Traces de la pile complète dans les zones problématiques
Vous pouvez également voir comment ces informations évoluent dans le temps, ce que Query Monitor ne peut pas faire. De plus, vous pouvez analyser l’ensemble de votre site plutôt que de procéder page par page.
Pour un tutoriel général, vous pouvez suivre notre guide Kinsta APM.
Nous avons également des guides spécifiques sur l’utilisation d’APM pour optimiser les sites WordPress gourmands en ressources :
- Utilisation d’APM pour optimiser une boutique WooCommerce
- Utilisation d’APM pour optimiser un site d’adhésion
New Relic
New Relic est un autre outil utile de surveillance des performances similaire à Kinsta APM.
Si vous n’êtes pas hébergé chez Kinsta, il peut être un excellent moyen d’accéder à des types d’analyses similaires. Même si vous êtes hébergé chez Kinsta, vous pouvez toujours activer le suivi de New Relic si nécessaire, bien que vous deviez avoir votre propre licence.
Pour apprendre à utiliser New Relic, vous pouvez suivre notre tutoriel sur les performances de New Relic.
Un outil de test de vitesse de qualité
Nous l’avons mentionné précédemment en parlant de l’analyse de la cascade, mais un bon outil de test de vitesse peut être inestimable pour déboguer ce que votre site charge et comment il se charge.
Pour vous aider à utiliser l’outil de votre choix, nous avons un guide dédié sur la bonne façon d’exécuter un test de vitesse. Nous avons également des articles consacrés à certains des outils les plus populaires :
Mode de débogage de WordPress
WordPress comprend son propre mode de débogage intégré pour voir toutes les erreurs, avis et avertissements PHP. Vous avez également la possibilité d’enregistrer ces problèmes dans un fichier journal.
Pour plus de détails, consultez notre guide complet du mode de débogage de WordPress.
Outils de développement du navigateur web
Chrome inclut des outils de développement très détaillés qui peuvent vous aider à déboguer les performances de votre site, comme le font certains autres navigateurs.
Par exemple, l’onglet Réseau vous permet d’afficher les temps de chaque requête HTTP sur votre site, ainsi qu’une analyse en cascade. L’onglet Performance vous donne une analyse très détaillée des performances.
Vous pouvez également exécuter des audits Lighthouse à partir de l’onglet Lighthouse . Il s’agit du même algorithme de test de performance que celui utilisé par PageSpeed Insights.
Si vous souhaitez apprendre à utiliser Chrome Developer Tools pour déboguer les performances, ce hub du centre d’aide est un excellent point de départ.
Résumé
Si vous souhaitez déboguer les problèmes de performance et de développement sur votre site WordPress, l’extension Query Monitor est l’un des meilleurs outils gratuits.
Pour analyser les performances de votre site, vous voudrez probablement vous concentrer le plus sur ces zones de l’interface :
- Vue d’ensemble
- Requêtes
- Journaux (pour les utilisateurs plus avancés)
- Scripts
- Styles
- Appels API HTTP
- Environnement
Cependant, les autres zones peuvent également être pratiques si vous développez des sites WordPress.
Essayez l’extension Query Monitor aujourd’hui et voyez comment elle vous aide. Si vous ne voulez pas l’installer sur votre site en production, vous pouvez toujours créer un site de staging et l’y installer pour voir ce qui se passe sous le capot de votre site.
Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.
Laisser un commentaire