Les temps de chargement sont une préoccupation qui touche pratiquement tous les développeurs de sites web à travers le monde – et pour une bonne raison ! Plus de 50 % de vos visiteurs potentiels risquent de quitter votre site si rien ne s’affiche au bout de trois secondes de chargement.

En plus de cela, depuis quelques années maintenant, Google prend également en compte la vitesse de chargement dans le calcul du positionnement d’une page web dans son index de recherche.

Il est donc tout à fait normal de vous intéresser au sujet des performances de votre site web, et ce tutoriel vous apprendra comment fonctionne la nouvelle API Speculation Rules (toujours en état expérimental d’après developer.mozilla.org). Heureusement, si vous proposez cette fonctionnalité à des visiteurs dont le navigateur n’est pas encore compatible avec cette API, rien ne se passera et leur expérience utilisateur restera inchangée.

Pourquoi utiliser l'API Speculation Rules ?

L’API Speculation Rules est une nouvelle fonctionnalité permettant d’indiquer au navigateur de vos visiteurs de précharger des informations concernant les pages de votre choix. En paramétrant correctement cette fonctionnalité, vous pouvez donc permettre à vos visiteurs de précharger les pages importantes de votre site pendant qu’ils en consultent une autre. Prenons un exemple concret pour mieux comprendre l’impact de cette API.

Exemple d’utilisation : votre visiteur arrive sur votre page d’accueil après une recherche Google. L’API Speculation Rules est paramétrée pour précharger entièrement votre page « Contact ». Le navigateur du visiteur commence donc à télécharger cette page en arrière-plan. Environ une minute après son arrivée, le visiteur clique sur un lien vers la page préchargée : il est instantanément redirigé dessus, sans aucun temps de chargement, car le navigateur a déjà effectué le travail de téléchargement en amont. L’expérience utilisateur est donc grandement améliorée pour le visiteur.

Schéma représentant le fonctionnement de l'API Speculation Rules sur WordPress dans un exemple concret où un utilisateur arrive sur un site, puis consulte après un petit délai une deuxième page préchargée ou non.
Exemple de parcours d'un utilisateur sur un site et comment l'API Speculation Rules peut améliorer son expérience.

Avantages à utiliser cette API

L’API Speculation Rules est une fonctionnalité moderne et puissante. Au fil du temps, il est probable que de très nombreux sites finissent par l’utiliser, tant elle permet d’améliorer l’expérience utilisateur pour les visiteurs.

Voici une liste des principaux avantages à utiliser cette fonctionnalité sur votre site WordPress :

  • Elle est facile à intégrer
    • L’API peut être configurée dans les headers HTTP, mais aussi et surtout de façon inline avec une balise HTML <script>, ce qui est beaucoup plus simple avec WordPress.
    • Les règles sont spécifiées sous la forme d’une structure JSON, qui est une syntaxe facile à prendre en main.
  • C’est une fonctionnalité évolutive (ou “progressive”), non intrusive, qui améliore l’expérience utilisateur sans jamais la dégrader.
  • Elle peut complètement effacer le temps de chargement de vos pages.
  • Elle cible les URL des documents plutôt que des fichiers de ressources spécifiques.
    • Elle est donc plus adaptée aux applications multipages (MPA) qu’aux applications monopages (SPA), et convient donc parfaitement à WordPress.

Inconvénients à utiliser cette API

Si l’utilisation de l’API Speculation Rules semble être un choix évident en raison de ses nombreux avantages, il reste important de noter les inconvénients qui pourraient se présenter si vous décidez de l’utiliser. Voici les plus notables :

  • C’est une fonctionnalité expérimentale. Elle peut donc évoluer et arrêter de fonctionner si sa syntaxe change.
  • Au moment de la rédaction de cet article, elle ne fonctionne que pour 74,52% des utilisateurs (ceux qui utilisent un navigateur basé sur Chrome ou Edge).
  • Elle doit souvent être paramétrée à la main, car aucun plugin ne permet pour le moment de l’automatiser ou la configuer correctement.
    • Vous pouvez la paramétrer à la main sur chacune de vos pages.
    • Ou alors, utilisez le snippet PHP partagé plus bas pour la configurer avec ACF dans une page d’option.
  • Elle augmente le nombre de requêtes sur votre serveur.
    • Pour chaque page configurée dans l’API, une requête est envoyée au serveur pour précharger les données.
  • Les scripts JS de la page de destination peuvent cesser de fonctionner.
    • En utilisant la fonction prerender (que j’explique juste après), votre navigateur se comporte comme s’il consultait la page en arrière-plan. Si des scripts JS se lancent au chargement de la page, ils pourraient se lancer pendant que la page se précharge.
    • Si vous avez le contrôle sur les scripts, vous pourriez envisager d’ajouter une vérification pour vous assurer que ces derniers ne se lancent pas pendant le préchargement.

