Devsource by Maxime GUINARD

Prefetch (Prélecture)

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.

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).
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K
The Bridge
reside
AFFS7
12
R
kp
S
K