Une nouvelle opportunité technique pour accélérer le chargement de vos pages web

Qu'est-ce que le chargement spéculatif ?

Le chargement spéculatif est une technique de préchargement des pages d'un site web en tâche de fond. Cette méthode permet d'accélérer l'affichage des pages en anticipant la navigation de l'utilisateur.

La méthode n'est pas nouvelle puisque Google propose depuis 2011 des balises permettant de précharger une page mais avait rapidement modifié le comportement du navigateur car le chargement du code javascript des pages préchargées posait problème. Ce système de préchargement a donné le jour à une API dite de "chargement spéculatif" qui permet de régler précisément quelles pages seront préchargées.

Un exemple d'implémentation avec WordPress et Chrome

Sur la vidéo ci-dessous, un utilisateur de Chrome navigue sur un site WordPress avec l'extension officelle Performance Lab activée. Sous le navigateur on affiche les requêtes faites par le navigateur au serveur. On observe bien les pages se charger en arrière plan lorsque l'utilisateur passe sa souris sur les liens (l'option prerender est activée par le plugin, voir plus bas pour le code exact injecté par le plugin). Résultat le chargement de la seconde page "A propos" est très rapide. En contre partie, on voit aussi le chargement de pages que l'utilisateur ne demande pas.

Quels sont les avantages ?

Amélioration de l'expérience utilisateur : le préchargement permet un affichage presque instantané des pages.
Une API très précise : l'API permet de définir précisément une politique de préchargement avec les options suivantes :
- - Faire du pré-rendu (prerendering) ou de la pré-lecture (prefetching)
- - Définir précisément les pages à charger avec une liste ou une requête sur les classes des liens
- - Ajuster le niveau "d'impatience" avec la directive eagerness, qui permet de charger immédiatement, au survol de la page, ou au survol du lien
- - Dynamiquement définir la politique de chargement en javascript


<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "and": [
            { "href_matches": "/*" },
            { "not": { "href_matches": "/logout" } },
            { "not": { "selector_matches": ".no-prerender" } }
          ]
        }
      }
    ],
    "prefetch": [
      {
        "urls": ["next.html", "next2.html"],
        "requires": ["anonymous-client-ip-when-cross-origin"],
        "referrer_policy": "no-referrer",
        "eagerness": "moderate"
      }
    ]
  }
</script>

Intégration au plugin de performances officiel WordPress

Une équipe de bénévoles travaille sur les optimisations de WordPress et édite un plugin officiel, Performance Lab, qui propose ce système de préchargement. En un clic, vous activez ce préchargement, et comme montré dans la vidéo, au niveau UX, c'est très efficace.

WordPress: activer le chargement spéculatif

Quels sont les inconvénients ?

Une amélioration limitée aux utilisateurs qui voient plusieurs pages : cette technique n'améliore pas les performances de la première page vue. Vous n'aurez aucune amélioration de votre score sur PageSpeed Insights et le référencement naturel ne sera pas amélioré.
Le support partiel par les navigateurs web : aujourd'hui, il n'y a qu'environ 70% de couverture avec un trou dans la raquette pour Safari, qui est une part importante sur mobile. Compatibilité des navigateurs.
La charge serveur supplémentaire : les pages étant préchargées en anticipant un événement qui, dans la plupart des cas, n'arrive pas (considérez le taux de rebond du site avant de vous lancer dans cette optimisation), le serveur sera plus sollicité.
Des conséquences énergétiques et écologiques : à grande échelle, cette fonctionnalité peut entraîner une surconsommation de CPU et de bande passante. Elle doit aller de pair avec une optimisation du poids des pages web.
Limitations avec WordPress Le plugin officiel ne permet aucun réglage. Il injecte un code par défaut :


<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          {
            "not": {
              "href_matches": [
                "/wp-login.php",
                "/wp-admin/*",
                "/*\\?*(^|&)_wpnonce=*"
              ]
            }
          },
          { "not": { "selector_matches": "a[rel=nofollow]" } },
          { "not": { "selector_matches": ".no-prerender" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

A noter 1 : Chrome limite le nombre de préchargements et de prélectures selon le paramètre eagerness. Les règles sont expliquées ici https://developer.chrome.com/docs/web-platform/prerender-pages?hl=fr

A noter 2 : dans notre test, nous constatons que Chrome précharge les pages sans pour autant déclencher des vues des pages préchargées dans les statistiques même captées avec un autre outil (en l'occurrence Matomo) ce qui correspond à la spécification qui précise que les "sous ressources" ne sont pas chargées.

A noter 3 : les ressources préchargées sur une page sont effacées d'une page à l'autre. Par exemple je suis sur la page A et je précharge la page B et la page C puis je vais sur la page C qui devra à nouveau précharger la page B si la politique de préchargement lui demande. On peut donc vite arriver à une charge serveur importante.

Conclusion

Le chargement spéculatif est une technologie très intéressante, mais attention à la surconsommation côté serveur. Sa mise en place ne dispense pas d'une optimisation du poids des pages. Bien qu'elle n'améliore pas les performances de la première page, elle améliore significativement la fluidité de la navigation sur les pages suivantes. Intégrée dans le plugin officiel de performance de WordPress, elle est extrêmement simple à mettre en place de manière basique. Toutefois, mettre en place une politique intelligente de préchargement est assez complexe. Il faut en tenir compte dans la prise de besoin et la rédaction du cahier des charges de votre site web. Cela peut aussi être une recommandation lors d'un audit de performances. Dans tous les cas, il est essentiel de prendre en compte les implications écologiques et les charges supplémentaires pour le serveur.

Partagez vos retours d'expérience

Des retours d'expérience sur cette API ? Contactez-nous et nous publierons vos commentaires !

Nous contacter

Références

https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API

https://developer.chrome.com/blog/nostate-prefetch?hl=fr

https://codelabs.developers.google.com/speculation-rules?hl=fr#0

Merci à Pedro Vit pour l'illustration.