Comment déboguer les problèmes de performances de WordPress avec Query Monitor

Lorsque vous travaillez sur un site WordPress comportant de nombreux plugins, des problèmes de performances peuvent survenir. Les identifier peut être difficile. Les développeurs résolvent généralement les erreurs WordPress en excluant les parties du code susceptibles de causer des problèmes ou en désactivant les plugins un par un.

Ce processus peut prendre du temps. Cependant, il existe une solution plus rapide : le plugin Query Monitor. Il offre un moyen plus efficace d'identifier les problèmes de performances et de comprendre le fonctionnement de votre site WordPress.

Dans ce guide, je vais tout vous dire sur Query Monitor. Il ne s'agit pas seulement d'identifier son objectif et ses fonctionnalités, mais également de savoir comment l'utiliser efficacement pour déboguer les problèmes de votre site WordPress et améliorer ses performances.

Bref aperçu du plugin Query Monitor

– Source : WordPress.org

Query Monitor se distingue comme un plugin entièrement gratuit conçu pour vous aider à résoudre les problèmes de performances et de développement sur votre site WordPress. Il offre des informations sur les requêtes de base de données, les scripts, le timing, etc.

Une fois installé, Query Monitor ajoute une entrée pratique à la barre de menu supérieure, proposant une liste déroulante qui révèle le nombre de requêtes en cours d'exécution sur la page actuelle.

Cela inclut le temps de chargement, les types de requêtes, les composants et d’autres détails. Ces données permettent aux développeurs de mieux comprendre et corriger les erreurs du site Web.

Il a été développé par John Blackbourn et est disponible à la fois sur le référentiel officiel de plugins WordPress et sur GitHub.

Query Monitor est régulièrement mis à jour et l'équipe de développement fournit une assistance rapide et des correctifs pour tous les bogues signalés.

Que fait le moniteur de requêtes ?

Voici ce que le plugin Query Monitor peut faire pour vous :

• Identifiez les erreurs PHP.
• Surveillez l’utilisation de la mémoire.
• Analysez les requêtes de base de données, y compris celles provenant de plugins spécifiques.
• Suivez les appels de l'API HTTP sur votre site WordPress.
• Explorez les scripts et les styles mis en file d'attente, ainsi que leurs dépendances.
• Comprenez les points d'accroche et les actions qui influencent le comportement de votre site.
• Examinez les fichiers de modèles de thème utilisés.
• Vérifiez les langues et les traductions sur votre site.
• Passez en revue les règles de réécriture affectant les URL de votre site.
• Analysez les blocs présents dans l'éditeur de blocs WordPress.
• Accédez aux informations générales sur l’environnement de votre site.
• Obtenez des informations sur les performances des écrans d’administration WordPress.

L'installation du plugin est assez simple et ne nécessite généralement aucune étape supplémentaire (par rapport au processus d'installation de plugins similaires), ni aucune configuration supplémentaire après l'installation.

Il affiche la liste déroulante dans la barre d'outils d'administration dès la sortie de la boîte.

Vous pouvez accéder aux détails des requêtes effectuées sur la base de données, au CSS, aux hooks actifs et aux appels de l'API HTTP en cliquant sur les entrées dans la liste déroulante.

New Relic peut également vous aider à surveiller les performances de votre site WordPress encore plus facilement, directement depuis le tableau de bord Cloudways. Mais nous y reviendrons un peu plus tard dans le blog.

Configuration système requise pour le moniteur de requêtes

Pour utiliser Query Monitor, votre système doit disposer de WordPress (les versions datant de moins de trois ans sont prises en charge) et de PHP version 7.4 ou supérieure. Pour plus de détails, vous pouvez visiter le site Web Query Monitor.

Pourquoi Query Monitor est-il utile pour les développeurs ?

Le plugin Query Monitor aide les développeurs à identifier les domaines à améliorer, révélant les plugins ou les actifs provoquant des problèmes ou des conflits de ressources.

Il résout efficacement les goulots d'étranglement, permettant d'améliorer le code ou de remplacer des éléments problématiques. Cela profite aux propriétaires de sites Web et aux développeurs qui souhaitent optimiser les performances.

Pour vous aider à mieux comprendre les avantages de l'utilisation de Query Monitor, considérons une tâche de développement simple qui nécessiterait généralement d'exploiter le code : connaître le temps de chargement de la page et le nombre de requêtes actives sur la page.

WordPress propose deux fonctions simples : get_num_queries() et timer_stop() . Ces codes peuvent vous aider à identifier les goulots d'étranglement en matière de performances, nécessitant un certain niveau de connaissances techniques pour être interprétés efficacement.

Query Monitor automatise le processus d'ajout de fonctions à votre code et de vérification des résultats, vous évitant ainsi de le faire manuellement. Il affiche le nombre de requêtes de base de données et fournit des informations sur divers aspects des performances et des fonctionnalités de votre site.

Fonctionnalités du moniteur de requêtes WordPress

Voici un aperçu complet des fonctionnalités remarquables de Query Monitor :

