Vue de dos sur un développeur devant un ordinateur portable, avec des notes adhésives de code autour de l'écran.

Préchargement web : optimisations et pièges des en-têtes HTTP

Le préchargement est la pratique consistant à récupérer en arrière-plan des documents ou des sous-ressources pour des pages que l’utilisateur est susceptible de visiter prochainement. Cette anticipation peut réduire significativement le temps de chargement si l’utilisateur choisit de naviguer vers cette page. Pour indiquer au navigateur ce qu’il doit anticiper, on peut utiliser la balise <link rel="prefetch" href="next.html" />. Il existe aussi l’API Speculation Rules, qui gère les préchargements de documents de navigation de manière plus efficace que cette balise simple.

Au-delà de la simple anticipation de la navigation, d’autres techniques existent. Le préchargement DNS, via <link rel="dns-prefetch" href="https://example.com/" />, permet de résoudre les noms de domaine à l’avance, ce qui diminue le temps passé lors de la requête elle-même. Selon le Mozilla Developer Network, ces outils sont conçus pour se baser sur la probabilité qu’un élément soit nécessaire dans une séquence de navigation.

Le risque des en-têtes HTTP non maîtrisés

Cependant, cette optimisation peut se retourner contre le développeur si elle est mal calibrée. Simon Willison a récemment soulevé un comportement problématique concernant Datasette. Il a remarqué que les pages de tables servaient un en-tête HTTP link: <...>; rel="next" qui déclenchait un préchargement automatique de la page suivante par Firefox.

Le problème est que seulement une infime partie des visiteurs cliquera sur ce lien « suivant ». Dans ce cas, le navigateur télécharge et le serveur Datasette doit rendre une page entière qui sera ensuite jetée. Ce gaspillage de ressources est lié à un problème connu dans Firefox, un comportement que l’auteur note être documenté depuis des années.

Illustration vectorielle montrant une flèche de navigation vers une page suivante et un symbole d'énergie gaspillée.

Choisir la bonne méthode d’anticipation

Il est donc fondamental de savoir distinguer les outils. La Speculation Rules API, par exemple, est conçue spécifiquement pour gérer les préchargements de documents de navigation, ce qui lui donne un avantage sur la balise <link rel="prefetch" /> qui présente des limites. L’API permet de spécifier les sources et les URL à précharger, par exemple en utilisant un bloc de script de type speculationrules.

Si le but est d’optimiser le chemin de navigation, les développeurs doivent s’assurer que leurs signaux de préchargement sont précis. Sinon, ce qui commence comme une petite accélération peut vite se transformer en une charge inutile sur le serveur et sur le réseau de l’utilisateur.

Sources