Nous sommes heureux d'annoncer que nous rendons les services Early Hints et Fetch Priorities automatiques grâce à la puissance du réseau de Cloudflare. Il y a près d'un an, nous avons inauguré Early Hints. Early Hints est une méthode qui permet à un serveur web de transmettre de manière asynchrone des instructions au navigateur pendant que le serveur web prépare la réponse complète. Le navigateur reçoit ainsi des indications proactives, permettant d'accélérer le chargement de la page web pour le visiteur, au lieu d'attendre passivement la réponse de la page web complète.
Lors des premières expériences réalisées en laboratoire, nous avons observé des améliorations supérieures à 30 % des temps de chargement de pages. Depuis, nous avons transmis près de deux billions d'indications pour le compte de plus de 150 000 sites web utilisant le service.
L'utilisation efficace d'Early Hints sur un site web nécessite que les en-têtes de liens HTTP ou les éléments de liens HTML soient configurés de manière à spécifier les ressources devant être préchargées ou les serveurs tiers devant être préconnectés. Ces décisions nécessitent de comprendre comment votre site web interagit avec les navigateurs et d'identifier, dans les indications, les ressources susceptibles de bloquer le rendu d'une page sans mettre en œuvre des stratégies de priorisation pouvant saturer la bande passante du réseau pour des ressources non essentielles (concrètement, cela signifie que vous ne pouvez pas utiliser Early Hints pour toutes les ressources et espérer obtenir de bons résultats).
Pour les utilisateurs qui possèdent ces connaissances et peuvent configurer Early Hints au niveau du serveur d'origine (ou via une instance Workers), le service fonctionne parfaitement. Cependant, pour les utilisateurs qui n'ont pas accès au serveur d'origine (par exemple, les plateformes SaaS), qui ne sont pas sûrs des ressources optimales à précharger/prioriser ou qui préfèrent simplement prioriser le développement de leur application, la question suivante se pose : « En tant que serveur intermédiaire, Cloudflare ne devrait-il pas connaître la meilleure approche pour prioriser les performances de mon site web ? »
La réponse est oui ; c'est pourquoi nous sommes impatients de commencer à expliquer de quelle façon Smart Hints déterminera la meilleure priorité pour les ressources web, sans nécessiter que les développeurs configurent quoi que ce soit. Si vous souhaitez nous aider à tester la version bêta de cette fonctionnalité, vous pouvez vous inscrire ici, et nous vous contacterons dans le courant de l'année pour vous expliquer comment vous pouvez nous aider à tester Smart Hints.
Contexte
Lorsque vous consultez une page web, votre navigateur demande, en réalité, de nombreuses ressources spécifiques au serveur. Ces ressources englobent, entre autres, les éléments visibles, tels que les images, le texte et les vidéos, mais également les composants logiques qui s'exécutent en coulisses (JavaScript, etc.) et permettent le traitement des données analytiques web, des fonctionnalités et d'autres aspects également. L'ordre dans lequel ces ressources sont chargées par le navigateur joue un rôle essentiel lorsqu'il s'agit de déterminer la rapidité avec laquelle les utilisateurs peuvent afficher la page et interagir avec elle.
Lorsque votre navigateur reçoit une réponse du serveur, il analyse la réponse HTML de manière séquentielle, du début à la fin. Lorsque la réponse HTML parvient au navigateur, elle est divisée en deux parties : <head> et <body>.
La section <head> apparaît au début de la réponse HTML et contient des éléments essentiels tels que des feuilles de style, des scripts et d'autres instructions destinées au navigateur. Les feuilles de style définissent l'apparence de la page, tandis que les scripts fournissent la logique nécessaire à l'exécution des fonctions interactives et des fonctionnalités.1
Les feuilles de style sont importantes pour assurer la rapidité du chargement, car les navigateurs attendent de les recevoir pour savoir comment présenter le contenu au visiteur ; quant aux scripts, ils sont intéressants parce qu'ils peuvent se comporter différemment en fonction des instructions fournies au navigateur. Si un script ne contient pas d'instructions spécifiques (defer/async/inline, par exemple), il peut devenir une ressource « bloquante ». Lorsque le navigateur rencontre une ressource de script bloquante, il interrompt le traitement de la page web et attend que le script soit entièrement chargé et exécuté. Ceci permet de s'assurer que les fonctionnalités du script sont disponibles et utilisables par le visiteur. Toutefois, ce comportement bloquant peut retarder l'affichage du contenu pour l'utilisateur, car le navigateur doit attendre la fin de l'exécution du script avant de continuer.
Aucun contenu n'est visible pour le visiteur tant que le navigateur n'a pas atteint la section <body> du document. C'est pourquoi il est essentiel d'optimiser au maximum le processus de chargement de la section <head>. La réduction du temps de chargement des feuilles de style et des scripts bloquants permet au navigateur de commencer à rendre plus rapidement le contenu de la page, permettant ainsi aux visiteurs d'afficher et d'interagir plus rapidement avec la page web.
Assurer des performances web optimales peut s'avérer être un défi complexe. S'il incombe généralement aux navigateurs de déterminer l'ordre de chargement des différentes ressources nécessaires pour traiter le rendu d'une page, divers outils (Early Hints, Fetch Priority, Lazy-Loading, H2 Priorities) ont été récemment publiés afin d'aider les développeurs à spécifier la priorité des ressources uniques pour les navigateurs, et ainsi, à améliorer les performances lors du chargement des sites web. Bien que ces outils et méthodes de spécification de la priorité des ressources puissent se montrer efficaces, leur déploiement nécessite une mise en œuvre et des tests rigoureux.
Outils de gestion de la priorité
Early Hints et Fetch Priorities sont deux méthodes d'amélioration des performances des sites web qui ont gagné en popularité. Ces outils fournissent aux navigateurs des informations concernant l'ordre correct de chargement des ressources, afin d'améliorer les performances des ressources essentielles.
Early Hints
Early Hints permet au serveur de fournir des informations au client avant que la réponse finale ne soit disponible.
Lorsqu'un client transmet une requête à un serveur, ce dernier peut répondre en transmettant une indication Early Hints concernant la réponse finale. Cette indication Early Hints est une réponse distincte, qui inclut des en-têtes liés à la réponse finale, notamment des objets statiques importants pouvant être récupérés précocement et des liens vers des ressources connexes.
L'objectif du service Early Hints est de permettre au client de commencer à traiter les informations reçues dans l'attente de la réponse finale. Le client peut utiliser Early Hints pour déclencher le préchargement des ressources et la préconnexion aux serveurs disposant d'informations concernant la réponse finale, ce qui peut réduire le temps de chargement des pages.
Fetch Priorities
Fetch Priorities (anciennement appelé Priority Hints) est un autre outil puissant dédié à l'optimisation du chargement des ressources.
Lors de l'analyse d'une page web, les navigateurs web priorisent souvent la récupération de ressources telles que les scripts et les feuilles de style, afin d'optimiser l'ordre de téléchargement et d'utiliser efficacement la bande passante. Les priorités attribuées à ces ressources sont déterminées par les navigateurs en fonction de facteurs tels que le type de ressource, l'emplacement de la ressource sur la page web et la position de la ressource dans la réponse HTML. Par exemple, les images situées dans la zone visible par le visiteur doivent recevoir une priorité élevée, tandis que les scripts essentiels chargés au début de la section <head> peuvent se voir attribuer une priorité très élevée. Bien que les navigateurs assurent généralement une gestion efficace de l'attribution des priorités, il est important de noter qu'ils ne sont pas optimaux dans tous les scénarios d'utilisation.
Avec Fetch Priorities, les développeurs peuvent mieux maîtriser le chargement des ressources et attribuer des priorités plus ou moins élevées aux différentes ressources de leurs pages web, ce qui peut contribuer à optimiser leurs performances globales.
Bien qu'Early Hints et Fetch Priorities se montrent tous deux incroyablement utiles pour optimiser les performances des pages web, ces services nécessitent souvent de disposer d'un accès aux ressources HTML, afin de modifier leurs priorités, et de connaître la meilleure approche afin de prioriser de manière optimale le chargement de certaines ressources. Si l'association de ces outils permet aux développeurs de mettre en œuvre des stratégies toujours plus complexes d'amélioration des performances, elle nécessite également une multitude de tests et d'opérations de configuration et de gestion au fur et à mesure de l'évolution des pages web. Smart Hints facilitera l'utilisation de ces outils en tirant parti de nos balises de données RUM et des données heuristiques pour améliorer la mise en œuvre des stratégies de priorisation, sans que les développeurs n'aient à lever le petit doigt.
Comment allons-nous prioriser les ressources ?
Le service Smart Hints de Cloudflare s'appuiera sur les fonctionnalités d'Early Hints et de Fetch Priorities pour optimiser la diffusion des ressources en tirant parti de nos vastes données RUM concernant des sites web partout sur Internet ; nous allons optimiser la priorisation des ressources à la volée. Smart Hints déterminera dynamiquement les conseils et priorités pertinents en fonction d'une réponse spécifique, à la volée.
Mais comment ?
Cloudflare collecte les données relatives aux performances de deux manières : grâce aux tests synthétiques et à l'approche Real User Measurements (RUM). Les tests synthétiques consistent à recueillir les données relatives aux performances en chargeant une page web dans un navigateur automatisé, dans un environnement contrôlé. L'approche RUM recueille également des données sur les performances, toutefois, auprès d'utilisateurs réels qui accèdent à la page web dans de véritables navigateurs. Le mode opératoire de l'approche RUM consiste à injecter un petit fragment de code JavaScript, ou une balise, dans la page web. Cloudflare collecte d'immenses quantités de données RUM sur des milliers de sites.
À partir de ces deux sources de données relatives aux performances, Cloudflare peut analyser intelligemment les goulets d'étranglement lors du chargement de pages web. Si les goulets d'étranglement sont dus au téléchargement de ressources bloquant le rendu de la page, Cloudflare peut générer des indications Early Hints destinées au navigateur, afin de prioriser le téléchargement de ces ressources.
Au fur et à mesure du déploiement de Smart Hints, nous explorerons l'utilisation de modèles d'apprentissage, afin de rechercher des modèles susceptibles d'être transformés en données heuristiques. Ces données heuristiques pourront ensuite être utilisées afin d'améliorer les performances de sites similaires n'utilisant pas l'approche RUM ou les tests synthétiques.
Avec Smart Hints, Cloudflare peut révolutionner la fourniture des sites web et des applications, et ainsi, rendre l'expérience de navigation plus rapide, plus fluide et plus agréable. En déduisant la priorité adéquate pour un client donné, Cloudflare aidera les clients à identifier les meilleures priorités pour améliorer les performances de leurs sites web, tout en minimisant le temps nécessaire à l'optimisation d'une page web continuellement changeante.
Comment puis-je aider Cloudflare à atteindre cet objectif ?
Avant de déployer ce système à plus grande échelle, nous effectuerons des tests bêta à grande échelle sur nos systèmes, afin de nous assurer de prendre les meilleures décisions concernant les performances pour tous les types de contenu.
Au cours des prochains mois, nous allons constituer une « promotion bêta » et travailler avec celle-ci, afin de nous assurer que tous les utilisateurs bénéficient d'une expérience satisfaisante avec Smart Hints. Si vous souhaitez nous aider dans cette entreprise, veuillez vous inscrire pour rejoindre la version bêta fermée ici (accessible depuis l'onglet « Speed » du tableau de bord) ; nous vous contacterons lorsque nous serons prêts à vous permettre d'activer le service et nous faire part de vos commentaires.
Conclusion
Nous sommes impatients de travailler avec notre communauté afin de développer et d'optimiser cette expérience sans codage/configuration, et ainsi, améliorer considérablement les temps de chargement des pages pour tous les utilisateurs.
1Oui, les scripts et les feuilles de style peuvent également être placés dans la section <body>, mais leur emplacement principal est la section <head>.