Query Monitor : Analyser et optimiser votre site WordPress

Dans cet article, je vais vous parler du plugin Query Monitor pour WordPress, qui va vous permettre de (re)prendre le contrôle de site WordPress en analysant le comportement et appliquer des optimisation

Présentation de Query Monitor

Query Monitor est un plugin de débogage  développement et d’optimisation de WordPress. Contrairement à ce qu’indique le nom du plugin, Query Monitor ne limite pas aux requêtes SQL, il vous permet de savoir comment l’ensemble de la page a été générée :

• Requête HTTP , règle de réécriture, variable GET …
• Requêtes SQL
• Les scripts JS et feuilles CSS qui ont été utilisés
• Thème et template, vous pourrez voir quels fichiers du thème ont été recherchés et utilisés
• Conditions qui sont validées, très utiles pour le développement…
• …

Query Monitor est le panneau des outils de développement pour WordPress. Il permet le débogage des requêtes de base de données, des erreurs PHP, des hooks et des actions, des blocs d’éditeur de blocs, des scripts et feuilles de style mis en file d’attente, des appels d’API HTTP, etc.

Il comprend des fonctionnalités avancées telles que le débogage des appels Ajax, les appels d’API REST et les vérifications des capacités des utilisateurs. Il inclut la possibilité de réduire une grande partie de sa sortie par plugin ou thème, vous permettant de déterminer rapidement les plugins, thèmes ou fonctions peu performants.

Query Monitor se concentre fortement sur la présentation de ses informations de manière utile, par exemple en affichant des requêtes de base de données agrégées regroupées par les plugins, les thèmes ou les fonctions qui en sont responsables. Il ajoute un menu de la barre d’outils d’administration affichant un aperçu de la page actuelle, avec des informations de débogage complètes affichées dans les panneaux une fois que vous sélectionnez un élément de menu.

Description officielle traduire en français

Installer Query Monitor

L’installation du plugin est « relativement » simple, celui-ci est disponible sur le dépôt office.

Depuis l’administration de WordPress, aller sur Plugins (Extensions) 1 et cliquer sur Add New (Ajouter) 2.

Dans la zone de rechercher, saisir query monitor 1 et attendre le résultat de la recherche

Une fois la recherche effectuée, rechercher le plugin Query Monitor et cliquer sur le bouton Install Now 1.

Query Monitor installé, il faut maintenant l’activer, cliquer sur le bouton Activate 1.

Quand le plugin est activé, WordPress nous redirige vers la page de gestion des plugins installés, on peut voir que Query Monitor est installé et activé 1. Au niveau des filtres, un nouveau est disponible Avancés (Drop-in) 2.

Si vous n’avez pas le filtre avancé, j’explique dans la partie troubleshooting du tutoriel comme résoudre le problème

On peut voir que Query Monitor ajoute un ensemble de fonction personnalisé pour l’accès à la base, ce qui va nous permettre de savoir ce qui se passe.

Si vous êtes observateur, vous devez normalement avoir vu que dans la barre d’administration des statiques s’affichent indiquant notamment le temps de génération de la page par PHP, le temps que les requêtes SQL ont pris et le nombre de requêtes.

Prise en main de Query Monitor

Maintenant que l’extension Query Monitor est installée, je vais vous guider dans sa prise en main afin de savoir ce qui se passe sur la génération de page et voir comment utiliser le plugin pour vous aider dans la personnalisation de votre site et son optimisation.

Comme on a pu le voir à la fin de l’installation, le plugin ajoute des informations de statistiques dans la barre d’admin qui est disponible sur toutes les pages que cela soit dans l’administration ou sur la partie front du site.

Pour accéder au détail des informations de Query Monitor, il y a deux solutions.

La première est de passer le curseur de la souris sur les statistiques pour afficher les différentes options et cliquer sur l’éléments qui l’on souhaite voir.

La seconde solution est de cliquer sur les statistiques 1 pour faire afficher l’encart de « monitoring » 2.

Je vais maintenant vous expliquer chaque élément de monitoring que l’on peut récupérer avec Query Monitor.

Vous trouverez également d’autre exemple d’utilisation de Query Monitor dans différents tutoriels disponibles sur le site.