Lorsqu’une page fait l’objet d’un traitement préalable, l’entrée PerformanceResourceTiming.deliveryType renvoie la valeur « navigational-prefetch ». Vous pouvez utiliser ce qui suit pour exécuter une fonction lorsqu’une entrée de performance de type « navigational-prefetch » est reçue :

				
					if (
  performance.getEntriesByType("navigation")[0].deliveryType ===
  "navigational-prefetch"
) {
  respondToPrefetch(); // Author-defined function
}

Cette technique est utile pour mesurer les performances ou pour différer des actions qui pourraient poser problème si elles se produisaient pendant le préchargement (voir Préchargement non sécurisé sur developer.mozilla.org).

Comment paramétrer l'API Speculation Rules sur WordPress avec ACF ?

La meilleure façon de paramétrer l’API Speculation Rules sur WordPress est de l’intégrer à ACF pour pouvoir sélectionner facilement les pages à précharger depuis un panneau d’administration dans votre back-office. Ci-dessous, vous retrouverez un exemple de snippet PHP utilisé pour ajouter le code Javascript nécessaire pour faire fonctionner cette API.

				
					// Script de Définition des pages à précharger avec SCF
// Ajout du script dans le <head>
function ajouter_script_prerender() {
    // Vérifier si la fonction ACF existe
    if (!function_exists('get_field')) {
        return;
    }

    // Récupérer le champ personnalisé depuis la page d'options
    $pages_a_precharger = get_field('pages_a_precharger', 'option'); // "option" désigne la page d'options ACF

    // Vérifier si le champ contient des données
    if (empty($pages_a_precharger)) {
        return;
    }

    // Construire une liste des URLs à partir des objets de publication
    $urls = array_map(function ($page) {
        return get_permalink($page->ID); // Obtenir l'URL de la page
    }, $pages_a_precharger);

    // Générer le script JSON
    $script_json = json_encode([
        'prerender' => [
            [
                'urls' => $urls,
                'eagerness' => 'immediate'
            ]
        ]
    ]);

    // Ajouter le script dans le <head>
    echo "<script data-no-optimize="1" type=\"speculationrules\">{$script_json}</script>";
}
add_action('wp_head', 'ajouter_script_prerender');

La méthode utilisée dans le snippet PHP ci-dessus est prerender, combinée avec une option eagerness définie sur 'immediate'. Voici ce que cela signifie :

  • prerender :
    • Le navigateur va précharger entièrement la page ciblée en arrière-plan, comme s’il la rendait invisible dans un onglet caché. Résultat : lorsque l’utilisateur clique sur un lien vers cette page, celle-ci s’affiche instantanément, car elle est déjà prête.
  • eagerness: 'immediate' :
    • C’est le niveau d’agressivité du déclenchement. Ici, 'immediate' indique que la prélecture de la page démarre dès que le lien apparaît à l’écran, sans attendre une interaction (comme un survol ou un clic).

C’est la forme la plus proactive, pensée pour maximiser la vitesse perçue.

Comment utiliser ce snippet PHP ?

Pour utiliser ce snippet PHP, vous devez configurer les éléments suivants sur votre site :

  • Créez une page d’option avec ACF ou SCF (Secure Custom Fields)
  • Créez un champ personnalisé de type « Objet de la Publication » dont le nom est : pages_a_precharger
    • Filtrez par type de publication : « page », ou autre selon vos besoins
    • Filtrez par état de publication : « publié »
    • Le format dans le modèle doit être défini sur « objet de la publication »
    • Autorisez la sélection multiple pour pouvoir précharger plusieurs pages

Si vous avez correctement paramétré votre champ personnalisé, ainsi que votre page d’options, vous devriez pouvoir définir les pages à précharger comme sur l’image ci-dessous. Il ne vous reste donc plus qu’à sélectionner les pages que vous souhaitez précharger.

Capture d&apos;écran présentant un champ personnalisé configuré avec l&apos;API Speculation Rules sur WordPress via le plugin ACF ou SCF (Secure Custom Fields)
Une fois le champ personnalisé ajouté à la page d'option, vous devriez pouvoir y sélectionner des pages publiées comme sur cette capture d'écran.

