Devsource

Prefetch : définition et optimisation du préchargement des ressources

Technique d’optimisation permettant de télécharger en arrière-plan des ressources que l’utilisateur est susceptible de consulter lors de sa navigation suivante.

Video
Chargement...

Définition

Le Prefetch est une directive (rel="prefetch") qui demande au navigateur de récupérer une ressource (page, image, script) pendant les moments d’inactivité, afin de la stocker dans le cache. L’objectif est de rendre le chargement de la prochaine page quasi instantané pour l’utilisateur.

 

→ Prendre RDV pour votre projet maintenant

Bonnes pratiques

  • Implémenter progressivement : Cibler les pages ayant un taux de clic élevé (ex: page produit depuis une liste).
  • Mesurer avec Lighthouse : S’assurer que le préchargement ne consomme pas trop de données mobiles pour les utilisateurs avec une connexion limitée.
  • Utiliser le DNS-Prefetch : Pour résoudre à l’avance les noms de domaine des ressources tierces (polices Google, scripts externes).
  • Automatiser le monitoring : Vérifier que les prédictions de navigation sont pertinentes pour ne pas gaspiller de bande passante serveur.

À éviter

  • Chargements bloquants : Ne pas confondre avec le Preload ; le prefetch ne doit pas ralentir la page en cours de consultation.
  • Assets non optimisés : Éviter de précharger des ressources lourdes ou inutiles qui pourraient saturer le cache du navigateur.
  • Modifications non mesurées : Précharger l’intégralité d’un site sans analyse préalable du parcours utilisateur (User Journey).
Qu’est-ce que le prefetch en SEO et en performance web ?

Le prefetch est une technique qui consiste à charger en arrière-plan des ressources ou des pages susceptibles d’être utilisées prochainement par l’utilisateur.

Il permet d’améliorer la vitesse de navigation en anticipant le chargement de ressources avant qu’elles ne soient réellement demandées.

Le navigateur télécharge les ressources avec une priorité faible après le chargement principal de la page, afin de ne pas impacter ses performances.

Le prefetch charge des ressources pour une navigation future, tandis que le preload charge des ressources essentielles pour la page actuelle.

Le dns-prefetch se limite à la résolution DNS d’un domaine, alors que le prefetch peut charger des ressources complètes comme des pages, scripts ou images.

Indirectement, oui. En améliorant la vitesse perçue et la fluidité de navigation, il contribue à une meilleure expérience utilisateur, un facteur important pour le SEO.

Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K
Client The Bridge
Client Reside
AFFS7
Client Acme
R
kp
S
K