L’outil APM de Kinsta est un outil puissant pour dépanner votre site web. Cet article vous emmènera à travers quelques scénarios différents pour dépanner les problèmes de performance sur un site en utilisant l’outil APM pour enquêter et analyser les problèmes.

Si vous n’êtes pas familier avec les paramètres et la terminologie de l’outil APM, consultez notre guide sur l’utilisation de l’outil APM de Kinsta.

Mise en route

Avant de plonger plus profondément dans l’utilisation de l’outil APM pour dépanner un problème, il y a quelques étapes que vous devrez suivre, quel que soit le problème :

  1. Assurez-vous que vous pouvez recréer le problème s’il ne se produit pas actuellement. Recherchez des modèles de moments où le problème se produit ou si des actions spécifiques semblent déclencher le problème (par exemple, la modification d’une page, l’ajout d’un produit à un panier de eCommerce, le téléchargement d’images, etc.)
  2. Activez Kinsta APM et donnez-lui quelques minutes pour commencer à collecter des données. L’outil APM ne peut enregistrer et analyser les données que lorsqu’il est activé.
  3. Une fois que l’outil APM commence à collecter des données, recréez le problème pour enregistrer les informations nécessaires.
  4. Si Redis est activé sur votre site, veillez à utiliser l’extension WP Redis ou Redis Object Cache (mais pas les deux). Il se peut que nous ne puissions pas collecter et afficher les données Redis d’autres extensions dans l’outil APM de Kinsta.

Analysez les pages ou les actions qui se chargent lentement

Dans cet exemple, les pages se chargent rapidement, mais tout ralentit lorsqu’on ajoute un produit au panier, qu’il s’agisse d’un produit simple ou variable.

Après avoir ajouté quelques produits au panier, nous jetons un coup d’œil aux résultats de surveillance dans Kinsta APM (Sites > Nom de site > Kinsta APM) et nous voyons que la transaction /single-product est en haut de la liste des transactions les plus lentes, avec une durée maximale de plus de 5 secondes et une durée moyenne de plus de 2 secondes.

Sélectionnez la transaction mono-produit en haut de la liste des transactions les plus lentes dans APM.
Sélectionnez la transaction mono-produit en haut de la liste des transactions les plus lentes dans APM.

Cliquer sur cette transaction ouvre la modale/popup Échantillons de transaction où nous pouvons sélectionner la transaction la plus lente (la première de la liste) pour voir plus de détails.

Sélectionnez l'échantillon le plus lent dans la liste des échantillons de transaction.
Sélectionnez l’échantillon le plus lent dans la liste des échantillons de transaction.

Cela nous amène à la chronologie de la trace de la transaction, où nous pouvons trier les transactions par Durée (temps) pour voir quels processus de cet échantillon de transaction sont les plus lents. Ici, nous pouvons voir que le span update_card_payment est le processus le plus lent dans la chronologie, prenant 5 002,21 ms d’une transaction de 5 535,61 ms.

Le span update_card_payment occupe 5 002,21 ms de la transaction.
Le span update_card_payment occupe 5 002,21 ms de la transaction.

Cliquer sur ce span ouvre la modale/popup des détails du span et inclut la trace de la pile du span.

Voir les détails du span, y compris la trace de la pile.
Voir les détails du span, y compris la trace de la pile.

Nous pouvons voir que le hook WordPress action:woocommerce_add_to_cart est associé à ce span dans les détails du span.

Il existe plusieurs façons de déterminer à quel plugin ou thème il est associé.

Si vous êtes à l’aise avec la ligne de commande, vous pouvez utiliser la commande grep pour rechercher la fonction update_card_payment et voir quels fichiers d’extension ou de thème contiennent cette fonction.

Vous pouvez également consulter l’onglet WordPress sous Résultats de surveillance et rechercher une extension dont la durée totale et la durée maximale sont similaires. Elle sera très probablement en haut de la liste.

Voir les extensions WordPress les plus lentes sur l'onglet WordPress dans Résultats de surveillance.
Voir les extensions WordPress les plus lentes sur l’onglet WordPress dans Résultats de surveillance.

Vous pouvez confirmer la correspondance en sélectionnant l’extension dans la liste des extensions WordPress les plus lentes. Si l’extension n’est pas répertoriée dans la colonne des extensions WordPress dans la modale/popup des échantillons de transaction, sélectionnez l’échantillon de transaction le plus lent pour afficher la chronologie de la trace de la transaction.

Sélectionnez l'échantillon de transaction le plus lent pour afficher la chronologie des transactions.
Sélectionnez l’échantillon de transaction le plus lent pour afficher la chronologie des transactions.

Triez la ligne de temps par Durée et recherchez le même nom de fonction (par exemple, update_card_payment) pour qu’il soit en haut ou près du haut de la liste une fois trié.

Triez la timeline par Durée et recherchez le nom de la fonction dans la colonne Spans.
Triez la timeline par Durée et recherchez le nom de la fonction dans la colonne Spans.

Examinez la lenteur globale

