103 Early Hints

Qu'est-ce que 103 - Early hints ?

Comment un navigateur utilise-t-il 103 - Early hints ?

Les Early hints ne sont actuellement supportés que par Google Chrome à partir de la version 94. Comme Early hints est encore une fonction expérimentale, vous devrez lancer Chrome avec un soi-disant Chrome Browser Flag depuis la ligne de commande. Dans mon cas, je dois lancer Chrome depuis le terminal avec la commande :

google-chrome --enable-features=EarlyHintsPreloadForNavigation

Les Early hints ne fonctionnent pas lorsque :

• Des Early hints provenant d'une source autre que le sujet principal (le HTML) sont envoyés
• Des Early Hints sont envoyés depuis une iframe
• Des Early hints sont envoyés via HTTP/1.1 ou antérieur
• Des Early hints contiennent un dns-prefetch ou un prefetch hint

Les Early hints ne fonctionneront que pour les resource hints preload et preconnect lorsqu'ils sont envoyés depuis le document principal via HTTP2 ou HTTP/3. Il n'est pas permis de passer l'en-tête early hints depuis, par exemple, une image ou une iframe.

À quoi ressemblent les 103 Early hints ?

Après l'implémentation de 103 Early hints, dès qu'un navigateur demande une page web, un en-tête 103 Early hints est immédiatement renvoyé. Par exemple, cet en-tête indique que image.webp et style.css doivent être préchargés.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style

Pendant ce temps, le serveur peut commencer à générer la "vraie" réponse HTTP. Pour les pages dynamiques, cela peut prendre un peu de temps. Une fois que le serveur est prêt à l'envoyer, la réponse finale est envoyée.

HTTP/1.1 200 OK
Date: Thurs, 16 Sept 2021 11:30:00 GMT
Content-Length: 1234
[le reste de la réponse]

Envoyer 103 Early hints

En termes de PageSpeed, l'approche la plus rapide pour envoyer 103 Early hints est via votre propre serveur. Utilisez ce guide pour configurer 103 Early hints vous-même sur le serveur web Apache ou via le module NGINX expérimental. Activer 103 Early hints n'est pas facile à faire et les early hints ne s'intègrent pas encore bien avec les CMS populaires comme WordPress.

C'est pourquoi le moyen le plus simple actuellement pour activer les early hints est via Cloudflare. Inscrivez-vous pour early hint. Une fois admis, naviguez vers "Speed" -> "Optimization" et activez Early Hints

Cloudflare acceptera les en-têtes resource hint et les traduira en un en-tête 103 early resource. Vous pouvez simplement envoyer un early hint en envoyant un en-tête preload ou preconnect. Cloudflare traduit ensuite cela en un en-tête 103 early hint.
Avec PHP et Cloudflare, les 103 Early hints peuvent être envoyés avec ce code :

header("Link: </image.webp>; rel=preload; as=image", false);
header("Link: </style.css>; rel=preload; as=style", false);

Résultats Lighthouse pour 103 Early hints

La question la plus importante est bien sûr : "Que signifie 103 early resource pour mes Core Web Vitals ?" J'ai testé 2 scénarios courants.

1. Early resource hint sur l'élément LCP

Immédiatement après le premier test, j'ai remarqué à quel point les early hints peuvent être efficaces. L'élément LCP (une image) est apparu à l'écran 35 % plus tôt que sans l'en-tête 103 Early hints présent.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image

2. Early resource hint avec une grande feuille de style et l'élément LCP

Pour le deuxième test, j'ai ajouté un fichier CSS de 85 ko à la page. La différence dans les résultats Core Web Vitals est encore plus notable. Le First Contentful Paint (FCP) s'est amélioré de 1,8 seconde à 1,4 seconde et le Largest Contentful Paint (LCP) s'est amélioré de 3,2 secondes à seulement 2 secondes.

HTTP/1.1 103 Early Hints
Link: </image.webp>; rel=preload; as=image
Link: </style.css>; rel=preload; as=style