Paramétrage du préchargement et de la prélecture dans un site web

Le préchargement et le chargement préalable sont des techniques que vous utilisez pour rendre un site web plus rapide et plus fluide. En préchargeant certaines ressources (avant même que l’utilisateur n’en ait besoin), vous réduisez le temps de chargement des composants essentiels. Dans cet article, je vous explique quelle est la différence entre ces deux techniques, quand les utiliser et comment les configurer techniquement.

Quelle est la différence ?

Précharge

Vous dites au navigateur « Veuillez charger ce fichier dès que possible, il est important ».

Généralement utilisé pour : les polices, les images importantes, CSS ou JS qui sont nécessaires immédiatement.

Préfixe

Vous dites au navigateur : « Cette ressource pourrait être utile plus tard, chargez-la déjà en arrière-plan. »

Couramment utilisé pour : les pages suivantes, les scripts externes, les appels API.

1. Réglage de la précharge

Preload que vous ajoutez à l’adresse de votre HTML. Vous indiquez ce que vous chargez et quel type de fichier il s’agit.

Exemple : préchargement des polices

Exemple : CSS critique

Veillez à ce que ce paramètre soit correctement défini, sinon le navigateur ignorera le préchargement.

2. Réglage de la fonction Prefetch

La fonction Prefetch fonctionne particulièrement bien pour les ressources qui sont susceptibles d’ être utilisées, mais pas immédiatement. Pensez à un lien vers une page suivante ou à un script qui ne se chargera que plus tard.

Exemple : une page préfabriquée

Ou avec des frameworks comme Next.js :

De nombreux frameworks prennent en charge la recherche automatique des itinéraires internes (routage côté client). Mais la recherche préalable manuelle peut également être utile pour les API externes ou les scripts tiers.

3. Également utiles : dns-prefetch et preconnect

Pour les sources externes (telles que les CDN ou les scripts externes), il est judicieux de configurer la résolution DNS et les connexions à l’avance.

Exemple : Google Fonts

Explication :

• dns-prefetch: résout le domaine avant qu’il ne soit utilisé
• preconnect: se connecte déjà (TCP handshake, TLS), plus rapide que dns-prefetch

N’ utilisez cette option que pour les domaines que vous utilisez réellement, sinon vous perdrez en performance.

4. Essais et validation

Veillez à paramétrer correctement le préchargement et la prélecture. Une mise en œuvre incorrecte peut en effet entraîner des retards.

Outils :

• WebPageTest : vérifier si le préchargement fonctionne comme prévu
• Lighthouse : donne des recommandations de préchargement
• Browser devtools (onglet Network) : voir si un fichier a déjà été chargé auparavant ?

Meilleures pratiques

• N’utilisez la précharge que pour les ressources critiques – sinon, vous ralentissez les autres ressources.
• Combinez le préchargement avec une solution de repli (par exemple,
• Ne mettez en préconnexion que ce dont vous avez réellement besoin
• Testez le temps de chargement avant et après la mise en œuvre

En conclusion

Le préchargement et le chargement préalable sont des techniques relativement simples pour rendre un site plus rapide et plus fluide. En particulier pour les sites web contenant beaucoup de médias, de polices de caractères ou de composants JS, vous pouvez obtenir des gains notables grâce à ces techniques – si elles sont appliquées correctement.