Chargement spéculatif : le secret des sites WordPress plus rapides

Sur Internet, la vitesse est primordiale. Les utilisateurs s'attendent à ce que les pages web se chargent instantanément, et même une seconde de délai peut entraîner une hausse du taux de rebond et des pertes de revenus. C'est particulièrement vrai pour les sites WordPress, qui utilisent souvent de nombreux plugins et un contenu volumineux.

Le chargement spéculatif offre une méthode plus intelligente pour accélérer le chargement des sites web en préparant les pages avant même que l'utilisateur ne clique. Au lieu d'attendre une action de l'utilisateur pour récupérer les données, le chargement spéculatif utilise une technologie prédictive pour précharger ou pré-rendre les pages importantes en arrière-plan. Ce guide explique son fonctionnement, comment l'implémenter dans WordPress à l'aide de l' extension Speculative Loading, et pourquoi il suscite un intérêt croissant au sein de la communauté des spécialistes de la performance.

Si vous cherchez à améliorer les performances et à réduire les temps de chargement de votre site WordPress, il s'agit d'une technologie qu'il est intéressant de comprendre.

Introduction rapide au prérendu : hier et aujourd’hui

Pour apprécier le chargement spéculatif, il est utile de connaître l'évolution du prérendu. En 2011, l'équipe Chromium a introduit le<link rel=”prerender”> Cette balise permettait aux navigateurs de charger discrètement des pages entières à l'avance. L'idée était de deviner la page que l'utilisateur allait visiter et de la charger en arrière-plan. Lorsque l'utilisateur cliquait sur ce lien, la page s'affichait instantanément.

Cette fonctionnalité, bien que puissante, présentait des inconvénients. Elle consommait trop de bande passante et de ressources processeur, chargeant parfois des pages que l'utilisateur n'avait jamais consultées. Elle soulevait également des problèmes de confidentialité, notamment sur les appareils partagés. Par conséquent, Chrome l'a remplacée par une méthode plus prudente appelée NoState Prefetch, qui ne chargeait que les ressources de la page sans exécuter de scripts ni afficher la page complète.

Bien que la prélecture NoState ait permis de réduire les charges inutiles, elle ne pouvait toujours pas offrir le même gain de vitesse que le prérendu complet.

Qu'est-ce que l'API Speculation Rules ?

L'API Speculation Rules est une solution moderne conçue pour réintroduire le prérendu, avec un meilleur contrôle, une plus grande flexibilité et moins de risques. Cette API permet aux développeurs de définir un ensemble de règles dans un script JSON. Ces règles indiquent au navigateur quelles pages précharger ou pré-rendre, en fonction du comportement de l'utilisateur et d'autres facteurs.

Par exemple, une configuration JSON de base pour le prérendu ressemble à ceci :

<script type="speculationrules"> { "prerender": [ { "source": "list", "urls": ["about.html", "contact.html"] } ] } </script>

Ce simple script indique au navigateur de pré-générer les URL listées, afin qu'elles se chargent quasi instantanément lorsqu'on clique dessus. Vous pouvez également utiliser le même format pour précharger des pages :

<script type="speculationrules"> { "prefetch": [ { "urls": ["services.html", "pricing.html"] } ] } </script>

Les récentes améliorations permettent désormais l'utilisation de règles basées sur le document, ce qui permet aux navigateurs de sélectionner automatiquement les liens de la page et d'appliquer le chargement spéculatif. Cela réduit la nécessité de lister manuellement les URL et rend l'API plus dynamique. Les règles peuvent être basées sur la correspondance des attributs href, les sélecteurs CSS ou une combinaison des deux, offrant ainsi aux développeurs un contrôle précis sur les liens concernés.

Cette fonctionnalité améliore non seulement la navigation des utilisateurs, mais assure également de meilleures performances WordPress sur les pages publiques.

Comment fonctionne le chargement spéculatif dans WordPress

Dans WordPress, le chargement spéculatif n'est plus réservé aux développeurs. Grâce aux efforts récents de l'équipe Performance de WordPress, cette fonctionnalité est désormais accessible à tous les propriétaires de sites web via l'intégration d'un simple plugin.

Voici comment cela fonctionne : le chargement anticipé permet à votre site web de prédire sur quel lien interne un utilisateur est susceptible de cliquer. Une fois la prédiction effectuée, le navigateur précharge les ressources nécessaires ou pré-rend la page entière discrètement en arrière-plan. Ainsi, lorsque l’utilisateur clique enfin sur ce lien, la page s’affiche instantanément car le navigateur a déjà effectué la majeure partie du travail.

