La m\u00e9thode habituelle pour identifier une extension g\u00eanante consiste \u00e0 d\u00e9sactiver les extensions jusqu’\u00e0 ce que vous trouviez le goulot d’\u00e9tranglement des performances.<\/p>\n
Cependant, il existe un moyen plus rapide et plus efficace. C’est ce sc\u00e9nario que l’extension gratuite Query Monitor a \u00e9t\u00e9 con\u00e7ue pour r\u00e9soudre. Elle peut vous aider \u00e0 d\u00e9boguer les probl\u00e8mes de performance, \u00e0 d\u00e9velopper des sites plus efficacement et \u00e0 mieux g\u00e9rer votre site WordPress.<\/p>\n
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.<\/p>\n
Qu’est-ce que Query Monitor ?<\/h2>\n![\"L'extension](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-plugin-card-1024x450.jpg\")
L’extension Query Monitor.<\/figcaption><\/figure>\nQuery Monitor<\/a> est une extension 100 % gratuite qui vous aide \u00e0 d\u00e9boguer les performances et le d\u00e9veloppement de votre site WordPress.<\/p>\nVous pouvez l’imaginer comme l’outil des d\u00e9veloppeurs de Chrome, mais sp\u00e9cifiquement pour WordPress. Vous pouvez creuser dans les requ\u00eates de base de donn\u00e9es, les scripts, le timing, et plus encore. Et vous pouvez \u00e9galement afficher des tonnes d’informations utiles, telles que des informations g\u00e9n\u00e9rales sur l’environnement et des d\u00e9tails sur des pages sp\u00e9cifiques.<\/p>\n
Query Monitor pr\u00e9sente ensuite toutes ces informations d’une mani\u00e8re facilement accessible que vous pouvez consulter de n’importe o\u00f9 sur votre site.<\/p>\n
Query Monitor est maintenue par John Blackbourn, un ing\u00e9nieur web principal chez Human Made<\/a>. Il poss\u00e8de \u00e9galement plusieurs autres extensions utiles, notamment WP Crontrol<\/a> (excellent pour le d\u00e9bogage de wp-cron<\/a>) et User Switching<\/a> (excellent pour le d\u00e9bogage des exp\u00e9riences de diff\u00e9rents r\u00f4les d’utilisateur<\/a>).<\/p>\nJohn est tr\u00e8s r\u00e9actif et travaille constamment \u00e0 la maintenance et \u00e0 l’am\u00e9lioration de Query Monitor. Automattic et d’autres sponsors soutiennent son travail.<\/p>\n
Si vous trouvez de la valeur dans l’extension au moment o\u00f9 vous terminez cet article, vous pouvez soutenir Query Monitor en parrainant le projet sur GitHub<\/a> pour aussi peu que 1 $ par mois.<\/p>\n\nQue fait Query Monitor ?<\/h2>\n
Query Monitor peut vous aider \u00e0 d\u00e9boguer plus que les requ\u00eates \u00e0 la base de donn\u00e9es de WordPress<\/a>, malgr\u00e9 son nom.<\/p>\nNe vous m\u00e9prenez pas – le d\u00e9bogage des requ\u00eates de base de donn\u00e9es<\/a> est quelque chose que Query Monitor fait bien et l’un des avantages les plus importants de l’extension.<\/p>\nCependant, elle s’attaque \u00e9galement \u00e0 de nombreux autres domaines, notamment le d\u00e9bogage ax\u00e9 sur les performances et le d\u00e9bogage g\u00e9n\u00e9ral du d\u00e9veloppement.<\/p>\n
Voici un \u00e9chantillon des nombreux d\u00e9tails que Query Monitor peut vous aider \u00e0 analyser et d\u00e9boguer :<\/p>\n
\n- Requ\u00eates de base de donn\u00e9es, notamment en vous montrant les requ\u00eates de certaines extensions sp\u00e9cifiques<\/li>\n
- Erreurs PHP<\/li>\n
- Utilisation de la m\u00e9moire<\/li>\n
- Appels d’API HTTP<\/li>\n
- Scripts et styles en file d’attente, y compris les d\u00e9pendances<\/li>\n
- Hooks et actions<\/li>\n
- Fichiers de mod\u00e8le de th\u00e8me<\/li>\n
- Langues et traductions<\/li>\n
- R\u00e8gles de r\u00e9\u00e9criture<\/li>\n
- Blocs de l’\u00e9diteur de blocs<\/li>\n
- Informations g\u00e9n\u00e9rales sur l’environnement<\/li>\n
- \u00c9crans d’administration de WordPress<\/li>\n<\/ul>\n
Une limitation notable de Query Monitor est qu’il est principalement destin\u00e9 au d\u00e9bogage \u00ab sur le moment \u00bb. Lorsqu’il vous montre les requ\u00eates de base de donn\u00e9es, le timing, etc., il le fait uniquement pour le chargement de la page en cours.<\/p>\n
En g\u00e9n\u00e9ral, il ne suit pas ou n’affiche pas les informations\/tendances historiques, bien que John indique que cette fonctionnalit\u00e9 est pr\u00e9vue pour les futures versions.<\/p>\n
Comment utiliser Query Monitor pour d\u00e9boguer WordPress et am\u00e9liorer ses performances<\/h2>\n
Maintenant que vous savez ce qu’est Query Monitor et ce que cette extension fait, voyons comment vous pouvez utiliser Query Monitor pour d\u00e9boguer les performances de votre site et certains des autres outils de d\u00e9bogage de d\u00e9veloppement g\u00e9n\u00e9ral.<\/p>\n
Nous vous donnerons une introduction g\u00e9n\u00e9rale \u00e0 l’interface de Query Monitor et \u00e0 son fonctionnement. Ensuite, nous approfondirons chaque zone de l’interface.<\/p>\n
Il existe plus de 12 zones d’interface de haut niveau diff\u00e9rentes, il y a donc beaucoup \u00e0 couvrir. Cependant, le nombre exact de menus d’interface que vous verrez d\u00e9pendra de la page que vous analysez.<\/p>\n
Allons-y.<\/p>\n
Une introduction \u00e0 l’interface de Query Monitor<\/h3>\n
Query Monitor ne dispose pas de sa propre zone d’interface s\u00e9par\u00e9e. Au lieu de cela, elle affiche de nouvelles informations \u00e0 l’int\u00e9rieur de la barre d’administration de WordPress \u00e0 la fois sur l’interface publique et l’administration.<\/p>\n
Query Monitor affiche d’abord un r\u00e9sum\u00e9 rapide avec quatre \u00e9l\u00e9ments d’information :<\/p>\n
\n- Temps de g\u00e9n\u00e9ration de la page<\/strong> – 0.05 s dans la capture d’\u00e9cran.<\/li>\n
- Utilisation maximale de la m\u00e9moire – <\/strong> 7,7 Mo dans la capture d’\u00e9cran.<\/li>\n
- Temps total pris par les requ\u00eates SQL <\/strong>(en secondes) – 0.00 s dans la capture d’\u00e9cran.<\/li>\n
- Nombre total de requ\u00eates SQL – <\/strong> 54 dans la capture d’\u00e9cran.<\/li>\n<\/ul>\n
![\"Le](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-summary-1024x740.png\")
Le r\u00e9sum\u00e9 de Query Monitor sur la barre d’administration de WordPress.<\/figcaption><\/figure>\nSi vous cliquez sur ce r\u00e9sum\u00e9, vous ouvrirez l’interface compl\u00e8te de Query Monitor, qui s’affiche comme une fen\u00eatre superpos\u00e9e sur la page que vous \u00eates en train de consulter.<\/p>\n![\"L'interface](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-interface-1024x837.png\")
L’interface de Query Monitor.<\/figcaption><\/figure>\nToutes les fonctions et informations que Query Monitor offre sont contenues dans cette fen\u00eatre de superposition.<\/p>\n
Si vous pr\u00e9f\u00e9rez changer la disposition de la fen\u00eatre de superposition, vous pouvez cliquer sur le bouton dans le coin sup\u00e9rieur droit pour la transformer en une interface \u00e0 colonne lat\u00e9rale. Vous pouvez \u00e9galement utiliser la fonction de glisser-d\u00e9poser pour modifier la taille de la fen\u00eatre.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-interface-side-toggle-1024x846.png\")
Comment passer \u00e0 une interface avec une colonne lat\u00e9rale.<\/figcaption><\/figure>\nL’interface Query Monitor et ses informations ne sont visibles que pour les administrateurs (ou les super administrateurs sur les multisites WordPress<\/a>).<\/p>\nIl existe \u00e9galement une option permettant de d\u00e9finir un cookie d’authentification pour continuer \u00e0 afficher les r\u00e9sultats de Query Monitor, m\u00eame si vous n’\u00eates pas connect\u00e9 (ou si vous \u00eates connect\u00e9 en tant qu’utilisateur avec un r\u00f4le inf\u00e9rieur<\/a>). Nous vous expliquerons comment proc\u00e9der un peu plus loin dans ce guide.<\/p>\nPassons en revue chaque onglet de l’interface et expliquons comment vous pouvez l’utiliser pour d\u00e9boguer votre site WordPress.<\/p>\n
Aper\u00e7u<\/h3>\n
L’onglet Aper\u00e7u<\/strong> affiche plus de d\u00e9tails du r\u00e9sum\u00e9 de la barre d’administration et quelques informations g\u00e9n\u00e9rales sur l’environnement.<\/p>\nPar exemple, au lieu de se contenter de voir le pic d’utilisation de la m\u00e9moire, l’onglet Vue d’ensemble va un peu plus loin pour voir comment ce pic d’utilisation se compare aux limites de m\u00e9moire de votre serveur et de WordPress.<\/p>\n![\"L'onglet](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-overview-tab-1024x573.png\")
L’onglet Aper\u00e7u dans Query Monitor.<\/figcaption><\/figure>\nIl n’y a rien de trop d\u00e9taill\u00e9 ici – c’est juste un aper\u00e7u (d’o\u00f9 le nom).<\/p>\n
Requ\u00eates<\/h3>\n
L’onglet Requ\u00eates<\/strong> vous permet de creuser dans chaque requ\u00eate de base de donn\u00e9es 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\u00e8re le nom de l’extension.<\/p>\nPour chaque requ\u00eate, vous pouvez voir les informations suivantes :<\/p>\n
\n- La requ\u00eate compl\u00e8te<\/li>\n
- Appelant de la requ\u00eate<\/li>\n
- Composant de la requ\u00eate (par exemple, si elle provient du c\u0153ur, d’un th\u00e8me ou d’une extension)<\/li>\n
- Nombre de lignes<\/li>\n
- Le temps que la requ\u00eate a pris<\/li>\n<\/ol>\n
Parmi les d\u00e9bogages g\u00e9n\u00e9raux, vous pouvez l’utiliser pour trouver les requ\u00eates \u00e0 chargement lent qui bloquent les performances de votre site.<\/p>\n
Query Monitor r\u00e9partira les requ\u00eates en fonction de votre th\u00e8me et des extensions individuelles afin que vous puissiez voir l’impact de chaque extension.<\/p>\n
Supposons qu’une extension sp\u00e9cifique soit \u00e0 l’origine de nombreuses requ\u00eates \u00e0 chargement lent. Dans ce cas, vous devrez trouver un moyen d’y rem\u00e9dier, soit en optimisant les param\u00e8tres de l’extension ou la configuration de votre serveur (par exemple, en utilisant la mise en cache\u00a0de la base de donn\u00e9es ou des objets<\/a>), soit en passant \u00e0 une autre extension plus efficace<\/a>.<\/p>\nDans l’onglet principal, vous pouvez voir toutes les informations de haut niveau pour chaque requ\u00eate.<\/p>\n![\"L'onglet](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-1024x708.png\")
L’onglet principal Requ\u00eates affiche une liste de toutes les requ\u00eates.<\/figcaption><\/figure>\nSi vous souhaitez en savoir plus sur une requ\u00eate sp\u00e9cifique, cliquez sur l’ic\u00f4ne plus pour d\u00e9velopper des informations plus d\u00e9taill\u00e9es.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-detailed-information-1024x609.png\")
Comment afficher les d\u00e9tails \u00e9tendus d’une requ\u00eate.<\/figcaption><\/figure>\nSi vous voyez des chiffres anormalement bas ici, cela peut \u00eatre d\u00fb \u00e0 un certain type de mise en cache<\/a> – par exemple, la mise en cache des pages ou une extension qui met en cache ses requ\u00eates de base de donn\u00e9es<\/a>. Pour cette raison, il peut \u00eatre utile de d\u00e9sactiver la mise en cache pendant que vous d\u00e9boguez les choses.<\/p>\nIl existe \u00e9galement quelques sous-menus dans cette zone qui vous aident \u00e0 trouver des types de requ\u00eates sp\u00e9cifiques :<\/p>\n
\n- Requ\u00eates dupliqu\u00e9es<\/li>\n
- Requ\u00eates par appelant<\/li>\n
- Requ\u00eates par composant<\/li>\n<\/ul>\n
Requ\u00eates dupliqu\u00e9es<\/h4>\n
La zone Requ\u00eates dupliqu\u00e9es<\/strong> met en \u00e9vidence les requ\u00eates dupliqu\u00e9es et r\u00e9pertorie les \u00ab fauteuses de troubles potentiels \u00bb pour vous aider \u00e0 les d\u00e9boguer et \u00e0 rationaliser les choses.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-duplicates-1024x710.png\")
Comment voir une liste de requ\u00eates dupliqu\u00e9es.<\/figcaption><\/figure>\nRequ\u00eates par appelant<\/h4>\n
La zone Requ\u00eates par appelant<\/strong> 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\u00eates pour cet appelant.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-by-caller-1024x683.png\")
Comment visualiser les requ\u00eates par l’appelant.<\/figcaption><\/figure>\nRequ\u00eates par composant<\/h4>\n
La zone Requ\u00eates par composant <\/strong>affiche une liste de tous les composants qui ont effectu\u00e9 des requ\u00eates, y compris le c\u0153ur de WordPress, votre th\u00e8me et les extensions individuelles.<\/p>\nVous pouvez cliquer sur un composant sp\u00e9cifique pour afficher toutes ses requ\u00eates.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-by-component-1024x546.png\")
Comment afficher les requ\u00eates par composant.<\/figcaption><\/figure>\nEncore une fois, c’est l’un des rapports les plus pr\u00e9cieux car il vous permet de trouver les extensions sp\u00e9cifiques qui d\u00e9gradent les performances de votre site avec des requ\u00eates lentes.<\/p>\n
Lisez ceci si vous ne voyez pas les requ\u00eates par composant<\/h4>\n
Si vous ne voyez pas les informations sur les composants dans Query Monitor, c’est probablement parce que Query Monitor ne peut pas \u00e9tablir de lien symbolique avec son fichier db.php. Vous verrez un message d’erreur comme celui ci-dessous dans ces situations.<\/p>\n![\"Si](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-queries-tab-symlink-error-1024x620.png\")
Si cette erreur s’affiche, vous ne pourrez pas voir les requ\u00eates par composant.<\/figcaption><\/figure>\nIl y a deux causes probables ici :<\/p>\n
\n- Les autorisations de fichier<\/a> du r\u00e9pertoire wp-content<\/a> de votre site.<\/li>\n
- Le fichier wp-content\/db.php existe d\u00e9j\u00e0 (peut-\u00eatre \u00e0 cause d’une extension de mise en cache<\/a> comme W3 Total Cache<\/a>).<\/li>\n<\/ol>\n
Vous pouvez voir quelques corrections et solutions de contournement dans cet article GitHub<\/a>. Si vous vous sentez \u00e0 l’aise pour vous connecter \u00e0 votre serveur via SSH<\/a>, vous pouvez r\u00e9soudre le probl\u00e8me avec une commande WP-CLI<\/a> (bien qu’il existe d’autres m\u00e9thodes).<\/p>\nLa plupart des fonctionnalit\u00e9s de Query Monitor fonctionneront toujours avec ce probl\u00e8me, mais vous ne pourrez pas voir d’informations sur les composants tant que vous n’aurez pas r\u00e9solu le probl\u00e8me.<\/p>\n
Journaux<\/h3>\n
L’onglet Journaux<\/strong> est un onglet avanc\u00e9 qui vous permet de configurer vos messages et variables \u00e0 enregistrer. Cela peut vous aider \u00e0 d\u00e9boguer des probl\u00e8mes techniques ou \u00e0 garder un \u0153il sur votre site pour d\u00e9tecter les probl\u00e8mes.<\/p>\nLorsque vous installez Query Monitor pour la premi\u00e8re fois, cet onglet n’affiche rien car vous n’avez pas configur\u00e9 de variables de journalisation.<\/p>\n
Cependant, si vous souhaitez configurer des variables de journalisation personnalis\u00e9es, vous pouvez le faire en utilisant une syntaxe simple comme celle-ci :<\/p>\n
do_action( 'qm\/debug', 'This happened!' );<\/code><\/p>\nQuery Monitor prend en charge les actions suivantes, qui vous permettent de consigner les probl\u00e8mes \u00e0 diff\u00e9rents niveaux :<\/p>\n
\n- qm\/emergency<\/li>\n
- qm\/alert<\/li>\n
- qm\/critical<\/li>\n
- qM\/error<\/li>\n
- qM\/warning<\/li>\n
- qm\/notice<\/li>\n
- qm\/info<\/li>\n
- qm\/debug<\/li>\n<\/ul>\n
Si vous souhaitez en savoir plus et voir quelques exemples, consultez la page Variables de journalisation de Query Monitor<\/a>.<\/p>\nRequ\u00eate<\/h3>\n
L’onglet principal Requ\u00eate<\/strong> affiche les variables de requ\u00eate pour la requ\u00eate actuelle.<\/p>\n![\"L'onglet](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-response-tab-1024x545.png\")
L’onglet principal Requ\u00eate.<\/figcaption><\/figure>\nIl existe \u00e9galement des sous-menus pour voir les en-t\u00eates de la requ\u00eate<\/strong> et les en-t\u00eates de la r\u00e9ponse<\/strong>, qui sont probablement plus utiles pour le d\u00e9bogage des performances.<\/p>\nPar exemple, vous voulez peut-\u00eatre d\u00e9boguer le comportement du cache ou du CDN. Dans le sous-menu En-t\u00eates de r\u00e9ponse<\/strong>, vous pouvez voir le comportement de Cache-Control, ce qui vous permet de d\u00e9boguer la mise en cache du navigateur sur votre site<\/a>.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-response-tab-headers-1024x568.png\")
Comment afficher les en-t\u00eates de r\u00e9ponse.<\/figcaption><\/figure>\nBlocs<\/h3>\n
L’onglet Blocs<\/strong> est uniquement visible si vous regardez une page construite avec l’\u00e9diteur de blocs natif de WordPress (alias Gutenberg)<\/a>.<\/p>\nDans ces situations, cette page \u00e9num\u00e9rera chaque bloc individuel<\/a> sur la page, ainsi que des informations d\u00e9taill\u00e9es sur ce bloc.<\/p>\nUne chose intelligente ici est qu’il vous dira si le bloc provient du c\u0153ur de WordPress ou d’une extension diff\u00e9rente.<\/p>\n![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-blocks-list-1024x468.png\")
La zone Blocs n’appara\u00eet que si vous avez cr\u00e9\u00e9 le contenu de l’\u00e9diteur de blocs.<\/figcaption><\/figure>\nMod\u00e8le<\/h3>\n
L’onglet Mod\u00e8le<\/strong> ne sera visible que si vous utilisez Query Monitor sur l’interface publique de votre site. Il vous aide \u00e0 visualiser et \u00e0 d\u00e9boguer la hi\u00e9rarchie des mod\u00e8les<\/a> pour la page que vous regardez.<\/p>\nVous pouvez voir le fichier de mod\u00e8le sp\u00e9cifique \u00e0 cette page et les diff\u00e9rentes parties de mod\u00e8le et classes de corps.<\/p>\n
Cela n’a rien \u00e0 voir avec les performances, mais cela peut \u00eatre b\u00e9n\u00e9fique pour le d\u00e9veloppement de th\u00e8mes personnalis\u00e9s<\/a>.<\/p>\n![\"How](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-template-1024x568.png\")
Comment visualiser la hi\u00e9rarchie des mod\u00e8les.<\/figcaption><\/figure>\n\u00c9cran d’administration<\/h3>\n
L’onglet \u00c9cran d’administration<\/strong>\u00a0ne sera visible que si vous utilisez Query Monitor dans le tableau de bord d’administration de WordPress<\/a>. Vous ne l’utiliserez probablement pas si souvent, mais il peut \u00eatre utile si vous devez d\u00e9boguer un comportement dans un \u00e9cran d’administration personnalis\u00e9.<\/p>\nSi vous regardez un \u00e9cran d’administration avec une liste de tables, il vous montrera les filtres et les actions de la colonne personnalis\u00e9e. Il vous montrera \u00e9galement l’\u00e9tat de get_current_screen.<\/p>\n![\"Les](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-admin-screen-1024x592.png\")
Les d\u00e9tails de l’\u00e9cran d’administration.<\/figcaption><\/figure>\nScripts<\/h3>\n
Apr\u00e8s l’onglet Requ\u00eates<\/strong>, l’onglet Scripts<\/strong> est probablement la zone de d\u00e9bogage des performances la plus utile dans Query Monitor.<\/p>\nCet onglet affiche tous les scripts JavaScript<\/a> mis en file d’attente sur la page ainsi que leurs d\u00e9pendances. Vous disposez \u00e9galement de filtres pour trouver rapidement les scripts provenant d’un h\u00f4te sp\u00e9cifique ou ayant des d\u00e9pendances explicites.<\/p>\nEn r\u00e8gle g\u00e9n\u00e9rale, un plus grand nombre de scripts \u00e9quivaut \u00e0 un site web plus lent, car ils augmentent la taille de la page et ajoutent des requ\u00eates HTTP.<\/p>\n
Vous pouvez utiliser cette zone pour d\u00e9couvrir l’impact de diff\u00e9rentes extensions et trouver des moyens de r\u00e9duire le nombre de scripts en file d’attente<\/a> qui se chargent sur chaque page.<\/p>\n![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-scripts-1024x668.png\")
La zone Scripts affiche tous les scripts mis en file d’attente.<\/figcaption><\/figure>\nQuery 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<\/a> et creuser dans l’analyse de la cascade – Pingdom<\/a> et GTmetrix<\/a> sont deux excellentes options.<\/p>\nSi vous avez besoin d’aide pour utiliser ces d\u00e9tails afin d’optimiser les scripts de votre site, nous avons beaucoup de guides pr\u00e9cieux pour optimiser le JavaScript sur WordPress :<\/p>\n
\n- Comment diff\u00e9rer l’analyse du JavaScript<\/a><\/li>\n
- Comment \u00e9liminer le JavaScript qui bloque le rendu<\/a><\/li>\n
- Comment r\u00e9duire le nombre de requ\u00eates HTTP<\/a><\/li>\n<\/ul>\n
Styles<\/h3>\n
L’onglet Styles<\/strong> est comme l’onglet Scripts<\/strong>, mais il affiche les CSS en file d’attente<\/a> au lieu de JavaScript. C’est un autre onglet pratique pour d\u00e9boguer les performances de votre site.<\/p>\nTout comme pour les scripts, le chargement d’un plus grand nombre de feuilles de style sur une page entra\u00eene, en r\u00e8gle g\u00e9n\u00e9rale, un chargement plus lent du site.<\/p>\n
Dans cette zone, vous pouvez d\u00e9couvrir l’impact de diff\u00e9rentes extensions sur votre site. Vous pouvez utiliser ces informations pour r\u00e9duire le nombre de feuilles de style \u00e0 charger sur la page, ce qui r\u00e9duira la taille du fichier et les requ\u00eates HTTP n\u00e9cessaires au chargement de la page<\/a>.<\/p>\n![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-styles-1024x590.png\")
La zone Styles affiche toutes les feuilles de style mises en file d’attente.<\/figcaption><\/figure>\nComme pour les scripts, Query Monitor ne vous donnera pas une analyse approfondie de la fa\u00e7on dont votre CSS se charge et si elle bloque le chargement de parties critiques de votre site. Pour cela, vous devrez \u00e0 nouveau utiliser l’analyse en cascade.<\/p>\n
Nous avons quelques articles utiles pour vous aider \u00e0 optimiser le CSS de votre site :<\/p>\n
\n- Comment optimiser les CSS<\/a><\/li>\n
- Comment optimiser le chemin de rendu critique<\/a><\/li>\n<\/ul>\n
Hooks et actions<\/h3>\n
L’onglet Crochets (ou hooks) et actions<\/strong> r\u00e9pertorie tous les hooks et actions de la page actuelle, ainsi que leur priorit\u00e9.<\/p>\nPour les actions, vous pouvez d\u00e9velopper une action individuelle pour voir le fichier r\u00e9el et la ligne de code associ\u00e9e \u00e0 cette action. Vous pouvez \u00e9galement filtrer les actions par composant pour trouver les actions du c\u0153ur WordPress, des extensions et des th\u00e8mes.<\/p>\n
Cette zone n’est pas vraiment ax\u00e9e sur les performances, mais elle est pratique pour le d\u00e9veloppement personnalis\u00e9.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-hooks-and-actions-tab-1024x592.png\")
Comment visualiser les hooks et les actions.<\/figcaption><\/figure>\nLangues<\/h3>\n
L’onglet Langues<\/strong>\u00a0vous montre les domaines de langue et de texte sur votre site et le fichier de langue<\/a> utilis\u00e9 pour chaque extension.<\/p>\nCe n’est pas tr\u00e8s utile si vous avez un site monolingue en anglais. Cependant, cet onglet peut \u00eatre utile si vous avez un site multilingue<\/a> et\/ou votre site est dans une langue qui pourrait ne pas avoir une couverture compl\u00e8te du pack de traduction.<\/p>\nAppels d’API HTTP<\/h3>\n
L’onglet Appels d’API HTTP<\/strong> vous montre toutes les requ\u00eates HTTP c\u00f4t\u00e9 serveur qui ont eu lieu pendant le chargement de la page, y compris les d\u00e9tails de la requ\u00eate, le moment et le code d’\u00e9tat HTTP<\/a>.<\/p>\nSi une extension ou un th\u00e8me effectue des appels d’API HTTP lents, il s’agit souvent d’une cause \u00ab cach\u00e9e \u00bb de mauvaises performances. Vous devrez donc trouver un moyen de r\u00e9soudre ce probl\u00e8me, soit en modifiant les r\u00e9glages de l’extension, soit en optant pour une autre extension.<\/p>\n
Pour de nombreuses pages, vous devriez voir \u00ab Aucun appel HTTP API \u00bb, ce qui est bon signe car cela signifie que rien n’entrave les performances de votre site.<\/p>\n
V\u00e9rifications des capacit\u00e9s<\/h3>\n
La zone V\u00e9rifications des capacit\u00e9s<\/strong> vous permet de voir quelles capacit\u00e9s d’utilisateur peuvent acc\u00e9der au contenu actuel que vous regardez. Cela peut \u00eatre pratique pour voir si diff\u00e9rents utilisateurs peuvent acc\u00e9der \u00e0 certains<\/a> contenus frontends<\/a> ou backend.<\/p>\nCette fonctionnalit\u00e9 est cependant d\u00e9sactiv\u00e9e par d\u00e9faut pour des raisons de performance. Si vous souhaitez l’activer, vous devez modifier le fichier wp-config.php<\/strong> de votre site<\/a> et ajouter l’extrait de code suivant :<\/p>\ndefine( 'QM_ENABLE_CAPS_PANEL', true );<\/code><\/p>\nEnvironnement<\/h3>\n
L’onglet Environnement<\/strong> fournit un r\u00e9sum\u00e9 d\u00e9taill\u00e9 des environnements de votre site, notamment :<\/p>\n\n- PHP<\/a><\/li>\n
- Base de donn\u00e9es<\/li>\n
- WordPress<\/li>\n
- Serveur<\/li>\n<\/ul>\n
Vous pouvez voir les d\u00e9tails importants, les limites, les num\u00e9ros de version, les r\u00e9glages de configuration, etc.<\/p>\n
Cela peut \u00e9galement \u00e9clairer des d\u00e9cisions importantes concernant les performances.<\/p>\n
Par exemple, si vous voyez que la limite de m\u00e9moire de votre site est limit\u00e9e, vous pourriez vouloir augmenter la limite de m\u00e9moire<\/a> pour \u00e9viter les erreurs li\u00e9es \u00e0 la limite de m\u00e9moire<\/a>.<\/p>\nDe m\u00eame, si vous constatez que vous utilisez une ancienne version de PHP<\/a>, vous pourriez vouloir passer \u00e0 la derni\u00e8re version<\/a> pour am\u00e9liorer les performances<\/a>.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-environment-1024x761.png\")
Comment afficher les informations d’environnement.<\/figcaption><\/figure>\nConditionnels<\/h3>\n
L’onglet Conditionnels<\/strong> vous aide \u00e0 voir quelles d\u00e9clarations de condition s’appliquent \u00e0 la page que vous regardez, ce qui peut \u00eatre utile dans le d\u00e9veloppement personnalis\u00e9.<\/p>\nVous pouvez voir les conditionnels \u00ab True \u00bb et les conditionnels \u00ab False \u00bb.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-conditionals-1024x497.png\")
Comment afficher les conditionnels de page.<\/figcaption><\/figure>\nComment afficher les informations de Query Monitor en tant qu’utilisateur non-administrateur<\/h3>\n
Dans certaines situations, vous pouvez vouloir afficher les informations de Query Monitor en tant que r\u00f4le d’utilisateur diff\u00e9rent ou en tant qu’utilisateur d\u00e9connect\u00e9. Cela peut \u00eatre tr\u00e8s utile pour les boutiques WooCommerce<\/a>, les sites d’adh\u00e9sion<\/a> et les sites similaires.<\/p>\nPour cela, vous devez d\u00e9finir un cookie d’authentification dans votre navigateur. Une fois que vous avez d\u00e9fini ce cookie, vous pourrez afficher les informations de Query Monitor chaque fois que vous visitez le site, m\u00eame si vous \u00eates d\u00e9connect\u00e9.<\/p>\n
Pour d\u00e9finir le cookie d’authentification, cliquez sur l’ic\u00f4ne d’engrenage dans le coin sup\u00e9rieur droit du panneau de Query Monitor. Ensuite, cliquez sur le bouton D\u00e9finir le cookie d’authentification<\/strong>.<\/p>\n![\"Comment](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/query-monitor-set-authentication-cookie-1024x622.png\")
Comment d\u00e9finir le cookie d’authentification dans Query Monitor.<\/figcaption><\/figure>\nSi vous souhaitez un jour d\u00e9sactiver cette fonctionnalit\u00e9, vous pouvez revenir \u00e0 cette interface et cliquer sur le bouton Effacer le cookie d’authentification<\/strong> pour supprimer le cookie.<\/p>\nSi vous combinez ceci avec User Switching<\/a>, une autre extension utile du m\u00eame d\u00e9veloppeur, vous pouvez rapidement passer d’un r\u00f4le d’utilisateur<\/a> \u00e0 un autre sur votre site.<\/p>\nComment \u00e9tendre Query Monitor avec des modules<\/h3>\n
Jusqu’\u00e0 pr\u00e9sent, nous nous sommes concentr\u00e9s exclusivement sur les fonctions et les options d’analyse de l’extension principale Query Monitor. Cependant, plusieurs modules tiers peuvent \u00e9tendre davantage Query Monitor.<\/p>\n
Ils peuvent ajouter la prise en charge de technologies de performance sp\u00e9cifiques, telles que Memcached et Redis<\/a>, ainsi que d’extensions WordPress sp\u00e9cifiques, telles que WooCommerce<\/a> ou GiveWP<\/a>.<\/p>\nQuery Monitor prend \u00e9galement en charge tous les modules de l’extension Debug Bar<\/a>, qui ajoute des int\u00e9grations pour ElasticPress<\/a>, Elementor<\/a>, Cache Lookup, et bien d’autres.<\/p>\nVous pouvez voir une liste compl\u00e8te des modules de Query Monitor sur cette page GitHub<\/a>.<\/p>\nAutres outils utiles pour d\u00e9boguer et am\u00e9liorer les performances de WordPress<\/h2>\n
Bien que Query Monitor soit un outil gratuit tr\u00e8s pratique pour d\u00e9boguer les performances de WordPress, il ne couvre pas tout. Il existe d’autres outils utiles que vous devriez consid\u00e9rer pour analyser diff\u00e9rents domaines de performance de WordPress.<\/p>\n
Kinsta APM (Application Performance Monitoring)<\/h3>\n![\"L'outil](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/03\/kinsta-apm-1024x546.jpg\")
L’outil Kinsta APM.<\/figcaption><\/figure>\nSi vous h\u00e9bergez votre site chez Kinsta<\/a>, vous obtenez un acc\u00e8s gratuit \u00e0 l’outil Kinsta Application Performance Monitoring (APM)<\/a>.<\/p>\nUn outil APM<\/a> comme Kinsta APM va encore plus loin<\/a> que Query Monitor avec les types d’analyses suivants :<\/p>\n\n- Processus PHP lents<\/li>\n
- Requ\u00eates de base de donn\u00e9es lentes<\/li>\n
- Appels d’API longs<\/li>\n
- Longues requ\u00eates d’URL externes<\/li>\n
- Traces de la pile compl\u00e8te dans les zones probl\u00e9matiques<\/li>\n<\/ul>\n
Vous pouvez \u00e9galement voir comment ces informations \u00e9voluent dans le temps, ce que Query Monitor ne peut pas faire. De plus, vous pouvez analyser l’ensemble de votre site plut\u00f4t que de proc\u00e9der page par page.<\/p>\n
Pour un tutoriel g\u00e9n\u00e9ral, vous pouvez suivre notre guide Kinsta APM<\/a>.<\/p>\nNous avons \u00e9galement des guides sp\u00e9cifiques sur l’utilisation d’APM pour optimiser les sites WordPress gourmands en ressources :<\/p>\n
\n- Utilisation d’APM pour optimiser une boutique WooCommerce<\/a><\/li>\n
- Utilisation d’APM pour optimiser un site d’adh\u00e9sion<\/a><\/li>\n<\/ul>\n
New Relic<\/h3>\n
New Relic<\/a> est un autre outil utile de surveillance des performances similaire \u00e0 Kinsta APM.<\/p>\nSi vous n’\u00eates pas h\u00e9berg\u00e9 chez Kinsta, il peut \u00eatre un excellent moyen d’acc\u00e9der \u00e0 des types d’analyses similaires. M\u00eame si vous \u00eates h\u00e9berg\u00e9 chez Kinsta, vous pouvez toujours activer le suivi de New Relic<\/a> si n\u00e9cessaire, bien que vous deviez avoir votre propre licence.<\/p>\nPour apprendre \u00e0 utiliser New Relic, vous pouvez suivre notre tutoriel sur les performances de New Relic<\/a>.<\/p>\nUn outil de test de vitesse de qualit\u00e9<\/h3>\n
Nous l’avons mentionn\u00e9 pr\u00e9c\u00e9demment en parlant de l’analyse de la cascade, mais un bon outil de test de vitesse peut \u00eatre inestimable pour d\u00e9boguer ce que<\/em> votre site charge et comment<\/em> il se charge.<\/p>\nPour vous aider \u00e0 utiliser l’outil de votre choix, nous avons un guide d\u00e9di\u00e9 sur la bonne fa\u00e7on d’ex\u00e9cuter un test de vitesse<\/a>. Nous avons \u00e9galement des articles consacr\u00e9s \u00e0 certains des outils les plus populaires :<\/p>\n\n- Tutoriel GTmetrix<\/a><\/li>\n
- Tutoriel Pingdom<\/a><\/li>\n
- Tutoriel PageSpeed Insights<\/a><\/li>\n<\/ul>\n
Mode de d\u00e9bogage de WordPress<\/h3>\n
WordPress comprend son propre mode de d\u00e9bogage int\u00e9gr\u00e9 pour voir toutes les erreurs, avis et avertissements PHP. Vous avez \u00e9galement la possibilit\u00e9 d’enregistrer ces probl\u00e8mes dans un fichier journal.<\/p>\n
Pour plus de d\u00e9tails, consultez notre guide complet du mode de d\u00e9bogage de WordPress<\/a>.<\/p>\nOutils de d\u00e9veloppement du navigateur web<\/h3>\n
Chrome inclut des outils de d\u00e9veloppement tr\u00e8s d\u00e9taill\u00e9s qui peuvent vous aider \u00e0 d\u00e9boguer les performances de votre site, comme le font certains autres navigateurs<\/a>.<\/p>\nPar exemple, l’onglet R\u00e9seau<\/strong> vous permet d’afficher les temps de chaque requ\u00eate HTTP sur votre site, ainsi qu’une analyse en cascade. L’onglet Performance<\/strong> vous donne une analyse tr\u00e8s d\u00e9taill\u00e9e des performances.<\/p>\nVous pouvez \u00e9galement ex\u00e9cuter des audits Lighthouse \u00e0 partir de l’onglet Lighthouse <\/strong>. Il s’agit du m\u00eame algorithme de test de performance<\/a> que celui utilis\u00e9 par PageSpeed Insights<\/a>.<\/p>\n
Query Monitor<\/a> est une extension 100 % gratuite qui vous aide \u00e0 d\u00e9boguer les performances et le d\u00e9veloppement de votre site WordPress.<\/p>\n Vous pouvez l’imaginer comme l’outil des d\u00e9veloppeurs de Chrome, mais sp\u00e9cifiquement pour WordPress. Vous pouvez creuser dans les requ\u00eates de base de donn\u00e9es, les scripts, le timing, et plus encore. Et vous pouvez \u00e9galement afficher des tonnes d’informations utiles, telles que des informations g\u00e9n\u00e9rales sur l’environnement et des d\u00e9tails sur des pages sp\u00e9cifiques.<\/p>\n Query Monitor pr\u00e9sente ensuite toutes ces informations d’une mani\u00e8re facilement accessible que vous pouvez consulter de n’importe o\u00f9 sur votre site.<\/p>\n Query Monitor est maintenue par John Blackbourn, un ing\u00e9nieur web principal chez Human Made<\/a>. Il poss\u00e8de \u00e9galement plusieurs autres extensions utiles, notamment WP Crontrol<\/a> (excellent pour le d\u00e9bogage de wp-cron<\/a>) et User Switching<\/a> (excellent pour le d\u00e9bogage des exp\u00e9riences de diff\u00e9rents r\u00f4les d’utilisateur<\/a>).<\/p>\n John est tr\u00e8s r\u00e9actif et travaille constamment \u00e0 la maintenance et \u00e0 l’am\u00e9lioration de Query Monitor. Automattic et d’autres sponsors soutiennent son travail.<\/p>\n Si vous trouvez de la valeur dans l’extension au moment o\u00f9 vous terminez cet article, vous pouvez soutenir Query Monitor en parrainant le projet sur GitHub<\/a> pour aussi peu que 1 $ par mois.<\/p>\n\n Query Monitor peut vous aider \u00e0 d\u00e9boguer plus que les requ\u00eates \u00e0 la base de donn\u00e9es de WordPress<\/a>, malgr\u00e9 son nom.<\/p>\n Ne vous m\u00e9prenez pas – le d\u00e9bogage des requ\u00eates de base de donn\u00e9es<\/a> est quelque chose que Query Monitor fait bien et l’un des avantages les plus importants de l’extension.<\/p>\n Cependant, elle s’attaque \u00e9galement \u00e0 de nombreux autres domaines, notamment le d\u00e9bogage ax\u00e9 sur les performances et le d\u00e9bogage g\u00e9n\u00e9ral du d\u00e9veloppement.<\/p>\n Voici un \u00e9chantillon des nombreux d\u00e9tails que Query Monitor peut vous aider \u00e0 analyser et d\u00e9boguer :<\/p>\n Une limitation notable de Query Monitor est qu’il est principalement destin\u00e9 au d\u00e9bogage \u00ab sur le moment \u00bb. Lorsqu’il vous montre les requ\u00eates de base de donn\u00e9es, le timing, etc., il le fait uniquement pour le chargement de la page en cours.<\/p>\n En g\u00e9n\u00e9ral, il ne suit pas ou n’affiche pas les informations\/tendances historiques, bien que John indique que cette fonctionnalit\u00e9 est pr\u00e9vue pour les futures versions.<\/p>\n Maintenant que vous savez ce qu’est Query Monitor et ce que cette extension fait, voyons comment vous pouvez utiliser Query Monitor pour d\u00e9boguer les performances de votre site et certains des autres outils de d\u00e9bogage de d\u00e9veloppement g\u00e9n\u00e9ral.<\/p>\n Nous vous donnerons une introduction g\u00e9n\u00e9rale \u00e0 l’interface de Query Monitor et \u00e0 son fonctionnement. Ensuite, nous approfondirons chaque zone de l’interface.<\/p>\n Il existe plus de 12 zones d’interface de haut niveau diff\u00e9rentes, il y a donc beaucoup \u00e0 couvrir. Cependant, le nombre exact de menus d’interface que vous verrez d\u00e9pendra de la page que vous analysez.<\/p>\n Allons-y.<\/p>\n Query Monitor ne dispose pas de sa propre zone d’interface s\u00e9par\u00e9e. Au lieu de cela, elle affiche de nouvelles informations \u00e0 l’int\u00e9rieur de la barre d’administration de WordPress \u00e0 la fois sur l’interface publique et l’administration.<\/p>\n Query Monitor affiche d’abord un r\u00e9sum\u00e9 rapide avec quatre \u00e9l\u00e9ments d’information :<\/p>\n Si vous cliquez sur ce r\u00e9sum\u00e9, vous ouvrirez l’interface compl\u00e8te de Query Monitor, qui s’affiche comme une fen\u00eatre superpos\u00e9e sur la page que vous \u00eates en train de consulter.<\/p>\n Toutes les fonctions et informations que Query Monitor offre sont contenues dans cette fen\u00eatre de superposition.<\/p>\n Si vous pr\u00e9f\u00e9rez changer la disposition de la fen\u00eatre de superposition, vous pouvez cliquer sur le bouton dans le coin sup\u00e9rieur droit pour la transformer en une interface \u00e0 colonne lat\u00e9rale. Vous pouvez \u00e9galement utiliser la fonction de glisser-d\u00e9poser pour modifier la taille de la fen\u00eatre.<\/p>\n L’interface Query Monitor et ses informations ne sont visibles que pour les administrateurs (ou les super administrateurs sur les multisites WordPress<\/a>).<\/p>\n Il existe \u00e9galement une option permettant de d\u00e9finir un cookie d’authentification pour continuer \u00e0 afficher les r\u00e9sultats de Query Monitor, m\u00eame si vous n’\u00eates pas connect\u00e9 (ou si vous \u00eates connect\u00e9 en tant qu’utilisateur avec un r\u00f4le inf\u00e9rieur<\/a>). Nous vous expliquerons comment proc\u00e9der un peu plus loin dans ce guide.<\/p>\n Passons en revue chaque onglet de l’interface et expliquons comment vous pouvez l’utiliser pour d\u00e9boguer votre site WordPress.<\/p>\n L’onglet Aper\u00e7u<\/strong> affiche plus de d\u00e9tails du r\u00e9sum\u00e9 de la barre d’administration et quelques informations g\u00e9n\u00e9rales sur l’environnement.<\/p>\n Par exemple, au lieu de se contenter de voir le pic d’utilisation de la m\u00e9moire, l’onglet Vue d’ensemble va un peu plus loin pour voir comment ce pic d’utilisation se compare aux limites de m\u00e9moire de votre serveur et de WordPress.<\/p>\n Il n’y a rien de trop d\u00e9taill\u00e9 ici – c’est juste un aper\u00e7u (d’o\u00f9 le nom).<\/p>\n L’onglet Requ\u00eates<\/strong> vous permet de creuser dans chaque requ\u00eate de base de donn\u00e9es 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\u00e8re le nom de l’extension.<\/p>\n Pour chaque requ\u00eate, vous pouvez voir les informations suivantes :<\/p>\n Parmi les d\u00e9bogages g\u00e9n\u00e9raux, vous pouvez l’utiliser pour trouver les requ\u00eates \u00e0 chargement lent qui bloquent les performances de votre site.<\/p>\n Query Monitor r\u00e9partira les requ\u00eates en fonction de votre th\u00e8me et des extensions individuelles afin que vous puissiez voir l’impact de chaque extension.<\/p>\n Supposons qu’une extension sp\u00e9cifique soit \u00e0 l’origine de nombreuses requ\u00eates \u00e0 chargement lent. Dans ce cas, vous devrez trouver un moyen d’y rem\u00e9dier, soit en optimisant les param\u00e8tres de l’extension ou la configuration de votre serveur (par exemple, en utilisant la mise en cache\u00a0de la base de donn\u00e9es ou des objets<\/a>), soit en passant \u00e0 une autre extension plus efficace<\/a>.<\/p>\n Dans l’onglet principal, vous pouvez voir toutes les informations de haut niveau pour chaque requ\u00eate.<\/p>\n Si vous souhaitez en savoir plus sur une requ\u00eate sp\u00e9cifique, cliquez sur l’ic\u00f4ne plus pour d\u00e9velopper des informations plus d\u00e9taill\u00e9es.<\/p>\n Si vous voyez des chiffres anormalement bas ici, cela peut \u00eatre d\u00fb \u00e0 un certain type de mise en cache<\/a> – par exemple, la mise en cache des pages ou une extension qui met en cache ses requ\u00eates de base de donn\u00e9es<\/a>. Pour cette raison, il peut \u00eatre utile de d\u00e9sactiver la mise en cache pendant que vous d\u00e9boguez les choses.<\/p>\n Il existe \u00e9galement quelques sous-menus dans cette zone qui vous aident \u00e0 trouver des types de requ\u00eates sp\u00e9cifiques :<\/p>\n La zone Requ\u00eates dupliqu\u00e9es<\/strong> met en \u00e9vidence les requ\u00eates dupliqu\u00e9es et r\u00e9pertorie les \u00ab fauteuses de troubles potentiels \u00bb pour vous aider \u00e0 les d\u00e9boguer et \u00e0 rationaliser les choses.<\/p>\n La zone Requ\u00eates par appelant<\/strong> 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\u00eates pour cet appelant.<\/p>\n La zone Requ\u00eates par composant <\/strong>affiche une liste de tous les composants qui ont effectu\u00e9 des requ\u00eates, y compris le c\u0153ur de WordPress, votre th\u00e8me et les extensions individuelles.<\/p>\n Vous pouvez cliquer sur un composant sp\u00e9cifique pour afficher toutes ses requ\u00eates.<\/p>\n Encore une fois, c’est l’un des rapports les plus pr\u00e9cieux car il vous permet de trouver les extensions sp\u00e9cifiques qui d\u00e9gradent les performances de votre site avec des requ\u00eates lentes.<\/p>\n Si vous ne voyez pas les informations sur les composants dans Query Monitor, c’est probablement parce que Query Monitor ne peut pas \u00e9tablir de lien symbolique avec son fichier db.php. Vous verrez un message d’erreur comme celui ci-dessous dans ces situations.<\/p>\n Il y a deux causes probables ici :<\/p>\n Vous pouvez voir quelques corrections et solutions de contournement dans cet article GitHub<\/a>. Si vous vous sentez \u00e0 l’aise pour vous connecter \u00e0 votre serveur via SSH<\/a>, vous pouvez r\u00e9soudre le probl\u00e8me avec une commande WP-CLI<\/a> (bien qu’il existe d’autres m\u00e9thodes).<\/p>\n La plupart des fonctionnalit\u00e9s de Query Monitor fonctionneront toujours avec ce probl\u00e8me, mais vous ne pourrez pas voir d’informations sur les composants tant que vous n’aurez pas r\u00e9solu le probl\u00e8me.<\/p>\n L’onglet Journaux<\/strong> est un onglet avanc\u00e9 qui vous permet de configurer vos messages et variables \u00e0 enregistrer. Cela peut vous aider \u00e0 d\u00e9boguer des probl\u00e8mes techniques ou \u00e0 garder un \u0153il sur votre site pour d\u00e9tecter les probl\u00e8mes.<\/p>\n Lorsque vous installez Query Monitor pour la premi\u00e8re fois, cet onglet n’affiche rien car vous n’avez pas configur\u00e9 de variables de journalisation.<\/p>\n Cependant, si vous souhaitez configurer des variables de journalisation personnalis\u00e9es, vous pouvez le faire en utilisant une syntaxe simple comme celle-ci :<\/p>\n Query Monitor prend en charge les actions suivantes, qui vous permettent de consigner les probl\u00e8mes \u00e0 diff\u00e9rents niveaux :<\/p>\n Si vous souhaitez en savoir plus et voir quelques exemples, consultez la page Variables de journalisation de Query Monitor<\/a>.<\/p>\n L’onglet principal Requ\u00eate<\/strong> affiche les variables de requ\u00eate pour la requ\u00eate actuelle.<\/p>\n Il existe \u00e9galement des sous-menus pour voir les en-t\u00eates de la requ\u00eate<\/strong> et les en-t\u00eates de la r\u00e9ponse<\/strong>, qui sont probablement plus utiles pour le d\u00e9bogage des performances.<\/p>\n Par exemple, vous voulez peut-\u00eatre d\u00e9boguer le comportement du cache ou du CDN. Dans le sous-menu En-t\u00eates de r\u00e9ponse<\/strong>, vous pouvez voir le comportement de Cache-Control, ce qui vous permet de d\u00e9boguer la mise en cache du navigateur sur votre site<\/a>.<\/p>\n L’onglet Blocs<\/strong> est uniquement visible si vous regardez une page construite avec l’\u00e9diteur de blocs natif de WordPress (alias Gutenberg)<\/a>.<\/p>\n Dans ces situations, cette page \u00e9num\u00e9rera chaque bloc individuel<\/a> sur la page, ainsi que des informations d\u00e9taill\u00e9es sur ce bloc.<\/p>\n Une chose intelligente ici est qu’il vous dira si le bloc provient du c\u0153ur de WordPress ou d’une extension diff\u00e9rente.<\/p>\n L’onglet Mod\u00e8le<\/strong> ne sera visible que si vous utilisez Query Monitor sur l’interface publique de votre site. Il vous aide \u00e0 visualiser et \u00e0 d\u00e9boguer la hi\u00e9rarchie des mod\u00e8les<\/a> pour la page que vous regardez.<\/p>\n Vous pouvez voir le fichier de mod\u00e8le sp\u00e9cifique \u00e0 cette page et les diff\u00e9rentes parties de mod\u00e8le et classes de corps.<\/p>\n Cela n’a rien \u00e0 voir avec les performances, mais cela peut \u00eatre b\u00e9n\u00e9fique pour le d\u00e9veloppement de th\u00e8mes personnalis\u00e9s<\/a>.<\/p>\n L’onglet \u00c9cran d’administration<\/strong>\u00a0ne sera visible que si vous utilisez Query Monitor dans le tableau de bord d’administration de WordPress<\/a>. Vous ne l’utiliserez probablement pas si souvent, mais il peut \u00eatre utile si vous devez d\u00e9boguer un comportement dans un \u00e9cran d’administration personnalis\u00e9.<\/p>\n Si vous regardez un \u00e9cran d’administration avec une liste de tables, il vous montrera les filtres et les actions de la colonne personnalis\u00e9e. Il vous montrera \u00e9galement l’\u00e9tat de get_current_screen.<\/p>\n Apr\u00e8s l’onglet Requ\u00eates<\/strong>, l’onglet Scripts<\/strong> est probablement la zone de d\u00e9bogage des performances la plus utile dans Query Monitor.<\/p>\n Cet onglet affiche tous les scripts JavaScript<\/a> mis en file d’attente sur la page ainsi que leurs d\u00e9pendances. Vous disposez \u00e9galement de filtres pour trouver rapidement les scripts provenant d’un h\u00f4te sp\u00e9cifique ou ayant des d\u00e9pendances explicites.<\/p>\n En r\u00e8gle g\u00e9n\u00e9rale, un plus grand nombre de scripts \u00e9quivaut \u00e0 un site web plus lent, car ils augmentent la taille de la page et ajoutent des requ\u00eates HTTP.<\/p>\n Vous pouvez utiliser cette zone pour d\u00e9couvrir l’impact de diff\u00e9rentes extensions et trouver des moyens de r\u00e9duire le nombre de scripts en file d’attente<\/a> qui se chargent sur chaque page.<\/p>\n 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<\/a> et creuser dans l’analyse de la cascade – Pingdom<\/a> et GTmetrix<\/a> sont deux excellentes options.<\/p>\n Si vous avez besoin d’aide pour utiliser ces d\u00e9tails afin d’optimiser les scripts de votre site, nous avons beaucoup de guides pr\u00e9cieux pour optimiser le JavaScript sur WordPress :<\/p>\n L’onglet Styles<\/strong> est comme l’onglet Scripts<\/strong>, mais il affiche les CSS en file d’attente<\/a> au lieu de JavaScript. C’est un autre onglet pratique pour d\u00e9boguer les performances de votre site.<\/p>\n Tout comme pour les scripts, le chargement d’un plus grand nombre de feuilles de style sur une page entra\u00eene, en r\u00e8gle g\u00e9n\u00e9rale, un chargement plus lent du site.<\/p>\n Dans cette zone, vous pouvez d\u00e9couvrir l’impact de diff\u00e9rentes extensions sur votre site. Vous pouvez utiliser ces informations pour r\u00e9duire le nombre de feuilles de style \u00e0 charger sur la page, ce qui r\u00e9duira la taille du fichier et les requ\u00eates HTTP n\u00e9cessaires au chargement de la page<\/a>.<\/p>\n Comme pour les scripts, Query Monitor ne vous donnera pas une analyse approfondie de la fa\u00e7on dont votre CSS se charge et si elle bloque le chargement de parties critiques de votre site. Pour cela, vous devrez \u00e0 nouveau utiliser l’analyse en cascade.<\/p>\n Nous avons quelques articles utiles pour vous aider \u00e0 optimiser le CSS de votre site :<\/p>\n L’onglet Crochets (ou hooks) et actions<\/strong> r\u00e9pertorie tous les hooks et actions de la page actuelle, ainsi que leur priorit\u00e9.<\/p>\n Pour les actions, vous pouvez d\u00e9velopper une action individuelle pour voir le fichier r\u00e9el et la ligne de code associ\u00e9e \u00e0 cette action. Vous pouvez \u00e9galement filtrer les actions par composant pour trouver les actions du c\u0153ur WordPress, des extensions et des th\u00e8mes.<\/p>\n Cette zone n’est pas vraiment ax\u00e9e sur les performances, mais elle est pratique pour le d\u00e9veloppement personnalis\u00e9.<\/p>\n L’onglet Langues<\/strong>\u00a0vous montre les domaines de langue et de texte sur votre site et le fichier de langue<\/a> utilis\u00e9 pour chaque extension.<\/p>\n Ce n’est pas tr\u00e8s utile si vous avez un site monolingue en anglais. Cependant, cet onglet peut \u00eatre utile si vous avez un site multilingue<\/a> et\/ou votre site est dans une langue qui pourrait ne pas avoir une couverture compl\u00e8te du pack de traduction.<\/p>\n L’onglet Appels d’API HTTP<\/strong> vous montre toutes les requ\u00eates HTTP c\u00f4t\u00e9 serveur qui ont eu lieu pendant le chargement de la page, y compris les d\u00e9tails de la requ\u00eate, le moment et le code d’\u00e9tat HTTP<\/a>.<\/p>\n Si une extension ou un th\u00e8me effectue des appels d’API HTTP lents, il s’agit souvent d’une cause \u00ab cach\u00e9e \u00bb de mauvaises performances. Vous devrez donc trouver un moyen de r\u00e9soudre ce probl\u00e8me, soit en modifiant les r\u00e9glages de l’extension, soit en optant pour une autre extension.<\/p>\n Pour de nombreuses pages, vous devriez voir \u00ab Aucun appel HTTP API \u00bb, ce qui est bon signe car cela signifie que rien n’entrave les performances de votre site.<\/p>\n La zone V\u00e9rifications des capacit\u00e9s<\/strong> vous permet de voir quelles capacit\u00e9s d’utilisateur peuvent acc\u00e9der au contenu actuel que vous regardez. Cela peut \u00eatre pratique pour voir si diff\u00e9rents utilisateurs peuvent acc\u00e9der \u00e0 certains<\/a> contenus frontends<\/a> ou backend.<\/p>\n Cette fonctionnalit\u00e9 est cependant d\u00e9sactiv\u00e9e par d\u00e9faut pour des raisons de performance. Si vous souhaitez l’activer, vous devez modifier le fichier wp-config.php<\/strong> de votre site<\/a> et ajouter l’extrait de code suivant :<\/p>\n L’onglet Environnement<\/strong> fournit un r\u00e9sum\u00e9 d\u00e9taill\u00e9 des environnements de votre site, notamment :<\/p>\n Vous pouvez voir les d\u00e9tails importants, les limites, les num\u00e9ros de version, les r\u00e9glages de configuration, etc.<\/p>\n Cela peut \u00e9galement \u00e9clairer des d\u00e9cisions importantes concernant les performances.<\/p>\n Par exemple, si vous voyez que la limite de m\u00e9moire de votre site est limit\u00e9e, vous pourriez vouloir augmenter la limite de m\u00e9moire<\/a> pour \u00e9viter les erreurs li\u00e9es \u00e0 la limite de m\u00e9moire<\/a>.<\/p>\n De m\u00eame, si vous constatez que vous utilisez une ancienne version de PHP<\/a>, vous pourriez vouloir passer \u00e0 la derni\u00e8re version<\/a> pour am\u00e9liorer les performances<\/a>.<\/p>\n L’onglet Conditionnels<\/strong> vous aide \u00e0 voir quelles d\u00e9clarations de condition s’appliquent \u00e0 la page que vous regardez, ce qui peut \u00eatre utile dans le d\u00e9veloppement personnalis\u00e9.<\/p>\n Vous pouvez voir les conditionnels \u00ab True \u00bb et les conditionnels \u00ab False \u00bb.<\/p>\n Dans certaines situations, vous pouvez vouloir afficher les informations de Query Monitor en tant que r\u00f4le d’utilisateur diff\u00e9rent ou en tant qu’utilisateur d\u00e9connect\u00e9. Cela peut \u00eatre tr\u00e8s utile pour les boutiques WooCommerce<\/a>, les sites d’adh\u00e9sion<\/a> et les sites similaires.<\/p>\n Pour cela, vous devez d\u00e9finir un cookie d’authentification dans votre navigateur. Une fois que vous avez d\u00e9fini ce cookie, vous pourrez afficher les informations de Query Monitor chaque fois que vous visitez le site, m\u00eame si vous \u00eates d\u00e9connect\u00e9.<\/p>\n Pour d\u00e9finir le cookie d’authentification, cliquez sur l’ic\u00f4ne d’engrenage dans le coin sup\u00e9rieur droit du panneau de Query Monitor. Ensuite, cliquez sur le bouton D\u00e9finir le cookie d’authentification<\/strong>.<\/p>\n Si vous souhaitez un jour d\u00e9sactiver cette fonctionnalit\u00e9, vous pouvez revenir \u00e0 cette interface et cliquer sur le bouton Effacer le cookie d’authentification<\/strong> pour supprimer le cookie.<\/p>\n Si vous combinez ceci avec User Switching<\/a>, une autre extension utile du m\u00eame d\u00e9veloppeur, vous pouvez rapidement passer d’un r\u00f4le d’utilisateur<\/a> \u00e0 un autre sur votre site.<\/p>\n Jusqu’\u00e0 pr\u00e9sent, nous nous sommes concentr\u00e9s exclusivement sur les fonctions et les options d’analyse de l’extension principale Query Monitor. Cependant, plusieurs modules tiers peuvent \u00e9tendre davantage Query Monitor.<\/p>\n Ils peuvent ajouter la prise en charge de technologies de performance sp\u00e9cifiques, telles que Memcached et Redis<\/a>, ainsi que d’extensions WordPress sp\u00e9cifiques, telles que WooCommerce<\/a> ou GiveWP<\/a>.<\/p>\n Query Monitor prend \u00e9galement en charge tous les modules de l’extension Debug Bar<\/a>, qui ajoute des int\u00e9grations pour ElasticPress<\/a>, Elementor<\/a>, Cache Lookup, et bien d’autres.<\/p>\n Vous pouvez voir une liste compl\u00e8te des modules de Query Monitor sur cette page GitHub<\/a>.<\/p>\n Bien que Query Monitor soit un outil gratuit tr\u00e8s pratique pour d\u00e9boguer les performances de WordPress, il ne couvre pas tout. Il existe d’autres outils utiles que vous devriez consid\u00e9rer pour analyser diff\u00e9rents domaines de performance de WordPress.<\/p>\n Si vous h\u00e9bergez votre site chez Kinsta<\/a>, vous obtenez un acc\u00e8s gratuit \u00e0 l’outil Kinsta Application Performance Monitoring (APM)<\/a>.<\/p>\n Un outil APM<\/a> comme Kinsta APM va encore plus loin<\/a> que Query Monitor avec les types d’analyses suivants :<\/p>\n Vous pouvez \u00e9galement voir comment ces informations \u00e9voluent dans le temps, ce que Query Monitor ne peut pas faire. De plus, vous pouvez analyser l’ensemble de votre site plut\u00f4t que de proc\u00e9der page par page.<\/p>\n Pour un tutoriel g\u00e9n\u00e9ral, vous pouvez suivre notre guide Kinsta APM<\/a>.<\/p>\n Nous avons \u00e9galement des guides sp\u00e9cifiques sur l’utilisation d’APM pour optimiser les sites WordPress gourmands en ressources :<\/p>\n New Relic<\/a> est un autre outil utile de surveillance des performances similaire \u00e0 Kinsta APM.<\/p>\n Si vous n’\u00eates pas h\u00e9berg\u00e9 chez Kinsta, il peut \u00eatre un excellent moyen d’acc\u00e9der \u00e0 des types d’analyses similaires. M\u00eame si vous \u00eates h\u00e9berg\u00e9 chez Kinsta, vous pouvez toujours activer le suivi de New Relic<\/a> si n\u00e9cessaire, bien que vous deviez avoir votre propre licence.<\/p>\n Pour apprendre \u00e0 utiliser New Relic, vous pouvez suivre notre tutoriel sur les performances de New Relic<\/a>.<\/p>\n Nous l’avons mentionn\u00e9 pr\u00e9c\u00e9demment en parlant de l’analyse de la cascade, mais un bon outil de test de vitesse peut \u00eatre inestimable pour d\u00e9boguer ce que<\/em> votre site charge et comment<\/em> il se charge.<\/p>\n Pour vous aider \u00e0 utiliser l’outil de votre choix, nous avons un guide d\u00e9di\u00e9 sur la bonne fa\u00e7on d’ex\u00e9cuter un test de vitesse<\/a>. Nous avons \u00e9galement des articles consacr\u00e9s \u00e0 certains des outils les plus populaires :<\/p>\n WordPress comprend son propre mode de d\u00e9bogage int\u00e9gr\u00e9 pour voir toutes les erreurs, avis et avertissements PHP. Vous avez \u00e9galement la possibilit\u00e9 d’enregistrer ces probl\u00e8mes dans un fichier journal.<\/p>\n Pour plus de d\u00e9tails, consultez notre guide complet du mode de d\u00e9bogage de WordPress<\/a>.<\/p>\n Chrome inclut des outils de d\u00e9veloppement tr\u00e8s d\u00e9taill\u00e9s qui peuvent vous aider \u00e0 d\u00e9boguer les performances de votre site, comme le font certains autres navigateurs<\/a>.<\/p>\n Par exemple, l’onglet R\u00e9seau<\/strong> vous permet d’afficher les temps de chaque requ\u00eate HTTP sur votre site, ainsi qu’une analyse en cascade. L’onglet Performance<\/strong> vous donne une analyse tr\u00e8s d\u00e9taill\u00e9e des performances.<\/p>\n Vous pouvez \u00e9galement ex\u00e9cuter des audits Lighthouse \u00e0 partir de l’onglet Lighthouse <\/strong>. Il s’agit du m\u00eame algorithme de test de performance<\/a> que celui utilis\u00e9 par PageSpeed Insights<\/a>.<\/p>\nQue fait Query Monitor ?<\/h2>\n
\n
Comment utiliser Query Monitor pour d\u00e9boguer WordPress et am\u00e9liorer ses performances<\/h2>\n
Une introduction \u00e0 l’interface de Query Monitor<\/h3>\n
\n
Aper\u00e7u<\/h3>\n
Requ\u00eates<\/h3>\n
\n
\n
Requ\u00eates dupliqu\u00e9es<\/h4>\n
Requ\u00eates par appelant<\/h4>\n
Requ\u00eates par composant<\/h4>\n
Lisez ceci si vous ne voyez pas les requ\u00eates par composant<\/h4>\n
\n
Journaux<\/h3>\n
do_action( 'qm\/debug', 'This happened!' );<\/code><\/p>\n\n
Requ\u00eate<\/h3>\n
Blocs<\/h3>\n
Mod\u00e8le<\/h3>\n
\u00c9cran d’administration<\/h3>\n
Scripts<\/h3>\n
\n
Styles<\/h3>\n
\n
Hooks et actions<\/h3>\n
Langues<\/h3>\n
Appels d’API HTTP<\/h3>\n
V\u00e9rifications des capacit\u00e9s<\/h3>\n
define( 'QM_ENABLE_CAPS_PANEL', true );<\/code><\/p>\nEnvironnement<\/h3>\n
\n
Conditionnels<\/h3>\n
Comment afficher les informations de Query Monitor en tant qu’utilisateur non-administrateur<\/h3>\n
Comment \u00e9tendre Query Monitor avec des modules<\/h3>\n
Autres outils utiles pour d\u00e9boguer et am\u00e9liorer les performances de WordPress<\/h2>\n
Kinsta APM (Application Performance Monitoring)<\/h3>\n
\n
\n
New Relic<\/h3>\n
Un outil de test de vitesse de qualit\u00e9<\/h3>\n
\n
Mode de d\u00e9bogage de WordPress<\/h3>\n
Outils de d\u00e9veloppement du navigateur web<\/h3>\n