Configurez le type de déclencheur de l'API

La méthode utilisée actuellement dans le snippet PHP est assez gourmande en ressources, puisqu’elle lance automatiquement le préchargement des pages dès que le script Javascript est chargé. C’est pourquoi il existe d’autres niveaux d’eagerness plus conservateurs, qui permettent de mieux doser le comportement selon le contexte :

  • hover : le préchargement ne se déclenche que lorsque l’utilisateur survole le lien avec sa souris. C’est un bon compromis entre performance et limitation des ressources consommées inutilement.
  • click : ici, le préchargement se fait au moment du clic, juste avant le changement de page. Cela n’offre pas une navigation instantanée, mais peut tout de même accélérer légèrement le rendu si la page cible est rapide à précharger.
  • moderate (expérimental) : une approche équilibrée qui combine visibilité du lien, comportement utilisateur et autres signaux pour décider de lancer (ou non) le préchargement.

Ces options permettent d’adapter le comportement de l’API Speculation Rules en fonction du type de site, des pages ciblées et de la stratégie de performance souhaitée.

Définissez les types de données à précharger

Outre la méthode de déclenchement du préchargement, il existe aussi des variations dans les types de données à précharger. Il est en effet possible d’indiquer au navigateur que l’on souhaite précharger une quantité plus réduite de données pour limiter la charge sur le serveur, voici quelques exemples :

  • prerender (par défaut avec eagerness: ‘immediate’)
    • C’est la méthode la plus agressive et proactive, que nous avons déjà abordée. Elle précharge la page dans son intégralité dès que le lien est visible (ou plus tôt, selon les paramètres) et permet d’afficher instantanément la page lorsqu’un utilisateur clique dessus.
  • Prefetch
    • Contrairement à prerender, qui charge la page entière, prefetch permet de charger uniquement les ressources critiques d’une page (comme les scripts et les styles) avant même que l’utilisateur n’interagisse avec le lien. Cette méthode est plus légère que prerender, car elle ne précharge pas la totalité de la page, mais se concentre sur ce qui est nécessaire pour que la page se charge rapidement lorsque l’utilisateur l’atteint.
      • Utilisation typique : idéal pour les pages liées à des ressources très spécifiques qui ne sont pas encore nécessaires immédiatement mais qui, une fois chargées, accélèrent considérablement l’expérience utilisateur.
  • preload
    • Bien que preload soit souvent utilisée pour les ressources comme des images ou des scripts critiques, l’API Speculation Rules permet également de l’utiliser pour précharger les composants essentiels d’une page avant que l’utilisateur clique sur le lien. Cela peut inclure des composants JavaScript ou des fichiers CSS qui seront nécessaires pour rendre la page plus rapide lorsqu’elle sera demandée.
      • Utilisation typique : lorsque des éléments spécifiques doivent être préparés, mais sans charger toute la page comme dans prerender. Cela permet de ne charger que ce qui est nécessaire pour que l’interaction avec la page soit plus rapide.
  • lazy
    • La méthode lazy permet de charger des ressources uniquement lorsque l’utilisateur en a besoin. En opposition à immediate ou même prefetch, lazy est utilisée pour différer le chargement des ressources jusqu’à ce que cela soit vraiment nécessaire, ce qui permet d’économiser des ressources et d’éviter de surcharger les navigateurs.
      • Utilisation typique : très utile pour les pages avec des sections longues où le contenu n’est visible que plus tard (comme des images dans un article). Cette méthode améliore la gestion de la bande passante.

Comment vérifier le bon fonctionnement de l'API

Méthode : 1 – Tester manuellement la vitesse de redirection

Une fois que vous avez configuré l’intégration intelligente du script avec le snippet PHP, il est essentiel de tester son bon fonctionnement. En optant pour la méthode de préchargement la plus forte (méthode prerender avec 'eagerness' => 'immediate'), vous devriez pouvoir constater que le clic sur un lien redirigeant vers l’une des pages configurées dans la page d’option vous transporte instantanément vers l’URL, sans latence.

