ESI permet de mettre en cache des pages WordPress tout en laissant certains fragments dynamiques être générés séparément. Avec LiteSpeed Cache, ESI s’utilise principalement via des shortcodes, ce qui le rend compatible avec Elementor, à condition de comprendre à quel moment le cache intervient.
Prérequis pour utiliser ESI avec LiteSpeed Cache
ESI ne fonctionne pas de manière isolée. Il s’appuie obligatoirement sur le cache de pages de LiteSpeed. Avant de chercher à l’utiliser, certaines conditions doivent être réunies.
Votre site doit utiliser WordPress avec le plugin LiteSpeed Cache installé, le cache de pages doit être actif et la fonctionnalité ESI doit être explicitement activée dans LiteSpeed Cache → Cache → ESI → Activer ESI.
Un éditeur de contenu comme Elementor est parfaitement compatible, mais il est important de comprendre que cela impose certaines contraintes techniques, que nous verrons plus loin.
Le problème : du contenu dynamique sur une page mise en cache
Prenons un exemple simple qui servira de fil conducteur tout au long de l’article. Vous avez une page d’accueil construite avec Elementor, entièrement mise en cache, qui affiche un message personnalisé.
Si l’utilisateur n’est pas connecté, le message affiche “Bonjour visiteur”. S’il est connecté, le message affiche “Bonjour Lucas” (ou le nom de l’utilisateur).
Le problème est classique : lorsqu’une page est mise en cache, le premier affichage génère une version HTML figée. Tous les visiteurs suivants reçoivent exactement ce même HTML, y compris les données censées être personnalisées.
Désactiver le cache pour toute la page réglerait le problème, mais ce serait une très mauvaise décision en termes de performances. C’est précisément dans ce contexte que ESI devient pertinent.
Qu’est-ce que ESI et à quoi ça sert concrètement ?
ESI permet de découper une page mise en cache en plusieurs fragments indépendants. La page principale reste entièrement en cache, mais certains éléments sont chargés séparément, avec leurs propres règles de cache.
Dans notre exemple, la page d’accueil reste mise en cache, mais le message “Bonjour X” devient un fragment ESI. Chaque visiteur obtient alors sa propre version de ce fragment, sans invalider le cache global de la page.
Il est important de comprendre que ESI n’est ni du JavaScript, ni une option de chargement en temps réel, ni une solution universelle pour tout contenu dynamique. C’est un outil de précision, conçu pour des cas bien spécifiques.
Quand utiliser ESI (et quand ne pas l’utiliser)
ESI est particulièrement utile lorsque la page est majoritairement statique, mais qu’elle contient un ou deux éléments personnalisés liés à l’utilisateur ou à son état de connexion.
Un message de bienvenue personnalisé, un lien “Mon compte” ou une information utilisateur simple sont de très bons candidats. Dans ces cas-là, bloquer tout le cache de la page serait disproportionné.
En revanche, ESI n’est généralement pas nécessaire pour les widgets WooCommerce standards comme le mini-panier ou l’état du stock, car LiteSpeed Cache les gère automatiquement. Il n’est pas non plus adapté aux contenus nécessitant une mise à jour instantanée.
Comment utiliser ESI avec LiteSpeed Cache sur WordPress
Sur WordPress, et encore plus avec Elementor, la méthode la plus fiable pour utiliser ESI repose sur les shortcodes ESI.
La syntaxe générale est la suivante :
[esi nom_du_shortcode cache="private" ttl="3600"]Le paramètre cache="private" indique que le contenu est spécifique à chaque utilisateur, tandis que cache="public" permet de partager le fragment entre plusieurs visiteurs. Le paramètre ttl définit la durée de vie du fragment ESI en secondes.
Exemple concret : message de bienvenue personnalisé
Voici un exemple simple de shortcode PHP permettant d’afficher un message différent selon que l’utilisateur est connecté ou non, avec l’heure pour visualiser le recalcul.
function message_bienvenue_esi() {
if ( is_user_logged_in() ) {
$user = wp_get_current_user();
return 'Bonjour ' . esc_html( $user->display_name ) . ' – ' . date('H:i:s');
}
return 'Bonjour visiteur – ' . date('H:i:s');
}
add_shortcode( 'message_bienvenue', 'message_bienvenue_esi' );
[esi message_bienvenue cache="private" ttl="300"]. La page reste mise en cache, mais le message est personnalisé par utilisateur et recalculé uniquement lorsque le TTL expire.Pourquoi Elementor pose souvent problème avec le cache
Les balises dynamiques d’Elementor, comme l’affichage du nom de l’utilisateur, injectent directement la valeur calculée dans le HTML final.
Lorsque cette page est mise en cache, la première valeur calculée devient la valeur de référence, et elle est servie à tous les utilisateurs suivants. Ce n’est pas un bug, mais le fonctionnement normal d’un cache de pages.
Avec ESI, le calcul PHP est exécuté hors du cache principal. Elementor se contente alors d’afficher un conteneur, et LiteSpeed se charge de gérer dynamiquement le fragment.
Pourquoi seules certaines syntaxes ESI fonctionnent avec Elementor
LiteSpeed Cache propose plusieurs syntaxes ESI, mais dans le contexte d’un éditeur visuel comme Elementor, seuls les shortcodes ESI sont réellement fiables.
[esi]...[/esi] ou [litespeed_esi]...[/litespeed_esi] ne sont pas interprétées correctement, car Elementor génère le HTML avant que LiteSpeed ne puisse analyser ces marqueurs.Donc, avec Elementor, ESI doit être utilisé de préférence via des shortcodes. Il serait certainement possible de développer des widgets personnalisés, mais à ce jour, aucun développeur n’a partagé de méthode fiable compatible à la fois avec Elementor et LiteSpeed Cache.
ESI, performances et durée de cache
Un fragment ESI est calculé lors de son premier affichage, puis stocké dans son propre cache. Il n’est recalculé que lorsque son TTL expire.
Un TTL très court, comme 3 secondes, a peu d’intérêt. En pratique, des durées de 5 à 30 minutes offrent un excellent compromis entre personnalisation et performances.
Dans notre exemple, le nom de l’utilisateur change rarement. L’heure est volontairement affichée pour démontrer le recalcul, pas pour un usage réel.
Conclusion : utiliser ESI avec LiteSpeed Cache et Elementor intelligemment
ESI n’est ni complexe ni magique. C’est un outil de précision qui permet de conserver un cache de pages performant tout en affichant du contenu personnalisé.
Sur un site WordPress utilisant LiteSpeed Cache et Elementor, il permet d’éviter les pièges classiques du cache, à condition d’éviter les balises dynamiques pour les données utilisateur et de s’appuyer sur des shortcodes ESI bien configurés.
C’est précisément ce genre de réglage qui fait la différence entre un site simplement fonctionnel et un site réellement optimisé.
Vous avez besoin d’un coup de main pour intégrer ESI sur votre site wordpress ? Faites appel à mes services pour correctement résoudre vos soucis de cache, que vous utilisiez litespeed ou une autre technologie.
Qu’est-ce qu’un fragment ESI sur WordPress ?
Un fragment ESI est une portion de page mise en cache séparément du reste du contenu. Cela permet d’afficher des éléments dynamiques personnalisés pour chaque utilisateur sans invalider le cache global de la page.
Quand dois-je utiliser ESI ?
ESI est utile lorsqu’une page est majoritairement statique mais contient des éléments dynamiques personnalisés, comme un message de bienvenue avec le nom de l’utilisateur, tout en conservant la performance du cache.
Puis-je utiliser ESI pour tous les widgets Elementor ?
Non. ESI fonctionne principalement via des shortcodes. Les widgets Elementor avec des balises dynamiques intégrées peuvent ne pas fonctionner correctement avec ESI sans adaptation.
Quelle est la différence entre un cache “public” et un cache “private” pour un fragment ESI ?
Un fragment public est partagé entre tous les visiteurs, tandis qu’un fragment privé est spécifique à chaque utilisateur et recalculé selon le TTL défini.
ESI remplace-t-il totalement le cache de pages ?
Non. ESI complète le cache de pages. La page principale reste mise en cache, mais les fragments dynamiques sont calculés séparément pour chaque utilisateur ou contexte.
