Définition
Les resource hints sont des directives HTML qui informent le navigateur des ressources qui seront necessaires, lui permettant de les charger en avance. Preload (<link rel='preload'>) force le chargement immediat d'une ressource critique pour la page en cours (font, hero image, CSS critique). Prefetch (<link rel='prefetch'>) telecharge en arriere-plan des ressources pour les pages suivantes probables. Preconnect (<link rel='preconnect'>) etablit une connexion anticipee (DNS + TCP + TLS) vers un domaine tiers. Dns-prefetch est une version allegee de preconnect (DNS uniquement). Pour le SEO, ces hints ameliorent les Core Web Vitals : preload reduit le LCP en chargeant les ressources critiques en priorite, preconnect reduit le TTFB des ressources tierces, et prefetch accelere la navigation entre pages.
Points clés à retenir
- Preload pour les ressources critiques de la page en cours (fonts, hero image, CSS)
- Preconnect pour les domaines tiers utilises par la page
- Prefetch pour pre-charger les ressources des pages suivantes probables
Exemples concrets
Preload de la font principale
Un site ajoute <link rel='preload' href='font.woff2' as='font' type='font/woff2' crossorigin> dans le head. La font est disponible 500ms plus tot, eliminant le flash de texte invisible (FOIT).
Preconnect aux domaines tiers
Un site ajoute des preconnect vers ses domaines tiers critiques (CDN images, analytics, fonts Google). Le temps de chargement des ressources tierces diminue de 300ms en moyenne.
Questions fréquentes
Preload a une haute priorite et charge la ressource immediatement pour la page actuelle. Prefetch a une basse priorite et charge des ressources pour les navigations futures. Utilisez preload pour le contenu critique de la page courante, prefetch pour anticiper les pages suivantes.
Oui. Trop de preloads diluent la priorite et peuvent ralentir le chargement des ressources vraiment critiques. Limitez-vous a 3-5 preloads maximum. Pour les preconnects, 2-4 domaines tiers critiques maximum. Un audit avec les DevTools Chrome aide a identifier les hints utiles.
Termes liés
Aller plus loin avec LemmiLink
Découvrez comment LemmiLink peut vous aider à mettre en pratique ces concepts SEO.
Dernière mise à jour : 2026-02-07