Si vous constatez que la redirection n’est pas instantanée, voici quelques explications possibles :

  • Vous êtes connecté en tant qu’administrateur à votre site
    • Souvent, lorsque vous êtes connecté à votre site WordPress, des directives sont passées à votre navigateur pour empêcher toutes formes d’optimisations. Cela permet aux pages que vous consultez de toujours afficher la dernière version enregistrée.
    • Correction : Déconnectez-vous, ou essayez de naviguer sur votre site en onglet de navigation privée, puis testez le lien.
  • La page sur laquelle vous vous rendez n’est pas sélectionnée dans le champ personnalisé de la page d’option
    • Correction : Vérifiez que vous avez bien sélectionné la page sur laquelle vous essayez de vous rendre dans le champ personnalisé du back-office : « pages_a_precharger« .
  • Votre système de cache n’a pas encore pris en compte l’ajout du script JS
    • Vérifiez dans le code source de votre site (raccourci CTRL + U) si une balise <script type="speculationrules"> existe.
    • Correction : Faites une purge complète de votre cache.
  • Vous cliquez trop rapidement sur le lien
    • L’API Speculation Rule permet de charger en arrière-plan une page de votre site. Si vous essayez d’accéder à cette page avant que votre navigateur n’ait eu le temps de la précharger, vous ne pourrez pas constater une redirection immédiate.
    • Correction : Accordez 15 à 20 secondes à votre navigateur pour précharger les pages.

Méthode : 2 – Utilisez les DevTools de votre navigateur

La véritable méthode pour tester le bon fonctionnement de l’API Speculation Rules est d’utiliser les DevTools (outils de développement) de votre navigateur. Pour y accéder, deux méthodes sont à privilégier :

  1. Allez n’importe où sur la page puis faites un clic droit → Inspecter
  2. Appuyez sur la touche F12 de votre clavier

Une fois les DevTools ouverts, rendez-vous dans l’onglet suivant :

  • Dans un navigateur en français :
    • Appli → Chargements Spéculatifs
  • Dans un navigateur en anglais :
    • Application → Speculative Loads

Si tout fonctionne correctement, vous devriez voir en vert le nombre d’opérations réussies, correspondant au nombre de pages renseignées dans le champ personnalisé pages_a_precharger. Testez ensuite la navigation entre ces pages préchargées par l’API Speculation Rules pour vérifier la navigation instantanée. Si le chargement n’est pas amélioré, essayez d’appliquer les suggestions de correction présentées dans la méthode 1. Sinon, contactez-moi pour identifier les causes de votre problème.

Captures d&apos;écrans des chrome DevTools montrant l&apos;onglet relatif à l&apos;API Speculation Rules. On y voit des opérations réussies de préchargement de pages sur le site WordPress lucaspierrot.fr
Le détail des chargements spéculatifs devrait ressembler à cette capture d'écran si vous avez correctement appliqué ce tutoriel.

Comment choisir les pages à inclure dans le préchargement ?

Comme mentionné précédemment, l’un des inconvénients de l’API Speculation Rules est la charge accrue que peut générer un grand nombre de requêtes sur votre serveur, surtout si votre site reçoit beaucoup de trafic. Il est donc essentiel de sélectionner avec soin les pages à précharger. Voici mes recommandations :

  • N’inclure que des pages de premier niveau
    • Les pages doivent être accessibles en un seul clic dans le menu.
  • Pensez aux pages à fort trafic (avéré ou prévisionnel)
    • Voici quelques exemples de pages susceptibles d’attirer beaucoup de trafic :
      • Page contact
      • Page boutique (site e-commerce)
      • Page réalisations (site portfolio)
      • Page d’accueil

Sur mon site personnel, voici les pages que j’ai choisies pour le préchargement :

  • Accueil
  • Prestations
  • Réalisations
  • Contact

Vous pouvez vous inspirer de ce choix pour votre propre site. L’important est de ne pas trop multiplier les pages préchargées pour éviter de surcharger le serveur de requêtes. Notez également que vos outils de statistiques pourraient considérer ces pages préchargées comme des visites réelles. Il existe des méthodes pour éviter cela, selon les plugins utilisés.

En résumé

L’API Speculation Rules, lancée en 2023, est une fonctionnalité puissante que vous pouvez ajouter à votre site sans prendre de gros risques. Si vos utilisateurs ne sont pas en mesure d’en profiter, l’ajout de règles de préchargement n’affectera pas leur expérience. Au contraire, ces règles peuvent considérablement améliorer la navigation pour les utilisateurs qui accèdent à votre site via un navigateur moderne.

Il serait donc très bénéfique d’intégrer cette API sur votre site. Si ce tutoriel dépasse vos compétences ou si vous manquez de temps pour l’implémenter, n’hésitez pas à me contacter. Je serai ravi d’intégrer cette fonctionnalité pour vous.

Demander cette Fonctionnalité

Ressources Externes

Tout savoir sur l'API Speculation Rules – Chrome for Developers