Overview

Dans cette partie, on a un résumé des statistiques de génération de la page avec le temps de génération au niveau PHP, la mémoire utilisée par l’appel de la page, le temps que les requêtes SQL ont pris et la répartition du type de requêtes et aussi l’utilisation du cache objet au niveau de PHP.

Queries

Dans la section Queries, on peut voir l’ensemble des requêtes SQL exécutées pour générer la page, on peux voir les informations suivantes par requete :

• La requête SQL brute
• La fonction qui a appelé la requête (Caller)
• Le composant qui a déclenché (Component), ça peut être le noyau WordPress, les plugins, thèmes …
• Le nombre de lignes que la requête à retourner.
• Le temps d’exécution de la requête.

Il est possible de filtrer chaque élément et/ou d’aller dans les sous éléments Queries by Caller / Queries by Component qui regroupe par éléments.

Cette partie est très utile pour suivre les requêtes SQL afin de trouver les requêtes « lentes » et ensuite agir dessus en ajoutant un index dans la base de données ou en mettant un système de cache.

Pour les développeurs cela peut également de voir les requêtes de leurs plugins.

Request

Dans cette partie, vous allez retrouver principalement deux informations, des informations (headers) sur la requête HTTP qui a été transmise au serveur avec la réponse, les règles de réécriture utilisées et la Requête principale (Main query) de WordPress qui a été utilisé pour générer la page.

Blocks

Dans la partie Blocks, vous pouvez voir l’ensemble des blocks gutenberg de la page.

Template

La partie Template est très pratique quand vous souhaitez personnaliser votre site, on retrouve les informations sur le thème, le fichier template utilisé pour générer la page (et aussi les fichiers rechercher pouvant être utilisé), les autres fichiers de template appelés par la fonction get_template_part.

Si vous souhaitez approfondir la gestion des templates, voici un lien vers la documentation office WordPress : Template Hierarchy | Theme Developer Handbook | WordPress Developer Resources, une infographie explique comment WordPress recherche le fichier template.

Scripts & Styles

Dans ces parties, on peut voir l’ensemble des scripts Javascript et les différentes feuilles de styles CSS qui sont utilisés sur la page et les hooks (crochets) utilisés pour les inclure.

Nous le verrons dans d’autre tutoriels dédiés à WordPress, mais cette partie de Query Monitor est très utile quand on souhaite personnaliser son site et aussi pour son optimisation.

Hooks & Actions

On retrouve ici, l’ensemble des crochets (hooks) utilisés, quand on personnalise WordPress cette section est pratique à des fins de débogage.

Environnement

On retrouve dans la partie Environnement plusieurs informations sur l’environnement de WordPress, la version de PHP avec une partie de sa configuration, des informations sur la base de données, des informations sur la version de WordPress ainsi qu’une partie de sa configuration et les informations du serveur Web.

Conditionals

Cette partie est principalement utilisée quand on souhaite personnaliser et optimiser WordPress et choisir quand exécuter une fonction.

Je reviendrai sur l’utilisation de cette partie dans le tutoriel sur l’optimisation de WordPress afin de charger ou décharger les scripts et styles.

J’ai passé deux / trois parties qui sont peu utilisé, mais vous pouvez aller voir par vous-même.

Troubleshooting

Lien symbolique vers le fichier db.php

Lors de l’activation de l’extension Query Monitor, un lien symbolique est fait vers le fichier db.php. Dans certain cas, le lien n’est pas fait, il y a une multitude de raisons (que je ne vais pas énumérer).

Si le lien n’est pas fait, dans la partie Queries, un message s’affiche sur un fond rouge comme sur la capture ci-dessous et le plugin avancé (drop-in) n’est pas disponible.

Pour résoudre le problème, vous pouvez vous référer à cette page : db.php Symlink · johnbillion/query-monitor Wiki (github.com).

Si le problème persiste, venez en parler sur le forum.

Conclusion

Query Monitor est un plugin incontournable pour personnaliser et optimiser WordPress grâce à toutes les informations qu’il retourne sur comment la page a été générée.

Personnellement, je l’utilise sur toutes les installations de WordPress afin d’optimiser et personnaliser mes sites.