L'année dernière, nous avons démontré ce que nous entendions par « rapide comme l’éclair » lorsque nous avons présenté les performances exceptionnelles de Pages dans toutes les régions du monde, et aujourd'hui, nous sommes ravis d'annoncer une intégration qui confirme encore cet engagement en faveur de la rapidité, avec la prise en charge d'Early Hints pour Pages ! Early Hints vous permet de débloquer le chargement des ressources essentielles d'une page en amont d'une page HTML dont l'affichage est lent. Early Hints peut être utilisé pour améliorer l'expérience de chargement de vos visiteurs en réduisant considérablement des indicateurs de performance essentiels, tels que Largest Contentful Paint (LCP).
Qu'est-ce qu'Early Hints ?
Early Hints est une nouvelle fonctionnalité d'Internet prise en charge dans Chrome depuis la version 103, que Cloudflare a proposée en disponibilité générale pour les sites web utilisant son réseau. Early Hints remplace Server Push, et offre un mécanisme permettant de fournir à un navigateur des indications concernant les ressources essentielles de votre page (par exemple, les polices, les fichiers CSS et les images affichées au-dessus de la ligne de flottaison). Le navigateur peut commencer à charger ces ressources immédiatement, avant d'attendre une réponse HTML complète, ce qui permet d'utiliser du temps qui était auparavant perdu. Avant Early Hints, aucune activité ne pouvait être lancée tant que le navigateur n'avait pas reçu le premier octet de la réponse. Désormais, le navigateur peut utiliser ce temps de manière utile, alors qu'auparavant, il ne pouvait qu'attendre. Early Hints peut améliorer considérablement les performances de votre site web, notamment au regard d'indicateurs tels que LCP.
Comment fonctionne Early Hints
Cloudflare met en cache les en-têtes Link de type preload et preconnect transmis depuis votre réponse 200 OK, et les transmet à l'avance pour toute requête ultérieure sous forme de réponse 103 d'Early Hints.
Concrètement, une conversation HTTP se présente maintenant ainsi :
Requête
GET /
Host: example.com
Réponse d'Early Hints
103 Early Hints
Link: </styles.css>; rel=preload; as=style
Réponse
200 OK
Content-Type: text/html; charset=utf-8
Link: </styles.css>; rel=preload; as=style
<html>
<!-- ... -->
</html>
Early Hints sur Cloudflare Pages
Early Hints peut être particulièrement bénéfique aux sites web hébergés sur Cloudflare Pages. Si vous utilisez Pages Functions pour générer des pages dynamiques avec un rendu côté serveur (SSR), il y a de fortes chances qu'Early Hints améliore considérablement votre site web.
Test des performances
Nous avons créé un site web d'e-commerce de démonstration simple afin d'évaluer les performances d'Early Hints.
Sur cette page d'accueil figurent le prix de chaque article et un compteur de stock restant. La page elle-même comporte uniquement du code HTML et des fichiers CSS créés à la main, mais les valeurs de prix et d'inventaire sont modélisées en direct pour chaque requête traitée avec Pages Functions. Pour simuler le chargement depuis une source de données externe (pouvant reposer sur KV, Durable Objects, D1 ou même une API externe telle que Shopify), nous avons ajouté un délai d'attente fixe avant la résolution de ces données. Nous incluons des liens preload dans notre réponse à certaines ressources essentielles :
- une feuille de style CSS externe,
- l'image du T-shirt,
- l'image de la casquette,
- et l'image du dessus de touche.
La toute première requête produit une cascade, comme vous pouvez vous y attendre. La première requête est bloquée pendant un laps de temps considérable, durant lequel nous résolvons ces données de prix et d'inventaire. Une fois chargé, le navigateur analyse le code HTML, extrait les ressources externes et transmet des requêtes ultérieures pour les contenus correspondants. Les fichiers CSS et les images augmentent considérablement le temps de chargement, en raison de leurs dimensions et leur qualité élevées. L'indicateur Largest Contentful Paint (LCP) se produit pendant le chargement de l'image du T-shirt, et le document est finalisé lorsque toutes les requêtes sont satisfaites.
C'est lors des requêtes ultérieures que les choses deviennent intéressantes ! Ces liens preload sont mis en cache sur le réseau mondial de Cloudflare, puis sont transmis avant le document dans une réponse 103 d'Early Hints. Maintenant, l'apparence de la cascade est très différente. La requête initiale est transmise de la même manière, mais les requêtes concernant le fichier CSS et les images sont considérablement décalées vers la gauche, car elles peuvent être lancées dès la réception de la réponse 103. Le navigateur commence à récupérer ces ressources en attendant la fin du rendu côté serveur de la requête initiale. L'indicateur LCP se produit à nouveau une fois après le chargement de l'image du T-shirt, mais cette fois-ci, il est avancé de 530 ms, car son chargement a démarré 752 ms plus tôt, et le chargement intégral du document se termine 562 ms plus tôt, toujours parce que le chargement de toutes les ressources externes a pu démarrer plus rapidement.
Les quatre dernières requêtes (surlignées en jaune) sont renvoyées sous forme de réponses 304 Not Modified avec un en-tête If-None-Match. Par défaut, Cloudflare Pages demande au navigateur de confirmer que toutes les ressources sont récentes et par conséquent, dans l'éventualité où elles ont été mises à jour entre la réponse d'Early Hints et le moment de leur utilisation, le navigateur vérifie si elles ont été modifiées. Puisque ce n'est pas le cas, il n'y a pas de contenu à télécharger, et la réponse est rapidement finalisée. Ceci peut être évité en définissant un en-tête Cache-Control personnalisé pour ces ressources avec un fichier _headers. Par exemple, vous pouvez mettre en cache ces images pendant une minute avec une règle telle que :
# _headers
/*.png
Cache-Control: max-age=60
Nous pourrions pousser plus loin cet audit des performances en explorant d'autres fonctionnalités que propose Cloudflare, telles que la minimisation CSS automatique, Cloudflare Images et Redimensionnement d'image.
Nous servons déjà Cloudflare Pages depuis l'un des réseaux les plus rapides du monde ; Early Hints permet simplement aux développeurs de profiter encore davantage de notre réseau mondial.
Utilisation d'Early Hints et de Cloudflare Pages
La fonctionnalité Early Hints de Cloudflare est actuellement limitée à la mise en cache des en-têtes Link dans la réponse d'une page web. Habituellement, cela signifierait que les utilisateurs de Cloudflare Pages devraient utiliser le fichier _headers ou Pages Functions pour appliquer ces en-têtes. Cependant, pour votre confort, nous avons également ajouté la possibilité de transformer tout élément HTML <link> inclus dans le corps de la page dans les en-têtes Link. Ceci vous permet de contrôler directement les données Early Hints que vous envoyez, directement depuis le même document dans lequel vous référencez ces ressources ; plus besoin de sortir du code HTML pour profiter d'Early Hints.
Par exemple, pour le document HTML suivant, une réponse Early Hints sera générée :
Document HTML
<!DOCTYPE html>
<html>
<head>
<link rel="preload" as="style" href="/styles.css" />
</head>
<body>
<!-- ... -->
</body>
</html>
Réponse d'Early Hints
103 Early Hints
Link: </styles.css>; rel=preload; as=style
Comme nous l'avons indiqué plus haut, des en-têtes Link peuvent également être définis avec un fichier _headers, si vous préférez :
# _headers
/
Link: </styles.css>; rel=preload; as=style
Early Hints (et l'analyse automatique du code HTML <link>) a déjà été activé automatiquement pour tous les domaines pages.dev. Si vous avez configuré des domaines personnalisés pour votre projet Pages, assurez-vous d'activer Early Hints sur ce domaine depuis le tableau de bord Cloudflare, sur l'onglet « Speed » (Vitesse). D'autres informations sont disponibles dans notre documentation.
Par ailleurs, à l'avenir, nous espérons proposer une prise en charge des fonctionnalités Smart Early Hints. Smart Early Hints permettra à Cloudflare de générer automatiquement des indications Early Hints, même en l'absence d'en-tête Link ou d'éléments <link>, en analysant le trafic du site web et en déduisant quelles ressources sont importantes pour une page donnée. Nous partagerons prochainement d'autres informations sur Smart Early Hints.
Entre-temps, vous pouvez tester Early Hints sur Pages dès maintenant ! N'hésitez pas à nous faire part de l'amélioration des temps de chargement que vous constatez sur notre serveur Discord.