Prefetch
P
Definition complete
<p>Le <strong>prefetch</strong> est une technique d'optimisation web qui permet au navigateur de télécharger en avance des ressources susceptibles d'être utilisées lors de navigations futures. Contrairement à preload qui charge des ressources critiques pour la page actuelle, prefetch anticipe les besoins des pages suivantes.</p><p>On distingue plusieurs types de prefetch :</p><ul><li><strong>Link prefetch</strong> : télécharge des ressources (CSS, JS, images) pour des pages futures</li><li><strong>DNS prefetch</strong> : résout les DNS de domaines tiers à l'avance</li><li><strong>Prerender</strong> : charge et rend une page entière en arrière-plan (obsolète, remplacé par Speculation Rules)</li></ul><p>L'implémentation utilise la balise link avec rel="prefetch" :</p><ul><li><strong>Ressource</strong> : <link rel="prefetch" href="/page-suivante.js"></li><li><strong>DNS</strong> : <link rel="dns-prefetch" href="//example.com"></li><li><strong>Document</strong> : <link rel="prefetch" href="/page-suivante.html"></li></ul><p>Le prefetch s'exécute avec une <strong>priorité basse</strong>, utilisant la bande passante disponible sans impacter le chargement de la page actuelle. Les ressources sont stockées dans le cache HTTP pour un accès instantané lors de la navigation.</p><p>Les frameworks modernes comme Next.js et Nuxt.js implémentent le <strong>prefetch automatique</strong> des liens visibles dans le viewport, offrant une navigation quasi-instantanée qui améliore significativement l'expérience utilisateur et les métriques d'engagement.</p>
Exemples pratiques
<ul><li><strong>E-commerce</strong> : prefetch de la page produit quand l'utilisateur survole une vignette</li><li><strong>Blog</strong> : chargement anticipé des articles liés visibles dans la sidebar</li><li><strong>Tunnel d'achat</strong> : prefetch de l'étape suivante du checkout</li><li><strong>Application SPA</strong> : chargement des chunks JavaScript des routes probables</li><li><strong>DNS prefetch</strong> : résolution anticipée des domaines CDN et analytics</li></ul>
A quoi sert Prefetch ?
<ul><li>Accélérer la navigation entre les pages d'un site</li><li>Charger les ressources de la page suivante d'un tunnel de conversion</li><li>Résoudre les DNS de domaines tiers avant qu'ils soient nécessaires</li><li>Précharger les assets des pages les plus consultées</li><li>Optimiser l'expérience de navigation sur les connexions lentes</li><li>Implémenter une navigation instantanée dans les applications SPA</li></ul>
Prefetch en pratique chez 123web
<p>Chez 123web, nous implémentons des stratégies de prefetch intelligentes qui anticipent le parcours de vos utilisateurs. Notre équipe optimise le préchargement des ressources critiques pour offrir une navigation fluide et instantanée, améliorant l'engagement et les taux de conversion de votre site web.</p>