La lenteur générale d’un site est souvent due à une extension et c’est l’un des premiers endroits que vous voudrez vérifier. Si une extension est à l’origine de la lenteur de votre site, cela peut généralement être identifié en consultant l’onglet WordPress (Sites > Nom du site > APM > WordPress). Dans la capture d’écran ci-dessous, notez que le pourcentage de durée totale de l’extension mise en évidence est supérieur à 98 %, et que les durées maximale et moyenne sont assez élevées.

Afficher le pourcentage de durée totale, la durée maximale et la durée moyenne d'une extension.
Afficher le pourcentage de durée totale, la durée maximale et la durée moyenne d’une extension.

Cela indique que cette extension est la source la plus probable de la lenteur générale du site. Pour le confirmer, nous pouvons désactiver l’extension, observer les performances du site, et vérifier à nouveau les résultats dans l’outil APM après avoir collecté suffisamment de données. Si vous êtes sûr que l’extension est configurée correctement mais qu’elle continue à causer de la lenteur sur votre site, nous vous recommandons de contacter le développeur de l’extension pour travailler avec lui à la résolution du problème.

Repérer les problèmes intermittents de tierces parties

Les requêtes externes sont des requêtes HTTP faites par le site à un autre serveur (tiers). Les extensions ou les thèmes font généralement ces requêtes pour charger des scripts ou des feuilles de style ou pour communiquer avec une API.

Lors du dépannage d’un éventuel problème externe, il est important de noter que l’outil APM enregistre les transactions externes lentes du côté du serveur. De nombreuses requêtes externes peuvent être effectuées à partir d’un site du côté client, qui ne seraient pas enregistrées dans l’outil APM. Pour étudier les requêtes externes du côté client, vous devrez utiliser un outil comme GTmetrix ou les outils de développement de votre navigateur.

Pour afficher les requêtes externes lentes, allez dans l’onglet Externe sous Résultats de surveillance pour afficher les requêtes externes les plus lentes. Dans cet exemple, nous avons remarqué une certaine lenteur lors du téléversement d’images dans la médiathèque, certains téléversements prenant 5 minutes ou plus pour se terminer.

Nous commençons par regarder à quoi ressemblent les requêtes externes lorsque nous ne faisons rien d’autre que de nous connecter au tableau de bord de WordPress. Avant le téléversement des images dans la médiathèque, les requêtes POST à wp-cron sont les requêtes les plus lentes, avec une durée maximale de 273,78 ms et une durée totale de 1 957,81 ms.

Requêtes externes les plus lentes dans APM.
Requêtes externes les plus lentes dans APM.

Lorsque nous téléverseons plusieurs images dont la taille varie de 3 Mo à 17 Mo, il faut plusieurs minutes pour que celles-ci finissent de se téléverser. En regardant à nouveau les requêtes externes, nous voyons que les requêtes POST vers smushpro.wpmudev.com sont les requêtes externes les plus lentes, avec une durée maximale de 1 703,14 ms et une durée totale de 82 710,85 ms.

Mise à jour des requêtes externes les plus lentes après le téléversement et l'optimisation des images.
Mise à jour des requêtes externes les plus lentes après le téléversement et l’optimisation des images.

Cliquer sur cette transaction ouvre la modale/popup Echantillons de transaction où nous pouvons sélectionner la transaction la plus lente (la première de la liste) pour voir plus de détails.

Sélectionner l'échantillon de transaction le plus lent dans les requêtes externes.
Sélectionner l’échantillon de transaction le plus lent dans les requêtes externes.

Cela nous amène à la chronologie de la trace de la transaction, où nous pouvons trier les transactions par Durée (temps) pour voir quelles sont les travées les plus lentes. Ici, nous pouvons voir que plusieurs demandes POST à smushpro.wpmudev.com sont les plus lentes dans cet échantillon, le total de ces demandes POST prenant 6 712,64 ms d’une transaction de 7 168,58 ms.

Affichage de toutes les requêtes à smushpro.wpmudev.com dans une chronologie de traces de transactions.
Affichage de toutes les requêtes à smushpro.wpmudev.com dans une chronologie de traces de transactions.

Nous pouvons également observer que la durée de chaque requête varie considérablement, la requête la plus courte ne prenant que 138,2 ms et la plus longue 1 703,14 ms. Ainsi, pendant que l’extension Smush optimise nos images, chacune de ces images génère une requête externe, ce qui s’ajoute et peut ralentir le site.

Dans ce cas, optimiser nos images avant de les téléverser au lieu de s’appuyer sur une extension pour l’optimisation des images réduirait considérablement nos requêtes externes. C’est l’un de ces cas où nous devrons décider ce qui est le plus important, la commodité ou les performances du site. Nous pouvons conserver l’extension si nous sommes d’accord avec la lenteur nécessaire causée par les requêtes externes. Si nous préférons ou devons améliorer les performances de notre site, la suppression de l’extension et l’optimisation de nos images avant le téléversement seront notre meilleure option.

Résumé

En utilisant les stratégies des exemples ci-dessus, vous pouvez utiliser l’outil APM de Kinsta pour déboguer les problèmes de performance sur votre site. Chaque situation et site est différent, mais vous pouvez appliquer les méthodes générales de dépannage ici pour vous aider, vous ou votre développeur, à traquer les problèmes de performance sur votre site.