Qu'est-ce qu'AJAX et comment l'utiliser dans WordPress (un guide étape par étape)

AJAX est une technologie populaire utilisée dans le développement de sites Web qui vous permet de récupérer des données à partir du backend et d'actualiser la vue sans avoir à recharger la page Web. Par conséquent, cela vous aide à améliorer l'interactivité, la vitesse et la convivialité de votre site Web. AJAX est fonctionnel chaque fois que vous effectuez des actions telles que laisser un commentaire ou publier un tweet.

Dans cet article, je vais vous dire ce qu'est AJAX et comment utiliser AJAX dans WordPress (également connu sous le nom de WP AJAX). Lisons la suite !

Qu'est-ce qu'AJAX ?

AJAX signifie Asynchronous JavaScript And XML, une technologie qui vous permet de faire des requêtes au serveur de manière asynchrone et d'apporter des modifications à nos pages sans avoir à les recharger. Le script AJAX demande au serveur de renvoyer certaines données, puis modifie les pages Web avec les données obtenues.

Par exemple , imaginez un menu déroulant où vous sélectionnez votre date de rendez-vous, et une autre liste déroulante vous montre dynamiquement les heures disponibles à réserver. Par le biais d'un script, il a été demandé au serveur les heures disponibles pour la sélection de la liste déroulante des soins.

Comment fonctionne AJAX ?

La mission d'AJAX est de servir de pont entre votre site Web et le serveur. Le cœur de cette technologie asynchrone est l'objet XMLHttpRequest, qui permet l'échange de données. Voici les étapes de base pour passer un appel AJAX :

– Source : W3Schools

• Spécifiez les informations à envoyer
• Configurer l'appel
• Utilisez l'objet XMLHttpRequest pour envoyer les données
• Recevoir et traiter la réponse du serveur

La bonne chose est que ce processus peut être simplifié en utilisant la bibliothèque jQuery.

Comment utiliser AJAX dans WordPress ?

WordPress supporte nativement AJAX. Vous pouvez voir "admin-ajax.php" dans le dossier wp-admin.

Il a été initialement créé pour toutes les fonctions qui effectuent des requêtes AJAX à partir de l'administrateur WordPress. Il est également utilisé pour la partie publique du Web.

Toutes les requêtes WordPress AJAX doivent passer par un script PHP. En d'autres termes, admin-ajax.php devrait être le fichier PHP par lequel une action qui renvoie du contenu est appelée.

En 2013, WordPress a introduit l'API WordPress Heartbeat qui fournissait plusieurs fonctionnalités importantes, telles que la fonction d'enregistrement automatique, l'expiration de la connexion et l'avertissement de verrouillage de publication pendant qu'un autre utilisateur rédige ou modifie un article WordPress.

Deux fonctionnalités très importantes de l'API Heartbeat sont :

1. Sauvegarde automatique

Lorsque vous enregistrez un brouillon d'un article ou continuez à travailler dessus, WordPress enregistre automatiquement les modifications. Il existe une nette différence entre la sauvegarde automatique et la sauvegarde manuelle du brouillon. Consultez la capture d'écran suivante qui montre les deux types de sauvegarde :

– Sauvegarde automatique dans WordPress

2. Poste de verrouillage

Lorsque vous essayez de modifier un message sur lequel un autre utilisateur travaille déjà, un avertissement contextuel sur la situation apparaîtra. Il y a trois actions visibles pour vous.

– Post Lock dans WordPress

Les fonctionnalités mentionnées ci-dessus sont rendues possibles grâce à l'API WordPress Heartbeat qui crée une connexion entre le serveur et le navigateur pour une communication et des réponses appropriées.

L'API WordPress Heartbeat génère des demandes de communication avec le serveur et déclenche des événements lors de la réception de données/réponses. Cela augmente généralement la charge sur le serveur et finit par ralentir l'administrateur WordPress.

Un exemple vivant

Je me connecte à mon tableau de bord WordPress et commence à rédiger un article. Ensuite, je laisse l'onglet ouvert pendant plusieurs minutes et commence à parcourir d'autres onglets. Le tableau de bord est toujours connecté et vous pouvez voir qu'admin-ajax envoie continuellement des demandes.

– admin-ajax.php Envoi de requêtes au serveur

Selon le ticket mentionné ci-dessus, admin-ajax.php dans WordPress génère des requêtes toutes les 15 secondes. La demande peut être n'importe quelle communication avec le serveur.

Comment les plugins surchargent admin-ajax.php ?

La plupart des problèmes dans admin-ajax.php dans WordPress peuvent être attribués aux requêtes faites par les plugins installés. Ces plugins ralentissent l'administrateur WordPress en envoyant des demandes pour atteindre une certaine fonctionnalité, comme lancer une fenêtre contextuelle ou mettre à jour un compteur de partage social.

Cela dit, les requêtes n'augmenteront pas nécessairement le fichier admin-ajax.php. Si les demandes sont traitées correctement et que les développeurs de plugins suivent les meilleures pratiques en utilisant les appels AJAX dans leurs plugins, le fichier admin-ajax.php ira très bien. Par conséquent, il est également important de diagnostiquer tout plugin avant de le désactiver.

Comment diagnostiquer un plugin dans WordPress ?

Il est important de bien diagnostiquer le plugin afin d'identifier son impact sur le fichier admin-ajax.php, qui peut éventuellement ralentir l'administration de WordPress. Pour ce faire, nous utiliserons deux outils : GTmetrix et WebPageTest.