Au cœur de ce processus se trouve l'API Speculation Rules, qui sert de feuille de route aux navigateurs. Elle utilise une structure JSON pour définir les URL à précharger et les conditions de ce préchargement. Sous WordPress, ce mécanisme s'applique aux URL du site, notamment pour les blogs, les pages de boutique ou les fiches de services, où les utilisateurs sont susceptibles de naviguer entre les pages.

Ce qui rend le chargement spéculatif particulièrement puissant, c'est la configuration de l'impatience :

• Immédiatement: Le navigateur charge la page immédiatement.
• Modéré: La page est pré-rendue après que l'utilisateur survole un lien pendant un court instant (généralement 200 ms).
• Mode conservateur: Le navigateur attend une interaction supplémentaire, comme un clic de souris ou un appui sur « Démarrer ».

Cette approche par couches garantit que le chargement spéculatif n'entraîne pas de gaspillage de bande passante tout en améliorant les temps de chargement des pages à fort trafic. La plupart des sites WordPress tirent profit du paramètre modéré, qui offre un bon compromis entre vitesse et efficacité.

Le plugin de chargement spéculatif : installation et configuration

Pour activer le chargement spéculatif sur votre site WordPress sans modifier le code, la solution la plus simple est l'extension Speculative Loading, développée par des contributeurs de Google et de l'équipe WordPress. Cette extension a été conçue pour permettre aux propriétaires de sites d'exploiter les règles de spéculation sans avoir à effectuer de configurations manuelles complexes.

Étapes d'installation :

1. Accédez à votre tableau de bord WordPress.
2. Accédez à Plugins > Ajouter.
3. Recherchez « Chargement spéculatif ».
4. Cliquez sur Installer, puis sur Activer.

Une fois activée, l'extension ajoute un script speculationrules directement au code HTML de votre site. Ce script utilise des règles au niveau du document pour appliquer automatiquement le prérendu aux URL concernées de l'interface publique WordPress.

Par défaut, l'extension utilise un niveau de pré-affichage modéré. Cela signifie qu'elle attend un bref instant que l'utilisateur survole un lien avant de pré-afficher la page de destination. Ce comportement est optimisé pour les performances et garantit qu'il ne surcharge pas les ressources système et ne porte pas atteinte à la confidentialité des utilisateurs.

Vous pouvez gérer les paramètres du plugin en accédant à Paramètres > Lecture dans votre tableau de bord. Vous y trouverez une nouvelle section appelée Chargement spéculatif, où vous pourrez :

• Modifier le mode de spéculation (Préchargement ou Prérendu)
• Afficher ou mettre à jour la configuration par défaut
• Fournir des exclusions conditionnelles pour des URL spécifiques

Par exemple, WordPress exclut automatiquement les chemins tels que /wp-admin/ et /wp-login.php du rendu préalable. Vous pouvez ajouter vos propres exclusions pour les URL comme /checkout/ ou /cart/ à l'aide des filtres WordPress.

Cette configuration mains libres permet même aux non-développeurs d'activer très facilement le prérendu sur leur site et d'améliorer la vitesse des pages fréquemment visitées.

Compatibilité et prise en charge des navigateurs

L'un des aspects les plus intéressants du chargement spéculatif est sa prise en charge native par les navigateurs modernes. L'API Speculation Rules fonctionne en effet nativement dans les navigateurs basés sur Chromium, tels que Google Chrome et Microsoft Edge, à partir de certaines versions.

Si un visiteur utilise un navigateur compatible, le chargement spéculatif s'activera immédiatement et améliorera les performances perçues. Si le navigateur ne le prend pas en charge, votre site fonctionnera normalement. Le chargement spéculatif constitue ainsi une amélioration progressive : il optimise l'expérience utilisateur autant que possible sans jamais perturber le fonctionnement du site.

Ce type de compatibilité est important pour les sites WordPress destinés à un large public. Que vos visiteurs utilisent un navigateur de bureau ou un appareil mobile, le chargement anticipé permet un affichage plus rapide, notamment lors de la navigation rapide entre les pages internes.

Les développeurs peuvent vérifier la compatibilité du navigateur via des outils comme Can I Use, ou en inspectant directement le comportement dans Chrome DevTools sous l'onglet « Chargements spéculatifs ».

Règles et filtres avancés pour les développeurs