1. Requêtes de base de données

• Notifications pour les requêtes lentes, en double ou erronées.
• Options de filtrage par type de requête, composant responsable (plugin, thème, noyau WordPress) et fonction d'appel.
• Vues agrégées pour chaque type de requête, fournissant une ventilation détaillée.

2. Informations sur le modèle

Affichage du nom de fichier du modèle, de la hiérarchie complète du modèle et des parties du modèle chargées ou déchargées (pour les thèmes de bloc et les thèmes classiques).

3. Erreurs PHP

• Présentation des erreurs PHP avec des détails sur le composant responsable, la pile d'appels et un avertissement visible dans la barre d'outils d'administration.
• Identifiez l’utilisation des fonctionnalités obsolètes ou « Faire les choses mal » dans le code.

4. Blocs et édition complète du site (FSE)

Aperçu des blocs et des propriétés associées dans le contenu de la publication et FSE.

5. Réécrire les règles et les chaînes de requête

Affichage des règles de réécriture correspondantes, des chaînes de requête associées et des variables de requête.

6. Scripts et feuilles de style mis en file d'attente

Informations sur les scripts et les feuilles de style mis en file d'attente, y compris les dépendances et les alertes en cas de dépendances rompues.

7. Paramètres de langue

Détails sur les paramètres de langue et les fichiers de traduction chargés (fichiers MO et fichiers JSON) pour chaque domaine de texte.

8. Requêtes API HTTP

Enregistrement des requêtes API HTTP avec le code de réponse, le composant responsable et le temps nécessaire, ainsi que des alertes en cas d'échec ou de requêtes erronées.

9. Vérifications des capacités des utilisateurs

Rapport sur les contrôles de capacité des utilisateurs, y compris le résultat et les paramètres transmis au contrôle de capacité.

10. Informations sur l'environnement

Informations détaillées sur PHP, la base de données, WordPress et le serveur Web.

11. Fonctions conditionnelles

Valeurs de toutes les fonctions conditionnelles WordPress, telles que is_single(), is_home(), etc.

12. Transitoires et fonctionnalités multisites

Identification des transitoires mis à jour et utilisation de switch_to_blog() et restaurer_current_blog() sur les installations multisites.

13. Redirections

Ajout automatique d'un en-tête HTTP contenant la pile d'appels à chaque fois qu'une redirection se produit.

14. Appels AJAX

Les sites WordPress dynamiques effectuent de nombreux appels Ajax pour envoyer et récupérer des données en temps réel sans charger la page Web complète. Query Monitor affiche également ces requêtes ainsi que d'autres informations de débogage utiles. Ces informations aident le développeur à mettre en évidence les erreurs.

15. API REST

Si vous êtes autorisé à surveiller le moniteur de requêtes, vous pouvez déboguer les informations contenues dans l'en-tête d'une requête API REST WordPress authentifiée.

16. Authentification

Par défaut, seuls l'administrateur d'une installation sur un seul site et le super administrateur d'un WordPress multisite peuvent afficher les journaux dans le moniteur de requêtes. Cependant, vous pouvez configurer un cookie d'authentification pour voir les journaux même lorsque vous êtes connecté en tant qu'utilisateur.

17. Déclaration de confidentialité

WordPress Query Monitor fonctionne avec un engagement envers la confidentialité des utilisateurs. Il ne collecte ni ne transmet aucune donnée à des tiers. Vos informations restent sécurisées et confidentielles lorsque vous utilisez cet outil.

Comment utiliser le moniteur de requêtes WordPress ?

Une fois que vous avez installé et activé Query Monitor à partir du tableau de bord WordPress, vous devez suivre les étapes ci-dessous :

• Allez dans Plugins ;
• Cliquez sur Plugins installés → Moniteur de requêtes ;
• Cliquez sur Paramètres ;
• Cliquez sur le bouton « Définir le cookie d'authentification ».

Voyons maintenant chaque section du plugin Query Monitor en détail.

Aperçu

Le premier onglet vous donne un aperçu de votre site Web. Il vous indique le temps de génération des pages, l'utilisation maximale de la mémoire, le temps de requête de base de données et les requêtes de base de données.

Requêtes de base de données

Une requête de base de données est déclenchée chaque fois qu'un utilisateur demande ou tente de soumettre des informations.

Query Monitor suit cette requête et l'affiche dans les journaux afin que vous, en tant qu'utilisateur, puissiez voir quelles requêtes ont été exécutées avec succès et lesquelles ne l'ont pas été. Il vous permet également de filtrer par type et composant de la requête.

Cache d'objets

Le panneau Présentation de Query Monitor fournit des informations sur votre site, y compris le cache d'objets. Query Monitor affichera un message si vous ne disposez pas d'un plugin de mise en cache d'objets persistants.

Un plugin de cache d'objets persistant améliore les performances en mettant en cache les résultats d'opérations telles que les requêtes de base de données.