Dans le cas de GTmetrix, accédez à son onglet Waterfall pour obtenir une liste complète des demandes. En regardant attentivement la liste, vous pouvez voir les requêtes POST effectuées par le fichier admin-ajax.php.

– Diagnostic des plugins dans WordPress

Dans mon cas, ces requêtes ont été principalement faites par un plugin de partage social. Ce plugin particulier envoie une requête ajax aux comptes de médias sociaux via l'API toutes les 15 secondes pour récupérer un nombre de partages mis à jour.

Développez l'onglet pour des informations détaillées. L'onglet de réponse indique l'endroit exact qui déclenche ces demandes.

Chrome est livré avec des outils de développement qui peuvent aider à analyser les demandes faites par divers plugins. Pour vérifier cela, ouvrez le site Web dans Chrome, cliquez sur CTRL + Maj + I, puis cliquez sur l'onglet Réseau.

– Requêtes admix-ajax.php dans Chrome

Rechargez la page et voyez la liste se remplir avec les demandes mises à jour. Dans la zone de filtre, tapez ajax ou admin-ajax pour filtrer les fichiers requis. Cela vous donne un aperçu du nombre de demandes ainsi que de leur fréquence et de la source de la demande.

Ensuite, cliquez sur le fichier pour voir plus d'informations. Dans l'onglet de réponse, il vous donne un indice du plugin à l'origine de cette demande. Dans mon cas, cette fois, il a été déclenché par le plugin WP Popular (WPP), un plugin qui met en évidence le message le plus populaire sur une période de temps spécifique.

Pour éviter cela, assurez-vous que le plugin que vous utilisez est mis à jour. Si ce n'est pas le cas, essayez d'ouvrir un ticket d'assistance afin que ses développeurs puissent résoudre le problème. Si possible, vous pouvez également le remplacer par un autre plugin mis à jour et ne surchargeant pas le fichier admin-ajax.php.

Effectuer un diagnostic approfondi est important avant de se débarrasser de tout plugin, car certains plugins sont essentiels pour votre site WordPress. Ces outils peuvent vous aider à trouver la cause première et à choisir la meilleure solution possible pour y remédier.

Dans la section suivante, nous verrons comment réduire ces requêtes et éviter que le fichier admin-ajax.php ne soit surchargé.

Accélérez le tableau de bord WordPress

Pour accélérer le backend WordPress, la meilleure pratique consiste à désactiver l'API Heartbeat, ou au moins à définir un intervalle de temps plus long afin qu'il n'atteigne pas le serveur toutes les quelques secondes.

Installer le plug-in de l'API Heartbeat

Connectez-vous à votre tableau de bord d'administration WordPress. Accédez à Plugins → Ajouter un nouveau → recherchez Breeze → Installez-le et activez-le.

– Installer Breeze dans WordPress

Configurer le plug-in Breeze

Accédez à Paramètres → Breeze → API Heartbeat. Vous y trouverez 4 options différentes pour configurer le Heartbeat.

1. Control Heartbeat : Vous pouvez basculer le bouton pour activer ou désactiver l'API Heartbeat pour votre Backend, Post Editor et Frontend.
2. Heartbeat Frontend : cela vous permettra de changer le comportement de votre Frontend ou de le désactiver complètement.
3. Heartbeat Post Editor : cela vous permettra de modifier le comportement de votre WP Post Editor ou de le désactiver complètement.
4. Heartbeat Backend : cela vous permettra de changer le comportement de votre Backend ou de le désactiver complètement.

- Paramètres de l'API Heartbeat dans Breeze

Créer plusieurs règles

Par défaut, vous obtenez la fréquence par défaut de l'API WordPress Heartbeat, mais vous pouvez créer plusieurs règles en fonction de vos besoins. Par exemple, vous pouvez souhaiter que WordPress Backend (Dashboard) soit déclenché en 2 minutes (120 secondes), mais que Post Editor soit déclenché en 3 minutes (180 secondes). Pour ce faire, vous devez créer deux règles : une pour le tableau de bord WordPress et l'autre pour l'éditeur de publication. Réglez leurs fréquences sur 2 et 3 minutes respectivement.

Détecter les plugins qui utilisent l'API Heartbeat

Maintenant que vous avez tout configuré, il est temps de vérifier quels plugins utilisent le fichier admin-ajax.php et ralentissent le site Web.

Allez sur GTmetrix et entrez l'URL de votre site. Il faudra quelques instants pour analyser le site. Une fois cela fait, accédez à l'onglet Waterfall et vous verrez combien de temps un fichier prend pour se connecter et répondre. Faites défiler un peu et voyez s'il y a une entrée pour POST admin-ajax.php. Si oui, développez-le et accédez à l'onglet Publier. De là, vous pouvez identifier le plugin coupable.

Dans mon cas, le plugin "desktop switch" utilise le fichier admin-ajax.php et envoie en permanence des requêtes au serveur. C'est le moment de prendre une décision; remplacez-le par un autre plugin ou croisez les doigts.

– POST admin-ajax.php

Résumé

Compte tenu de son ensemble de fonctionnalités, l'API Heartbeat est très utile sur votre site WordPress. Cependant, s'il n'est pas utilisé correctement, il peut augmenter le temps de chargement d'un backend WordPress et du front-end en envoyant des requêtes WordPress Ajax vers et depuis.

Il n'y a que deux solutions à ce problème. Vous pouvez désactiver l'API Heartbeat/l'activer dans quelques emplacements seulement - ou - mettre à niveau vers un hébergement géré qui peut gérer la charge des demandes et également réduire le temps de réponse du serveur.

Questions fréquemment posées