Comprendre le DNS prefetching pour optimiser la vitesse de votre site
Le DNS prefetching est une technique d’optimisation des performances web qui permet au navigateur de résoudre les noms de domaine en adresses IP avant même que l’utilisateur ne clique sur un lien. Concrètement, cela réduit le temps d’attente lors de la navigation, car la résolution DNS est déjà effectuée en arrière-plan. Pour les sites comportant de nombreux liens externes ou ressources tierces, cette technique peut significativement améliorer l’expérience utilisateur.
Comment fonctionne le DNS prefetching ?
Lorsque vous visitez une page web, le navigateur doit résoudre chaque nom de domaine (ex: example.com) en adresse IP pour pouvoir charger les ressources (images, scripts, polices). Ce processus, appelé résolution DNS, prend généralement entre 20 et 120 millisecondes. Le DNS prefetching anticipe ces résolutions : dès que le navigateur détecte un lien sortant ou une ressource externe dans le code HTML, il lance une requête DNS en arrière-plan, avant même que l’utilisateur n’interagisse.
Techniquement, le navigateur utilise une balise <link rel="dns-prefetch" href="//example.com"> dans le <head> de la page. Cette balise indique au navigateur : “prépare-toi à résoudre ce domaine, tu en auras besoin bientôt”.
Différence avec le prefetch et le preconnect
Il est facile de confondre DNS prefetching avec d’autres techniques de préchargement :
- Prefetch : Le navigateur télécharge la ressource entière (ex: une page) en arrière-plan, ce qui consomme plus de bande passante.
- Preconnect : Le navigateur effectue la résolution DNS, la négociation TLS et la connexion TCP, soit plus d’étapes que le simple DNS.
- DNS prefetching : Seulement la résolution DNS, légère et rapide.
Le DNS prefetching est donc le plus léger des trois, idéal pour les domaines dont on n’est pas sûr qu’ils seront utilisés.
Pourquoi utiliser le DNS prefetching ? Avantages et cas d’usage
Le principal avantage est la réduction du temps de latence perçu. Sur les connexions mobiles ou les réseaux lents, chaque milliseconde compte. Le DNS prefetching est particulièrement utile dans les situations suivantes :
- Sites avec de nombreux liens externes (ex: articles renvoyant vers d’autres sources).
- Utilisation de ressources tierces (CDN, polices Google, analytics, scripts publicitaires).
- Pages à forte interactivité où l’utilisateur est susceptible de cliquer rapidement.
- Applications web monopages (SPA) où la navigation se fait via JavaScript.
Selon des études, le DNS prefetching peut réduire le temps de résolution DNS de 30 à 50 % pour les domaines pré-résolus.
Implémenter le DNS prefetching : guide pratique
L’implémentation est simple et ne nécessite que quelques lignes de code. Voici comment procéder :
1. Identifier les domaines à pré-résoudre
Analysez votre page pour lister tous les domaines externes utilisés : polices, scripts analytics, CDN, API, etc. Par exemple : fonts.googleapis.com, www.google-analytics.com, cdn.example.com. Vous pouvez utiliser les outils de développement du navigateur (onglet Network) pour les repérer.
2. Ajouter les balises dans le <head>
Pour chaque domaine, ajoutez une balise <link> comme suit :
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.example.com">Placez ces balises le plus tôt possible dans le <head>, idéalement avant les appels aux ressources elles-mêmes.
3. Tester et valider
Utilisez des outils comme PageSpeed Insights, GTmetrix ou WebPageTest pour vérifier que le DNS prefetching est bien appliqué. Vous pouvez aussi inspecter le code source de votre page après déploiement.
Erreurs courantes à éviter avec le DNS prefetching
Une mauvaise implémentation peut nuire aux performances ou à la sécurité. Voici les pièges à éviter :
- Pré-résoudre trop de domaines : Cela peut surcharger le navigateur de requêtes inutiles. Limitez-vous aux domaines réellement utilisés sur la page.
- Oublier de retirer les domaines obsolètes : Si vous ne chargez plus une police ou un script, supprimez la balise correspondante.
- Confondre avec preconnect : Si vous avez besoin de négocier TLS, utilisez preconnect, pas dns-prefetch.
- Ignorer la compatibilité HTTP/2 : Avec HTTP/2, le multiplexage réduit l’impact du DNS, mais le prefetching reste utile pour les connexions lentes.
DNS prefetching vs preconnect : quand utiliser l’un ou l’autre ?
| Technique | Actions effectuées | Coût | Quand l’utiliser |
|---|---|---|---|
| DNS prefetching | Résolution DNS uniquement | Très faible | Domaines dont on n’est pas sûr qu’ils seront utilisés, ou pour des ressources légères |
| Preconnect | DNS + TCP + TLS | Moyen | Domaines critiques (ex: CDN, API) qui seront utilisés rapidement |
En pratique, utilisez dns-prefetch pour les domaines secondaires (liens dans le contenu, scripts non bloquants) et preconnect pour les ressources essentielles (polices, scripts bloquants).
Impact sur le SEO et l’expérience utilisateur
Google prend en compte la vitesse de chargement comme facteur de classement. Le DNS prefetching, en réduisant la latence, peut améliorer les métriques Core Web Vitals comme le First Input Delay (FID) et le Largest Contentful Paint (LCP). Cependant, son impact est modéré comparé à d’autres optimisations (compression des images, minification du code). Il s’agit d’une technique complémentaire.
Pour l’utilisateur, le gain est surtout perceptible sur les connexions lentes ou en itinérance. Les pages semblent se charger plus rapidement car le navigateur a déjà résolu les noms de domaine.
Questions fréquentes sur le DNS prefetching
Le DNS prefetching est-il compatible avec tous les navigateurs ?
Oui, tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) le supportent. Cependant, certains navigateurs peuvent ignorer la balise s’ils estiment que la bande passante est insuffisante.
Peut-on utiliser DNS prefetching pour des domaines en HTTPS ?
Oui, la balise fonctionne aussi bien pour HTTP que pour HTTPS. Utilisez le protocole correspondant dans l’attribut href (ex: // pour suivre le protocole de la page, ou explicitement https://).
Faut-il pré-résoudre le domaine de la page elle-même ?
Non, le navigateur résout déjà le domaine de la page courante. Inutile de l’ajouter.
Le DNS prefetching peut-il causer des problèmes de sécurité ?
Non, il s’agit simplement d’une résolution DNS, pas d’un échange de données. Cependant, des attaques par canal auxiliaire (timing) sont théoriquement possibles, mais très improbables en pratique.
Recommandations pour une utilisation efficace
- Auditez régulièrement les domaines externes de vos pages pour maintenir la liste à jour.
- Combinez avec d’autres techniques : preconnect pour les ressources critiques, prefetch pour les pages suivantes probables.
- Testez sur mobile : le gain y est souvent plus significatif.
- Utilisez des outils automatisés comme des plugins WordPress (ex: perfmatters, WP Rocket) qui gèrent le DNS prefetching sans code.
le DNS prefetching est une technique simple et peu coûteuse pour améliorer la vitesse perçue de votre site. Bien implémentée, elle offre un bon rapport effort/bénéfice, surtout pour les sites riches en ressources externes. N’oubliez pas de surveiller l’impact réel via des outils de performance et d’ajuster votre stratégie en conséquence.
Photo by Shane Aldendorff on Pexels
16 Comments
Doit-on utiliser dns-prefetch pour tous les domaines externes ou seulement certains ?
Il est recommandé de ne l’utiliser que pour les domaines critiques ou fréquemment utilisés. Trop de balises peuvent ralentir le navigateur inutilement. Priorisez les domaines de vos polices, scripts analytics, CDN, etc.
Je ne comprends pas la différence entre prefetch et dns-prefetch. Pouvez-vous préciser ?
Bien sûr. Le prefetch télécharge la ressource entière (HTML, CSS, etc.) en arrière-plan, ce qui consomme de la bande passante. Le dns-prefetch, lui, se contente de résoudre le nom de domaine en adresse IP, bien plus léger. Le preconnect va plus loin en établissant aussi la connexion TCP et TLS.
Est-ce que ça vaut le coup pour un petit blog avec peu de liens externes ?
Pour un petit blog, l’impact sera minime si vous avez peu de ressources externes. Cependant, si vous utilisez ne serait-ce qu’une police Google ou un script analytics, cela peut faire gagner quelques millisecondes. Cela reste simple à implémenter, donc pourquoi pas.
J’ai lu que le DNS prefetching pouvait être une faille de sécurité, est-ce vrai ?
Bonne question. En effet, il existe un risque de fuite DNS si un attaquant parvient à injecter des balises dns-prefetch vers des domaines malveillants. Mais dans un contexte normal, c’est sûr. Pour les sites sensibles, on peut limiter le prefetching aux domaines de confiance.
Est-ce que le DNS prefetching fonctionne aussi pour les images ?
Oui, tout à fait. Si vos images sont hébergées sur un domaine externe (comme un CDN), le dns-prefetch peut anticiper la résolution de ce domaine. Cela accélère le chargement des images, surtout si elles sont nombreuses.
Y a-t-il un risque de surcharge pour le serveur DNS avec trop de requêtes anticipées ?
Généralement non, car les résolutions DNS sont légères et les navigateurs limitent le nombre de requêtes simultanées. Cependant, si vous avez un très grand nombre de domaines à pré-résoudre, cela peut générer un peu de trafic supplémentaire. Restez raisonnable.
Merci pour cet article très clair ! Une question : est-ce que le DNS prefetching est compatible avec tous les navigateurs ?
Bonjour, merci ! Oui, le DNS prefetching est supporté par la plupart des navigateurs modernes (Chrome, Firefox, Safari, Edge). Cependant, certains navigateurs comme Safari peuvent avoir un comportement légèrement différent. Nous vous conseillons de tester sur votre public cible.
Super article ! J’ai implémenté le dns-prefetch sur mon site e-commerce et j’ai vu une amélioration notable du temps de chargement. Merci !
Merci pour votre retour, ravi que cela ait fonctionné pour vous ! Sur un e-commerce avec de nombreux appels à des CDN ou API, c’est effectivement très bénéfique.