Générateur de preload, preconnect et dns-prefetch
Collez les adresses utilisées par le site (une par ligne) ou le HTML de la page. L’outil choisit le bon type d’indication pour chacune et vous avertit quand il y en a trop.
Mode d’emploiPrévenez le navigateur de ce qui arrive
Disponible en: 
Générateur de preload, preconnect et dns-prefetch: à quoi ça sert
Les resource hints sont des balises dans le <head> qui préviennent le navigateur de ce dont la page aura besoin, pour qu’il anticipe connexions et téléchargements. Utilisés avec modération, ils raccourcissent le délai d’affichage du contenu principal ; utilisés à l’excès, ils nuisent.
Collez les adresses ou le HTML de la page et l’outil choisit : preconnect (avec crossorigin pour une police) pour jusqu’à trois domaines importants, dns-prefetch pour le reste et pour les scripts d’analyse, preload uniquement pour une ou deux polices et pour l’image principale avec fetchpriority=high, et prefetch pour la page suivante probable. Chaque balise est accompagnée de sa raison.
Mode d’emploi
- Collez les adresses ou le HTML.
- Vérifiez le domaine, l’image principale et la page suivante.
- Copiez les balises dans le <head>.
Quand l’utiliser
- Sites avec Google Fonts.
- Pages avec une grande image en haut.
- Améliorer le LCP des Core Web Vitals.
Questions fréquentes
Quelle différence entre preconnect et dns-prefetch ?
Le preconnect ouvre toute la connexion avec l’autre domaine (DNS, TCP et TLS) avant que le navigateur n’en ait besoin. Le dns-prefetch ne résout que le DNS, il est moins coûteux et convient aux domaines moins importants. Utilisez preconnect pour peu de domaines, deux ou trois, et dns-prefetch pour le reste.
Quand utiliser preload ?
Seulement pour des ressources critiques que le navigateur découvre tard, comme la police du titre (cachée dans le CSS) ou l’image principale placée en fond par le CSS. Trop de preload se dispute la bande passante avec ce qui compte et ralentit le site.
Pourquoi la police a-t-elle besoin de crossorigin ?
Les polices sont toujours récupérées en mode CORS. Sans l’attribut crossorigin sur le preload ou le preconnect, le navigateur ne réutilise pas ce qu’il a déjà téléchargé et finit par demander la police deux fois.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.