Si vous voyez « Cache d'objets externes non utilisé », installez un plugin de mise en cache comme Redis ou Memcached pour une mise en cache persistante. Cela augmente considérablement les performances de votre site. Consultez votre fournisseur d'hébergement pour obtenir de l'aide.

Horaires

Le panneau Timings de Query Monitor enregistre et affiche le temps nécessaire et l'utilisation approximative de la mémoire pendant les actions qm/start et qm/stop pour le nom de fonction spécifié.

Il est important de noter que les heures affichées et l'utilisation de la mémoire dans le panneau Timings sont approximatives et doivent être traitées comme telles.

Journaux

L'onglet Journal de Query Monitor est une fonctionnalité avancée qui vous permet de consigner des messages et des variables, ce qui facilite le dépannage des problèmes techniques ou la surveillance de votre site à la recherche de problèmes potentiels.

Lors de l'installation initiale de Query Monitor, l'onglet sera vide car aucune variable de journalisation n'a été configurée.

Demande

La fonctionnalité Requête affiche la variable de requête pour l'utilisateur actuel et met en évidence la requête personnalisée . Il affiche également les chaînes de requête associées présentes dans une requête.

Écran d'administration

La section de l'écran d'administration montre les activités qui se déroulent sur le panneau d'administration WordPress. Il répertorie les composants accessibles depuis le panneau d'administration et affiche une erreur due à l'indisponibilité d'un fichier PHP.

Scripts

Lorsque vous visitez l'onglet Scripts dans le moniteur de requêtes, il répertorie tous les scripts et styles en file d'attente inclus dans la requête. Il met également en évidence tout script cassé ou ne répondant pas en raison d'une dépendance externe.

modes

L'onglet Styles de Query Monitor fonctionne de la même manière que l'onglet Scripts, mais au lieu de présenter JavaScript, il se concentre sur le CSS mis en file d'attente. Cet onglet est précieux pour déboguer les performances du site.

Le chargement de plusieurs feuilles de style, comme des scripts, contribue à ralentir les temps de chargement du site. L'utilisation de cet onglet peut optimiser votre site Web en réduisant le nombre de feuilles de style, ce qui entraîne des fichiers plus petits et moins de requêtes HTTP.

Crochets et actions

Les hooks et les actions sont essentiels dans tout site WordPress car ils vous permettent de créer une fonctionnalité personnalisée à l'aide des contrôles prédéfinis fournis par WordPress. Cependant, cela peut parfois endommager votre site Web et résoudre l’erreur peut s’avérer fastidieux.

Grâce à Query Monitor, qui dispose d'un outil intégré pour identifier les erreurs causées par les hooks et les actions, vous pouvez filtrer les actions et les hooks par noyau, thème ou plugin. Il vous donne également le nom complet et la référence, facilement trouvables dans le code à des fins de débogage.

Langues

Dans le cas d'un site Web multilingue , l'onglet Langue identifie les fichiers cassés ou indisponibles et affiche les paramètres de langue.

Appels d'API HTTP

Cet onglet affiche toutes les requêtes côté serveur ainsi que le code de réponse, le journal des délais d'attente et les requêtes ayant échoué. Il s'agit d'une fonctionnalité utile car elle vous permet de voir la réponse en temps réel et vous aide à déboguer efficacement le code côté serveur.

Mises à jour transitoires

WordPress peut mettre en cache la réponse de l'API dans sa base de données, car certaines API autorisent un certain nombre de requêtes à un moment donné. Transient Updates affiche ces transitoires et affiche également la taille et le composant.

Vérifications de capacité

Par défaut, ceci est inactif et peut être activé en plaçant le code dans le fichier wp-config.php. Capability Checks effectue des contrôles de capacités pour chaque utilisateur sur la page et affiche les paramètres et les résultats.

Environnement

Il s'agit d'un aperçu complet de l'environnement WordPress contenant les sections PHP, Base de données et WordPress. Chaque section affiche des informations utiles sur l'environnement, telles que la version MySQL, la limite de mémoire PHP, la version WordPress, etc.

Conditions

La fonctionnalité Conditions dans Query Monitor affiche toutes les conditions WordPress pertinentes pour la requête en cours, indiquant si chaque condition est évaluée comme « Vrai » ou « Faux ». Cela donne un aperçu de la logique conditionnelle appliquée lors du chargement de la page.

Résumé

Le plugin WordPress Query Monitor est un plugin puissant pour le débogage, offrant des informations détaillées dans un format facilement compréhensible. Cela s'avère particulièrement utile pour identifier rapidement l'impact des plugins, des thèmes ou des fonctions sur les performances d'un site Web.

Le fait que le plugin Query Monitor intègre de manière transparente un menu dans la barre d'outils d'administration, fournissant un instantané rapide de la page actuelle et fournissant des données complètes dans un panneau lors de la sélection d'un élément de menu, est une fonctionnalité remarquable.

Lequel de ces composants utilisez-vous souvent pour maintenir votre site en bonne santé ? Essayez ce plugin et faites-le nous savoir dans la section commentaires ci-dessous.