103 Early Hints : Préchargez les ressources critiques pendant le temps de réflexion du serveur
Utilisez le temps de réflexion du serveur pour précharger votre image LCP et votre CSS critique avant que la page ne soit prête
Les 103 Early Hints en bref
Les 103 Early Hints constituent un code d'état HTTP léger que le serveur envoie avant la réponse finale. Pendant que le serveur traite encore votre page, le navigateur peut déjà commencer à récupérer des ressources critiques comme votre image LCP ou votre feuille de style principale.
Dans mes tests, une image LCP est apparue 35 % plus rapidement avec les 103 Early Hints. L'amélioration était encore plus marquée lorsque l'en-tête incluait également des feuilles de style.
Dernière révision par [url=https:\/\/www.linkedin.com\/in\/arjenkarel\/]Arjen Karel[\/url] en mars 2026
Les Early Hints sont un code d'état HTTP (103) envoyé avant que le serveur web n'envoie la réponse finale. Ils permettent au serveur d'indiquer au navigateur, tôt dans le processus de chargement, que certaines ressources comme une image ou une feuille de style sont critiques pour le rendu de la page.
La plupart des pages dynamiques prennent du temps à être générées. Le serveur interroge une base de données, exécute la logique de l'application et assemble le HTML. Pendant ce temps de traitement, le navigateur attend tout simplement. Les 103 Early Hints comblent cette lacune en indiquant au navigateur ce qu'il doit récupérer pendant qu'il attend la réponse réelle.
Les Early Hints remplacent le [url=https:\/\/developer.chrome.com\/blog\/removing-push]HTTP\/2 Server Push[\/url], désormais obsolète, que Chrome a supprimé dans sa version 106. Le Server Push regroupait les ressources avec la réponse finale et poussait souvent des octets que le navigateur avait déjà en cache. Les Early Hints évitent ce problème car ils ne sont que des suggestions ; le navigateur décide s'il doit y donner suite.
Les 103 Early Hints sont pris en charge par [url=https:\/\/caniuse.com\/mdn-http_status_103]93 % des navigateurs dans le monde[\/url] :
La limitation de Safari est importante. Si votre stratégie d'Early Hints repose entièrement sur le préchargement d'images ou de polices, les utilisateurs de Safari n'en bénéficieront pas. Incluez des suggestions de preconnect aux côtés des suggestions de preload afin que Safari prépare au moins la connexion aux origines de vos ressources.
Les Early Hints ne fonctionnent qu'avec HTTP\/2 ou HTTP\/3. Ils ne fonctionnent pas avec HTTP\/1.1, à partir d'iframes ou pour des requêtes qui ne sont pas des navigations. Le navigateur traite uniquement les suggestions pour Lorsqu'un navigateur demande une page, le serveur renvoie immédiatement une réponse 103 avant d'avoir fini de générer le HTML. Cette réponse indique au navigateur de commencer à récupérer l'[url=\/pagespeed\/preload-largest-contentful-paint-image]image LCP[\/url] et la feuille de style :
Pendant ce temps, le serveur génère la page. Une fois prête, il envoie la réponse finale :
Au moment où le navigateur reçoit la réponse 200, il a déjà commencé à télécharger l'image et la feuille de style. Cette longueur d'avance est ce qui accélère le [url=\/core-web-vitals\/largest-contentful-paint]Largest Contentful Paint[\/url].
Vous avez trois options principales, de la plus simple à celle offrant le plus de contrôle.
Si vous utilisez déjà [url=\/pagespeed\/configure-cloudflare-for-passing-the-core-web-vitals]Cloudflare pour la performance[\/url], l'activation des Early Hints se fait par un simple bouton. Accédez à Speed > Settings > Content Optimization et activez Early Hints. Cette option est disponible sur toutes les offres, y compris l'offre gratuite.
Cloudflare met en cache les en-têtes NGINX a ajouté une [url=https:\/\/blog.nginx.org\/blog\/nginx-introduces-support-103-early-hints]prise en charge native des 103 Early Hints[\/url] dans sa version 1.29.0 (juin 2025). La directive La carte Apache peut générer lui-même des réponses 103 en utilisant Contrairement à NGINX, Apache génère la réponse 103 au niveau du serveur sans que votre application n'ait besoin de la produire.
Les 103 Early Hints sont particulièrement efficaces lorsque votre serveur met un certain temps à répondre : pages dynamiques qui interrogent des bases de données, appellent des API ou rendent des modèles. Plus le [url=\/core-web-vitals\/time-to-first-byte]Time to First Byte[\/url] est lent, plus le navigateur a de temps pour agir sur les suggestions.
Les Early Hints apportent moins d'avantages lorsque :
Malgré une prise en charge par 93 % des navigateurs, l'adoption reste faible. Selon le [url=https:\/\/almanac.httparchive.org\/en\/2025\/performance]Web Almanac 2025[\/url], environ 5 % seulement des sites les plus consultés utilisent les 103 Early Hints. Le principal obstacle est de savoir quelles ressources suggérer pour chaque page, ce que la plupart des CMS ne gèrent pas automatiquement.
Ouvrez les DevTools de Chrome, accédez au panneau Network et rechargez la page. Cliquez sur la requête du document et vérifiez les en-têtes de réponse. Si les Early Hints fonctionnent, vous verrez un état Depuis la ligne de commande, vous pouvez vérifier avec curl :
Vous devriez voir à la fois une réponse J'ai testé deux scénarios pour mesurer l'impact sur le [url=\/core-web-vitals\/first-contentful-paint]First Contentful Paint[\/url] et le [url=\/core-web-vitals\/largest-contentful-paint]Largest Contentful Paint[\/url].
L'image LCP est apparue à l'écran 35 % plus tôt avec les 103 Early Hints par rapport à un préchargement classique dans le HTML.
L'ajout d'un fichier CSS de 85 ko aux suggestions a rendu la différence encore plus notable. Le FCP est passé de 1,8 seconde à 1,4 seconde, et le LCP de 3,2 secondes à 2,0 secondes.
Ces chiffres correspondent à ce que [url=https:\/\/blog.cloudflare.com\/early-hints-performance\/]Cloudflare a mesuré chez plus de 100 000 clients[\/url] : une amélioration du LCP de 6 % au 50e percentile et de 16 % au 75e percentile sur desktop. [url=https:\/\/performance.shopify.com\/blogs\/blog\/early-hints-at-shopify]Shopify a constaté une amélioration du LCP de 500 ms au p50[\/url] pendant le Black Friday et le Cyber Monday. Les gains les plus importants concernent les pages présentant des temps de réponse du serveur lents, ce qui est exactement le moment où les Early Hints ont le plus de temps pour agir.
Il existe une nuance de mesure à connaître. Depuis Chrome 133, le timing Si vous avez besoin de mesurer le temps de traitement du serveur séparément, Chrome 133 a introduit un nouvel horodatage 
Que sont les 103 Early Hints ?
Prise en charge par les navigateurs
preload et preconnect ; dns-prefetch et prefetch ne sont pas pris en charge dans les réponses 103.
À quoi ressemblent les 103 Early Hints ?
HTTP\/2 103 Early Hints
Link: <\/image.webp>; rel=preload; as=image
Link: <\/style.css>; rel=preload; as=style
HTTP\/2 200 OK
Content-Length: 1234
[le reste de la réponse]
Comment envoyer des 103 Early Hints
Cloudflare (le plus simple)
Link des réponses 200 de votre origine. Lors des requêtes suivantes, il envoie ces en-têtes mis en cache sous forme de réponse 103 avant de transmettre la requête à votre origine. Vous fournissez les suggestions en envoyant des en-têtes Link depuis votre application :
header("Link: <\/image.webp>; rel=preload; as=image", false);
header("Link: <\/style.css>; rel=preload; as=style", false);
NGINX (natif depuis la version 1.29.0)
early_hints transmet les réponses 103 de votre backend au client :
map {
navigate ;
}
server {
location \/ {
early_hints ;
proxy_pass http:\/\/backend.example.com;
}
}
sec-fetch-mode garantit que les suggestions ne sont envoyées que pour les requêtes de navigation via HTTP\/2 ou HTTP\/3. Votre application backend doit générer la réponse 103 ; NGINX la transmet.
Apache (2.4.58+)
mod_http2. Activez-le avec la [url=https:\/\/httpd.apache.org\/docs\/2.4\/mod\/mod_http2.html]directive H2EarlyHints[\/url] et définissez les ressources à suggérer :
H2EarlyHints on
H2EarlyHint Link "<\/style.css>;rel=preload;as=style"
H2EarlyHint Link "<\/image.webp>;rel=preload;as=image"
Quand les Early Hints sont-ils utiles (et quand ne le sont-ils pas) ?
Comment vérifier que les Early Hints fonctionnent
103 avant le 200 dans le détail du timing.
curl -v --http2 https:\/\/example.com 2>&1 | grep "< HTTP"
103 et une réponse 200.
Résultats des tests
1. Early Hints sur l'image LCP uniquement
HTTP\/2 103 Early Hints
Link: <\/image.webp>; rel=preload; as=image
2. Early Hints avec une feuille de style volumineuse et l'image LCP
HTTP\/2 103 Early Hints
Link: <\/image.webp>; rel=preload; as=image
Link: <\/style.css>; rel=preload; as=style
Early Hints et TTFB
responseStart du navigateur (utilisé par la plupart des outils pour signaler le [url=\/core-web-vitals\/time-to-first-byte]TTFB[\/url]) inclut la réponse 103. Cela signifie que votre TTFB signalé diminuera après l'activation des Early Hints, même si le temps de traitement réel de votre serveur n'a pas changé.
firstResponseHeadersStart qui indique quand les en-têtes finaux de la réponse 200 arrivent. Les outils de [url=https:\/\/coredash.app]Real User Monitoring[\/url] qui suivent les deux valeurs vous donnent une vision complète : le temps que les Early Hints ont fait gagner au navigateur et le temps que votre serveur a réellement mis à répondre.
[include]cwv\/authorbio.html[\/include]
