Créer des Requêtes Ajax avec Cache Statique & Mise à jour à Intervalle Régulier sur WordPress

Les projets web complexes requièrent souvent d’afficher des modules avec des traitements lourds: Appels API, multiple requêtes dans la base de données etc… Si il est nécessaire de régulièrement rafraîchir les données avant de les afficher aux visiteurs, alors ces modules vont inévitablement poser des problèmes de performance.

Dans ce tutoriel nous allons optimiser l’impact de ces modules en créant un système de cache indépendant, avec des requêtes Ajax dynamiques & ciblées.

Introduction & Concept

Bien que ce tutoriel pourrait s’appliquer à des pages entières, nous allons ici nous concentrer sur la gestion par « modules », dans les pages. Le cache statique global sera délégué aux extensions de cache traditionnelles: WP Super Cache, W3TC ou encore WP Rocket.

Notre système de Cache Ajax va nous permettre d’afficher un module avec des informations actualisées toutes les X minutes. Lorsqu’un visiteur atterri sur une page, le module affichera sa dernière version HTML en cache. Si cette version est expirée (+X minutes), le cache sera tout de même affiché, mais une requête Ajax actualisera le contenu du module afin de le remplacer par une version plus récente.

Le prochain visiteur affichera directement le nouveau fichier cache, sans requête et sans appel Ajax. Cette méthode nous permet de drastiquement optimiser les requêtes effectuées par le serveur, tout en gardant un affichage à jour et indépendamment des règles de cache de nos autres plugins.

Configuration simple

Pour chacun de nos modules, nous allons enregistrer une configuration avec des paramètres. La configuration ci-dessous aura pour effet:

• id: Cette configuration sera identifiable par l’id 'hwk_ajax_heavy_query'.
• template: Le fichier de traitement lourd est templates/modules/module-heavy.php.
• cache: Le fichier de cache est templates/modules/cache/module-heavy.html.
• interval: Le fichier de cache sera actualisé via Ajax, toutes les 15 minutes.
• flush: A chaque mise à jour du cache via Ajax, vider le cache de la page qui appel cette configuration.

View the code on Gist.

Configuration avancée

Cette nouvelle configuration sera appelée sur une page single d’un post_type. Nous souhaitons que le module fasse un traitement spécifique en fonction du post_id en cours. Par conséquent, chaque fichier de cache doit avoir son propre post_id. Nous définissons donc les arguments cache et param de la manière suivante:

• id: Cette configuration sera identifiable par l’id 'hwk_ajax_heavy_query_post'.
• template: Le fichier de traitement lourd est templates/modules/module-heavy-post.php.
• cache: Le fichier de cache est templates/modules/cache/module-heavy-post-%param%.html.
• param: Variable dynamique exécuté sur page qui appel le module. Ici, get_the_ID() remplacera le terme %param% du fichier de cache.

View the code on Gist.

Affichage du Template

Désormais, nous pouvons appeler les configurations 'hwk_ajax_heavy_query' ou 'hwk_ajax_heavy_query_post' directement dans notre Template de page:

View the code on Gist.

Exemple de Module de Traitement

Ce fichier correspond à notre module templates/modules/module-heavy.php:

View the code on Gist.

Définition des fonctions

View the code on Gist.

Script Javascript

View the code on Gist.