Le chargement spéculatif est performant par défaut, mais les développeurs peuvent aller encore plus loin en personnalisant les URL à inclure ou à exclure du prérendu et du préchargement. Ce niveau de contrôle est particulièrement utile pour les boutiques en ligne, les sites d'adhésion ou les applications dynamiques où toutes les pages ne doivent pas être chargées à l'avance.

WordPress rend cela possible grâce à des filtres comme plsr_speculation_rules_href_exclude_paths. Ce filtre permet aux développeurs de définir des exclusions conditionnelles, autorisant uniquement le préchargement de certaines URL en fonction du mode (prérendu ou préchargement), du chemin ou même des paramètres de requête.

Exemple 1 : Exclure les URL du panier

Si vous souhaitez empêcher le chargement spéculatif des pages liées au panier, vous pouvez utiliser l'extrait de code suivant :

ajouter_filtre( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/cart/*'; return $exclude_paths; } );

Cela garantit qu'aucune URL correspondant à /cart/ ou à ses sous-chemins ne sera pré-rendue ou préchargée. Ceci est utile pour éviter une charge serveur inutile ou le déclenchement prématuré d'actions.

Exemple 2 : Autoriser la prélecture mais désactiver le prérendu

Supposons que vous souhaitiez autoriser le préchargement mais empêcher le prérendu des pages produits sensibles. Vous pouvez ajouter une logique pour détecter le mode :

ajouter_filtre( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/products/*'; } return $exclude_paths; }, 10, 2 );

Cela permet aux développeurs de contrôler précisément le comportement de certaines URL du noyau WordPress lors du chargement spéculatif, évitant ainsi les problèmes de confidentialité, protégeant le contenu dynamique et améliorant l'expérience utilisateur.

Vous pouvez également cibler les liens dotés de classes CSS telles que `.no-prefetch` ou `.no-prerender`, selon la configuration de votre interface utilisateur. Par exemple, il est possible d'empêcher le chargement anticipé des liens possédant ces classes en utilisant `selector_matches` dans le fichier JSON des règles de spéculation.

Grâce à ces techniques, les développeurs peuvent s'assurer que le comportement de chargement spéculatif correspond parfaitement aux objectifs de leur site, notamment lorsqu'il s'agit d'utilisateurs connectés, de flux de paiement ou de liens nofollow qui ne doivent pas être préchargés.

Débogage du chargement spéculatif dans les outils de développement Chrome

Une fois le chargement spéculatif activé sur votre site WordPress, il est important de vérifier son bon fonctionnement. Heureusement, les outils de développement de Chrome offrent une solution performante pour inspecter ce comportement directement dans le navigateur.

Pour commencer le débogage, ouvrez votre site dans Chrome et appuyez sur F12 pour lancer les outils de développement. Ensuite :

1. Allez dans l' Application .
2. Faites défiler vers le bas jusqu'à Chargements spéculatifs.
3. Vous verrez une liste d'URL qui ont été chargées de manière spéculative — soit pré-rendues, soit préchargées.

Ce panneau affiche l' état de chaque URL, par exemple :

• Non déclenché (aucune interaction utilisateur pour le moment),
• Déclenché (au survol ou au clic),
• Prérendu, ou
• Préchargé.

Lorsque vous survolez différents liens de votre site, l'onglet « Chargements spéculatifs » se met à jour en temps réel. Vous pouvez ainsi voir quelles URL sont traitées en arrière-plan selon vos règles de spéculation.

Si vous avez activé un niveau de prévisualisation modéré, Chrome ne préaffichera que deux URL à la fois selon le principe du premier entré, premier sorti (FIFO). Cela signifie qu'après avoir survolé trois liens, le troisième risque de ne pas s'afficher si deux autres sont encore actifs.

Vous pouvez également explorer plus en détail les pages prérendues en utilisant :

• Onglet Éléments: Afficher le code HTML du contenu prérendu.
• Onglet Réseau: Afficher les fichiers déjà demandés et mis en cache.
• Console et sources: vérifiez si les scripts sont retardés ou correctement exécutés après activation.

En changeant l' instance de rendu dans le menu déroulant en haut à droite, vous pouvez isoler la page pré-rendue et inspecter son activité réseau ou sa structure DOM comme un onglet actif.

Ce niveau de visibilité aide les développeurs à déboguer les règles de spéculation, à résoudre les problèmes des plugins de chargement spéculatif et à s'assurer que la configuration n'affecte pas le comportement ou les performances des utilisateurs.

Préchargement vs. Prérendu : quelle est la différence ?

Bien que le chargement spéculatif comprenne à la fois la prélecture et le prérendu, ces deux opérations fonctionnent différemment et servent des objectifs distincts.

Préchargement

• Télécharge des ressources telles que HTML, CSS et JavaScript.
• La page ne s'affiche pas.
• Utilisé pour réduire le temps de chargement une fois que l'utilisateur a cliqué.
• Impact réduit sur les ressources système.
• Idéal pour les pages susceptibles d'être visitées mais qui ne doivent pas être exécutées prématurément.

Prérendu

• Charge et affiche la page entière dans un onglet caché.
• La page est entièrement interactive lorsque l'utilisateur navigue.
• Utilise davantage de processeur et de mémoire.
• Idéal pour les liens prioritaires ou les chemins de navigation fréquents.

Par exemple, vous pouvez pré-afficher les URL du frontend WordPress, comme les articles de blog ou les catégories de produits, tout en ne préchargeant que les pages de contact ou d'assistance qui ne nécessitent pas forcément d'interaction immédiate.

Vous pouvez configurer cela dans le plugin Speculative Loading en changeant le mode de spéculation en Prerender ou Prefetch dans le panneau de paramètres du plugin.

Le mode que vous choisirez influencera la rapidité avec laquelle les utilisateurs accèdent au contenu, la quantité de mémoire système utilisée et la perception globale des performances de votre site WordPress.

Les outils de développement de Chrome s'avèrent une fois de plus très utiles. Sous l'onglet « Chargements spéculatifs », vous pourrez constater la différence : les pages prérendues affichent un aperçu complet du DOM, tandis que les pages préchargées apparaissent comme des ressources d'arrière-plan passives.

Comprendre cette distinction permet aux propriétaires et aux développeurs de sites de prendre des décisions plus éclairées en fonction du comportement des utilisateurs, de la bande passante disponible et de l'architecture du site.

Impact de l'API des règles de spéculation sur l'analyse

Bien que le chargement spéculatif puisse améliorer considérablement les temps de chargement des pages et l'expérience utilisateur, il soulève quelques défis en matière de suivi des statistiques du site web.

Lorsqu'une page est pré-rendue, elle se charge en arrière-plan, avant même que l'utilisateur n'y accède. Il peut alors arriver que des outils d'analyse comme Google Analytics, les cartes thermiques ou les traqueurs d'événements enregistrent une visite ou un événement avant même que l'utilisateur n'ait consulté la page ou interagi avec elle.

Pour éviter les faux positifs, les développeurs doivent mettre en œuvre un suivi conditionnel basé sur la navigation réelle de l'utilisateur.

Par exemple, toutes les plateformes d'analyse ne prennent pas en charge la détection du prérendu par défaut. Certaines peuvent enregistrer une page vue lorsque celle-ci se charge en arrière-plan, même si le visiteur ne clique jamais sur le lien. Heureusement, des outils comme Google Analytics, Google Publisher Tag et Google AdSense gèrent déjà ce cas efficacement. Ils retardent le suivi des événements jusqu'à ce que la page pré-rendue soit active.

Toutefois, si vous utilisez des scripts de suivi personnalisés ou des outils tiers, vous devrez ajouter une vérification pour vous assurer que le suivi ne démarre que lorsque la page est active. Ceci est possible grâce à la propriété `document.prerendering` combinée à un écouteur d'événement `prerenderingchange`.

Voici un exemple rapide utilisant JavaScript :

const whenActivated = new Promise((resolve) => { if (document.prerendering) { document.addEventListener('prerenderingchange', resolve); } else { resolve(); } }); async function initAnalytics() { await whenActivated; // Initialisez votre code d'analyse ici } initAnalytics();

Cette approche garantit que vos données marketing reflètent l'interaction réelle des utilisateurs, et non des processus en arrière-plan. Elle est particulièrement importante pour les équipes qui utilisent la surveillance des utilisateurs réels (RUM), les tests A/Bou l'analyse événementielle pour influencer les décisions commerciales.

Que vous utilisiez un plugin de chargement spéculatif, des règles de spéculation personnalisées ou que vous implémentiez manuellement l'API des règles de spéculation, examinez toujours son impact potentiel sur les analyses et ajustez votre suivi en conséquence.

Avec la configuration adéquate, vous bénéficierez du meilleur des deux mondes : des performances plus rapides et des informations précises.

Pièges potentiels : quand désactiver le chargement spéculatif

Bien que le chargement spéculatif soit utile, son activation peut s'avérer contre-productive dans certains cas. Elle peut notamment entraîner des comportements inattendus, voire perturber le fonctionnement du site, en particulier sur les pages dynamiques ou les sites contenant des données sensibles.

Voici quelques situations où vous devriez envisager de désactiver le chargement spéculatif pour certaines URL ou certains rôles d'utilisateur.

1. Utilisateurs connectés et contenu personnalisé

Évitez de pré-générer les pages affichant du contenu personnalisé, comme les tableaux de bord de compte ou les espaces membres. Leur chargement en arrière-plan à l'aide des données de session d'un tiers peut engendrer des confusions, voire exposer des informations sensibles.

Pour éviter cela, vous pouvez exclure complètement les utilisateurs connectés du déclenchement du chargement spéculatif ou filtrer des URL spécifiques avec un contenu basé sur une session à l'aide de PHP.

2. Pages de panier, de paiement et de validation pour le commerce électronique

Excluez les pages telles que /cart/, /checkout/, ou toute URL comportant des paramètres de requête liés à la sélection de produits. Ces pages s'appuient souvent sur des mises à jour en temps réel et peuvent afficher des informations incorrectes si elles sont pré-affichées avant que l'utilisateur ne confirme son choix.

Utilisez le filtre plsr_speculation_rules_href_exclude_paths pour exclure ces pages du chargement spéculatif :

ajouter_filtre( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/checkout/*'; $exclude_paths[] = '/cart/*'; return $exclude_paths; } );

Cela garantit que les URL principales de votre système WordPress sont optimisées uniquement pour les pages où le chargement spéculatif apporte une valeur ajoutée, et non là où il pourrait interférer avec des actions importantes de l'utilisateur.

3. Pages avec état JavaScript côté client

Les pages qui utilisent intensivement JavaScript pour charger des données dynamiquement (comme les tableaux de bord en temps réel, les formulaires ou les systèmes de réservation) ne doivent pas être pré-rendues. L'état de la page risque de devenir obsolète ou de déclencher des événements qui ne devraient s'exécuter qu'après un clic de l'utilisateur.

Si vous souhaitez tout de même précharger ces pages (sans les afficher), utilisez une exclusion conditionnelle qui désactive uniquement le mode de prérendu :

ajouter_filtre( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/live-dashboard/*'; } return $exclude_paths; }, 10, 2 );

4. Exclure l'utilisation des classes CSS

Vous pouvez également empêcher le chargement de certains liens en ajoutant des classes CSS comme `no-prefetch` ou `do-not-prerender`. L'API Speculation Rules vous permet d'utiliser `selector_matches` dans votre configuration JSON :

Ceci est particulièrement utile pour les développeurs de plugins ou les créateurs de thèmes qui souhaitent offrir un contrôle plus précis sans modifier les fichiers PHP.

Le chargement spéculatif est un outil formidable, mais il ne s'agit pas d'une solution universelle. Avec les exclusions et les paramètres appropriés, vous pouvez l'utiliser pour améliorer les performances tout en évitant les écueils.

En conclusion : Créez un site WordPress plus rapide en toute confiance

Le chargement spéculatif est l'une des avancées les plus intéressantes en matière de performance web moderne, et WordPress l'intègre déjà. Grâce à des outils comme l'API Speculation Rules et l'extension Speculative Loading, les propriétaires de sites et les développeurs peuvent réduire considérablement les temps de chargement des pages, améliorer la navigation des utilisateurs et offrir une expérience utilisateur plus fluide.

Que vous développiez un blog riche en contenu, une boutique WooCommerce ou un site WordPress dynamique, le chargement spéculatif permet d'accélérer le chargement de vos pages sans avoir à modifier du code complexe. Grâce à une compatibilité intelligente avec les navigateurs et à des paramètres personnalisables, il s'intègre parfaitement à la plupart des configurations.

Avant d'activer cette fonctionnalité sur l'ensemble de votre site, vérifiez vos URL principales WordPress, recherchez les pages dynamiques et appliquez des exclusions conditionnelles si nécessaire. Utilisez les outils de développement de Chrome pour valider le comportement et surveillez en permanence l'impact des fonctionnalités non implémentées sur vos statistiques et indicateurs de performance.

Si vous êtes prêt à créer des sites web plus rapides, plus intelligents et plus attrayants , le chargement spéculatif pourrait bien être votre arme secrète.