Resource hints
R
Definition complete
Les Resource Hints sont des directives HTML permettant au développeur d'indiquer au navigateur les ressources à anticiper avant qu'elles ne soient explicitement nécessaires. Ces hints optimisent le chargement en réduisant la latence réseau, améliorant significativement les Core Web Vitals.
Les principaux resource hints sont : dns-prefetch (résolution DNS anticipée), preconnect (établissement anticipé de la connexion TCP+TLS), prefetch (téléchargement anticipé de ressources pour navigation future), et preload (chargement prioritaire de ressources critiques pour la page actuelle).
Preload est particulièrement puissant pour le LCP : précharger l'image hero, la police principale ou le CSS critique permet de les avoir disponibles dès qu'ils sont nécessaires. La syntaxe : <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>.
L'abus de resource hints peut être contre-productif : précharger trop de ressources consomme de la bande passante et peut retarder les éléments vraiment critiques. L'analyse des waterfall charts permet d'identifier les ressources bénéficiant le plus d'un preload ou preconnect.
Exemples pratiques
- Fonts tierces : <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> pour anticiper la connexion à Google Fonts, économisant 100-300ms.
- Image LCP : <link rel="preload" as="image" href="hero.webp"> pour charger l'image hero en priorité maximale, améliorant le LCP de 500ms.
- Navigation prédictive : Prefetch des pages susceptibles d'être visitées (pagination, produits liés) au hover sur les liens.
A quoi sert Resource hints ?
Les resource hints servent à améliorer le LCP en préchargeant les ressources critiques, réduire le TTFB perçu en anticipant les connexions aux domaines tiers, accélérer la navigation entre pages via le prefetch prédictif, et optimiser le chargement des fonts et scripts tiers. C'est une optimisation à fort impact pour un effort minimal.
Resource hints en pratique chez 123web
Chez 123web, nous implémentons les resource hints adaptés dans nos optimisations de performance. Nous analysons les waterfall charts pour identifier les ressources critiques, configurons les preload/preconnect appropriés, et mesurons les gains sur les Core Web Vitals. Cette optimisation fine contribue à des temps de chargement perçus significativement améliorés.