Abonnez-vous pour recevoir des notifications sur les nouveaux articles :

Cloudflare Pages devient encore plus rapide avec Early Hints

2022-10-07

Lecture: 4 min.
Cet article est également disponible en English, en 繁體中文, en Deutsch, en Español et en 简体中文.

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).

Cloudflare Pages gets even faster with Early Hints

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

Réponse d'Early Hints

GET /
Host: example.com

Réponse

103 Early Hints
Link: </styles.css>; rel=preload; as=style

Early Hints sur Cloudflare Pages

200 OK
Content-Type: text/html; charset=utf-8
Link: </styles.css>; rel=preload; as=style

<html>
<!-- ... -->
</html>

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 :

A screenshot of the landing page of a demo Cloudflare e-commerce website selling a t-shirt, cap and keycap. Each item is branded with the Cloudflare logo, and has a price and
  • 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.

A network diagnostics waterfall for the page without Early Hints, as described above.

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 :

A network diagnostics waterfall with Early Hints, as described above.

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.

# _headers

/*.png
  Cache-Control: max-age=60

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

Réponse d'Early Hints

<!DOCTYPE html>
<html>
  <head>
    <link rel="preload" as="style" href="/styles.css" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

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 :

103 Early Hints
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.

# _headers

/
  Link: </styles.css>; rel=preload; as=style

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.

Regarder sur Cloudflare TV

Nous protégeons des réseaux d'entreprise entiers, aidons nos clients à développer efficacement des applications à l'échelle d'Internet, accélérons tous les sites web ou applications Internet, repoussons les attaques DDoS, tenons les pirates informatiques à distance et pouvons vous accompagner dans votre parcours d'adoption de l'architecture Zero Trust.

Accédez à 1.1.1.1 depuis n'importe quel appareil pour commencer à utiliser notre application gratuite, qui rend votre navigation Internet plus rapide et plus sûre.

Pour en apprendre davantage sur notre mission, à savoir contribuer à bâtir un Internet meilleur, cliquez ici. Si vous cherchez de nouvelles perspectives professionnelles, consultez nos postes vacants.
Early Hints (FR)Cloudflare Pages (FR)Rapidité et fiabilitéNouveautés produits

Suivre sur X

Greg Brimble|@GregBrimble
Cloudflare|@cloudflare

Publications associées

09 octobre 2024 à 13:00

Improving platform resilience at Cloudflare through automation

We realized that we need a way to automatically heal our platform from an operations perspective, and designed and built a workflow orchestration platform to provide these self-healing capabilities across our global network. We explore how this has helped us to reduce the impact on our customers due to operational issues, and the rich variety of similar problems it has empowered us to solve....

08 octobre 2024 à 13:00

Cloudflare acquires Kivera to add simple, preventive cloud security to Cloudflare One

The acquisition and integration of Kivera broadens the scope of Cloudflare’s SASE platform beyond just apps, incorporating increased cloud security through proactive configuration management of cloud services. ...

27 septembre 2024 à 13:00

AI Everywhere with the WAF Rule Builder Assistant, Cloudflare Radar AI Insights, and updated AI bot protection

This year for Cloudflare’s birthday, we’ve extended our AI Assistant capabilities to help you build new WAF rules, added new AI bot & crawler traffic insights to Radar, and given customers new AI bot blocking capabilities...

26 septembre 2024 à 13:00

Making Workers AI faster and more efficient: Performance optimization with KV cache compression and speculative decoding

With a new generation of data center accelerator hardware and using optimization techniques such as KV cache compression and speculative decoding, we’ve made large language model (LLM) inference lightning-fast on the Cloudflare Workers AI platform....