Premiers conseils, chargements de page plus rapides en utilisant le temps d'attente du serveur avec HTTP 103 - ūüŹÜ Serveur g√©r√©
3 juillet 2022

Premiers conseils, chargements de page plus rapides en utilisant le temps d'attente du serveur avec HTTP 103

Découvrez comment votre serveur peut envoyer des suggestions de navigateur sur les ressources secondaires critiques et améliorer la vitesse de chargement avec Early Hints

Vous voulez conna√ģtre un secret sur les performances Internet ? Les navigateurs passent un temps d√©mesur√© √† se tourner les pouces en attendant de savoir quoi faire. Cette attente affecte les performances de chargement de la page. Aujourd'hui, nous sommes heureux de discuter de ce que sont les premiers conseils, qui am√©liorent consid√©rablement les performances de chargement des pages du navigateur et r√©duisent le temps d'attente.

Que sont les premiers conseils ?

Si nous traduisons littéralement le terme "Early Hints", nous obtiendrons "First Suggestions" en italien. Ce terme est certainement beaucoup plus immédiat et éloquent pour mieux comprendre la fonctionnalité proposée dès 2017 qui voit le jour vers la fin juin 2022.

Les sites Web sont devenus plus sophistiqu√©s au fil du temps. Par cons√©quent, il n'est pas rare qu'un serveur effectue un travail non trivial (par exemple, acc√©der √† des bases de donn√©es ou √† des CDN acc√©dant au serveur d'origine) pour produire le code HTML de la page demand√©e. Malheureusement, ce ¬ę temps de r√©flexion du serveur ¬Ľ, techniquement appel√© ¬ę Temps de r√©flexion ¬Ľ, entra√ģne une latence suppl√©mentaire avant que le navigateur ne puisse commencer √† afficher la page. En effet, la connexion reste inactive aussi longtemps que le serveur pr√©pare la r√©ponse.

Sans premiers conseils : tout est bloqu√© sur le serveur, ce qui d√©termine comment r√©pondre pour la ressource principale.

Early Hints est un code d'√©tat HTTP ( 103 Early Hints) utilis√© pour envoyer une r√©ponse HTTP pr√©liminaire avant une r√©ponse finale. Cela permet √† un serveur d'envoyer des suggestions au navigateur concernant des sous-ressources critiques (par exemple, feuille de style pour la page, JavaScript critique) ou des sources qui seront probablement utilis√©es par la page, pendant que le serveur est occup√© √† g√©n√©rer la ressource principale. Le navigateur peut utiliser ces conseils pour chauffer les connexions et demander des ressources secondaires en attendant la ressource principale. En d'autres termes, Early Hints aide le navigateur √† tirer parti de ce "temps de r√©flexion du serveur" en effectuant certaines t√Ęches √† l'avance, acc√©l√©rant ainsi le chargement de la page.

Avec les premiers indices : le serveur peut fournir une r√©ponse partielle avec des indices de ressources tout en d√©terminant la r√©ponse finale.

Dans certains cas, l'am√©lioration des performances du la plus grande peinture contente il peut aller de plusieurs centaines de millisecondes, comme observ√© par Shopify e par Cloud Flare , et jusqu'√† une seconde plus rapide, comme le montre cette comparaison avant/apr√®s :

Comparaison avant / apr√®s des premiers conseils sur un site Web d'essai ex√©cut√© avec WebPageTest (Moto G4 - DSL) Le cycle typique requ√™te/r√©ponse entre navigateur et serveur laisse beaucoup de place √† l'optimisation. Lorsque vous tapez une adresse dans la barre de recherche de votre navigateur et que vous appuyez sur Entr√©e, un certain nombre de choses se produisent pour vous fournir le contenu dont vous avez besoin, aussi rapidement que possible. Votre navigateur convertit d'abord le nom d'h√īte dans l'URL en une adresse IP, puis √©tablit une premi√®re connexion au serveur sur lequel le contenu est stock√©. Une fois la connexion √©tablie, la demande proprement dite est envoy√©e. Il s'agit souvent d'une requ√™te GET avec une s√©rie d'informations sur ce que le navigateur peut et ne peut pas montrer √† l'utilisateur final. Suite √† la requ√™te, le navigateur doit attendre que le serveur d'origine envoie les premiers octets de la r√©ponse avant que la page ne commence √† s'afficher. En ce moment, le serveur est occup√© √† faire toutes sortes de logiques m√©tier (recherche d'√©l√©ments dans des bases de donn√©es, personnalisation de la page, d√©tection de fraude, etc.) avant de cracher une r√©ponse au navigateur.

Une fois la réponse de la page HTML d'origine reçue, le navigateur doit ensuite analyser la page, générer un modèle d'objet de document (DOM) et commencer à charger les sous-ressources spécifiées dans la page, telles que des images, des scripts et des feuilles de style supplémentaires. .

Jetons un coup d'Ňďil √† cela en action. Vous trouverez ci-dessous la cascade de performances pour une page de paiement sur pinecoffeesupply.com, un caf√© devanture sur Shopify :

Premiers conseils Shopify exemple

La page ne peut pas √™tre rendue (et l'acheteur ne peut pas obtenir la dose de caf√© et le caf√© ne peut pas √™tre pay√© !) Tant que les √©l√©ments cl√©s ne sont pas charg√©s. Les informations sur les sous-ressources n√©cessaires au navigateur pour charger la page ne sont pas disponibles tant que le serveur n'a pas attendu et renvoy√© la r√©ponse initiale (le premier document du tableau ci-dessus).

Dans l'exemple précédent, le chargement de la page aurait pu être accéléré si le navigateur avait su, avant de recevoir la réponse complète, que la feuille de style et les quatre scripts suivants seraient nécessaires pour rendre la page.

La tentative de parall√©liser cette d√©pendance est l'objectif d'Early Hints : utiliser de mani√®re productive cette "temps d'attente du serveur"Pour permettre au navigateur d'effectuer des √©tapes critiques de rendu de page avant l'arriv√©e de la r√©ponse compl√®te du serveur. La barre verte "r√©flexion" chevauche la barre bleue "t√©l√©charger le contenu", permettant √† la fois au navigateur et au serveur de pr√©parer la page en m√™me temps. Plus besoin d'attendre. C'est de cela qu'il s'agit dans Early Hints !

¬ę Les entrepreneurs savent que la premi√®re impression compte. Les donn√©es de Shopify montrent qu'en moyenne, lorsqu'un magasin am√©liore de 10 % la vitesse de la premi√®re page du parcours de l'acheteur, il y a une augmentation de 7 % des conversions. Nous pensons que Early Hints est tr√®s prometteur comme un autre outil pour aider √† am√©liorer les performances et l'exp√©rience de tous les marchands et clients."
Colin Bendel , directeur de l'ing√©nierie des performances de Shopify

 

Mise en Ňďuvre des premiers conseils

Early Hints est disponible à partir de la version 103 de Chrome, en réponse aux demandes de navigation ou aux interactions des utilisateurs qui modifient l'URL dans la barre d'état, avec prise en charge des suggestions de préconnexion et de préchargement.

Avant d'approfondir le sujet, gardez √† l'esprit que les suggestions initiales ne sont pas utiles si votre serveur peut imm√©diatement envoyer un 200 (ou d'autres r√©ponses finales). Au lieu de cela, envisagez d'utiliser la r√©ponse normale link rel=preloadlink rel=preconnectsur la r√©ponse principale ( Lien rel en-t√™te HTTP ) ou dans la r√©ponse principale ( <link>√©l√©ments), dans de telles situations. Pour les cas o√Ļ votre serveur a besoin de temps pour g√©n√©rer la r√©ponse principale, lisez la suite !

De manière très directe, au-delà de nombreuses virtuosités techniques, si vous utilisez un cache statique efficace avec un Temps jusqu'au premier octet très faible et rapide (moins de 200ms), les premiers conseils n'offriront probablement aucun avantage tangible sinon peut-être de l'ordre de quelques millisecondes.

La première étape pour tirer parti des premiers conseils consiste à identifier vos principales pages de destination - les pages à partir desquelles vos utilisateurs commencent généralement lorsqu'ils visitent votre site Web. Il peut s'agir de la page d'accueil ou de pages de liste de produits populaires si vous avez beaucoup d'utilisateurs d'autres sites Web. La raison pour laquelle ces points d'entrée sont plus importants que d'autres pages est que l'utilité des premiers conseils diminue à mesure que l'utilisateur navigue sur votre site Web (c'est-à-dire , le navigateur est plus susceptible d'avoir toutes les sous-ressources dont il a besoin dans la seconde ou la troisième navigation suivante). C'est toujours une bonne idée de faire une bonne première impression aussi!

Maintenant que vous avez cette liste prioritaire de landing pages, la prochaine √©tape consiste √† identifier quelles sources ou sous-ressources seraient de bons candidats pour vos suggestions. pr√©-connexion o pr√©charger , en premi√®re approximation. En r√®gle g√©n√©rale, il s'agit de sources et de ressources secondaires qui contribuent le plus aux mesures cl√©s des utilisateurs, telles que La plus grande peinture riche en contenu o Premi√®re peinture contentieuse . Plus concr√®tement, recherchez des ressources secondaires qui bloquent le rendu telles que le JavaScript synchrone, les feuilles de style ou m√™me les polices Web. De m√™me, recherchez des sources qui h√©bergent des sous-ressources qui contribuent beaucoup aux mesures cl√©s des utilisateurs. Remarque : si vos √©l√©ments principaux utilisent d√©j√† <link rel=preconnect>o<link rel=preload>, vous pouvez consid√©rer ces sources ou actifs comme des candidats pour Early Hints. Vous voyez cet article pour plus de d√©tails.

Bien que ce soit un bon point de d√©part, ce n'est pas n√©cessairement suffisant. La deuxi√®me √©tape consiste √† minimiser le risque d'utiliser les premiers conseils sur des ressources ou des sources qui peuvent √™tre obsol√®tes ou ne plus √™tre utilis√©es par la ressource principale. Par exemple, les ressources mises √† jour fr√©quemment et avec la version (par exemple example.com/css/main.fa231e9c.css) n'est peut-√™tre pas le meilleur choix. Notez que ce probl√®me n'est pas sp√©cifique √† Early Hints, il s'applique √† n'importe quel lien rel=preloadrel=preconnectpartout o√Ļ ils pourraient √™tre pr√©sents. C'est le type de d√©tail qui est le mieux trait√© avec l'automatisation ou la mod√©lisation (par exemple, un processus manuel est plus susceptible d'entra√ģner des URL de hachage ou de version incompatibles entre link rel=preloadet la balise HTML r√©elle utilis√©e par la ressource).

Par exemple, consid√©rons le flux suivant :

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

Le serveur s'attend √† ce que main.abcd100.csssera n√©cessaire et sugg√®re de le pr√©charger via Early Hints :

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Quelques instants plus tard, la page Web est servie, y compris le CSS li√©. Malheureusement, cette ressource CSS est fr√©quemment mise √† jour et la ressource principale a d√©j√† cinq versions d'avance ( abcd105) de la ressource CSS attendue ( abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

En g√©n√©ral, visez des sources et des origines qui sont assez stables et largement ind√©pendantes du r√©sultat pour la ressource primaire. Si n√©cessaire, vous pouvez envisager de diviser vos actifs cl√©s en deux : une partie stable con√ßue pour √™tre utilis√©e avec Early Hints et une partie plus dynamique laiss√©e √† r√©cup√©rer apr√®s la r√©ception de la ressource principale par le navigateur :

<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Enfin, c√īt√© serveur, recherchez les principales demandes de ressources envoy√©es par les navigateurs connus pour prendre en charge les Early Hints et r√©pondez imm√©diatement avec 103 Early Hints. Dans la r√©ponse 103, incluez des suggestions pertinentes de pr√©connexion et de pr√©chargement. Une fois que la ressource principale est pr√™te, continuez avec la r√©ponse habituelle (par exemple, 200 OK en cas de succ√®s). Pour la r√©trocompatibilit√©, c'est une bonne id√©e d'inclure √©galement LinkEn-t√™tes HTTP dans la r√©ponse finale, augmentant peut-√™tre m√™me avec des ressources critiques qui sont devenues apparentes dans le cadre de la g√©n√©ration de la ressource principale (par exemple, la partie dynamique d'une ressource cl√© si vous avez suivi l'astuce "diviser en deux"). Voici √† quoi cela ressemblerait :

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

Quelques instants plus tard :

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

Prise en charge des premiers conseils pour divers serveurs Web HTTP

Voici un bref r√©sum√© du niveau de prise en charge d'Early Hints parmi les logiciels de serveur HTTP OSS les plus populaires :

Il faut nécessairement considérer qu'à la base de CloudFlare il y a le Serveur Web NGINX (prononcé Engine X) et donc compte tenu également de la dynamique commerciale et de la propension à l'Open Source, ce correctif (comme cela s'est produit pour le correctif QUIC) peut également être publié pour NGINX. Sinon, nous sommes assez convaincus que d'ici 6 ou 12 mois, cette fonctionnalité sera publiée par l'équipe de développement du serveur Web NGINX.

Activer les premiers conseils, le moyen le plus simple

Si vous utilisez l'un des CDN ou plates-formes suivants, vous n'aurez peut-√™tre pas besoin de mettre en Ňďuvre manuellement les conseils initiaux. Reportez-vous √† la documentation en ligne de votre fournisseur de solutions pour savoir s'il prend en charge les suggestions initiales, ou reportez-vous √† la liste non exhaustive ici :

Premiers conseils sur CloudFlare

Schéma des premiers conseils sur CloudFlare

Cloudflare, en tant que r√©seau de p√©rim√®tre situ√© entre le client et le serveur, est bien plac√© pour fournir ces conseils aux clients au nom des serveurs. Cela est vrai pour plusieurs raisons :

  1. 103 est un code de statut exp√©rimental que les origines peuvent ne pas √™tre en mesure d'√©mettre par elles-m√™mes, principalement pour des raisons d'h√©ritage. Une grande partie des m√©canismes qui alimentent le Web pr√©supposent √† tort Les requ√™tes HTTP correspondent toujours 1 : 1 avec les r√©ponses HTTP. Cette pr√©misse erron√©e est int√©gr√©e √† la plupart des logiciels de serveur HTTP, ce qui rend difficile pour les serveurs d'origine d'√©mettre des r√©ponses Early Hints 103 avant une r√©ponse "finale" 200 OK.
    Les serveurs périphériques Cloudflare qui gèrent cette complexité pour le compte de nos clients échappent parfaitement à ces défis techniques et font tourner plus rapidement le volant d'inertie de cette nouvelle technologie passionnante (nous en reparlerons plus tard).
  2. L'avantage de Cloudflare est tr√®s proche des utilisateurs finaux . Cela signifie que nous pouvons fournir des suggestions tr√®s rapidement, remplissant m√™me les plus petits blocs de r√©flexion du serveur avec des informations utiles que le client peut utiliser pour commencer √† charger les ressources imm√©diatement.
  3. Cloudflare voit déjà le flux de demandes et de réponses de nos clients. Nous utilisons ces données pour générer automatiquement des recommandations, sans qu'un client n'ait à modifier la source.

Modèle avancé

Si vous avez entièrement appliqué les conseils initiaux à vos principales pages de destination et que vous vous trouvez à la recherche de plus d'opportunités, vous serez peut-être intéressé par le plan avancé suivant.

Pour les visiteurs qui sont chez eux √©ni√®me demande de page dans le cadre d'un parcours utilisateur typique, vous souhaiterez peut-√™tre adapter la r√©ponse Early Hints au contenu qui est plus bas et plus profond sur la page, en d'autres termes en utilisant Early Hints sur des ressources moins prioritaires. Cela peut sembler contre-intuitif car nous avons recommand√© de se concentrer sur les ressources hautement prioritaires ou les sources secondaires, qui bloquent le rendu. Cependant, lorsqu'un visiteur navigue depuis un certain temps, il est fort probable que son navigateur dispose d√©j√† de toutes les ressources critiques. √Ä partir de l√†, il peut √™tre judicieux de vous concentrer sur des ressources moins prioritaires. Par exemple, cela pourrait signifier utiliser Early Hints pour charger des images de produits ou JS / CSS suppl√©mentaires uniquement n√©cessaires pour les interactions utilisateur moins courantes.

Limites actuelles des premiers conseils

Voici les limites des premiers conseils mis en Ňďuvre dans Chrome 103 et les versions futures jusqu'√† nouvel ordre :

  • Disponible uniquement pour les demandes de navigation (qui est la ressource principale du document de niveau sup√©rieur).
  • Il ne prend en charge que la pr√©connexion et le pr√©chargement (c'est-√†-dire que le pr√©chargement n'est pas pris en charge).
  • Early Hint suivi d'une redirection multi-origine sur la r√©ponse finale entra√ģnera la suppression par Chrome des ressources et des connexions obtenues via Early Hints.

Quelle est la prochaine étape?

En fonction de l'int√©r√™t de la communaut√©, nous pouvons augmenter notre impl√©mentation Early Hints avec les fonctionnalit√©s suivantes :

  • Suggestions initiales envoy√©es sur les demandes de sous-ressources.
  • Premi√®res suggestions publi√©es sur les demandes de ressources de base iframe.
  • Prise en charge de la pr√©lecture dans les premiers conseils.

Relation avec HTTP2 Push ou H2/Push

Si vous √™tes familier avec le d√©pr√©ci√© Fonction HTTP2 / Pousser , vous vous demandez peut-√™tre en quoi Early Hints diff√®re. Alors que Early Hints n√©cessite un aller-retour pour que le navigateur commence √† r√©cup√©rer les sous-ressources critiques, avec HTTP2 / Push, le serveur peut commencer √† envoyer des sous-ressources avec la r√©ponse. Bien que cela semble surprenant, cela comportait un inconv√©nient structurel cl√© : avec HTTP2 / Push, il √©tait extr√™mement difficile d'√©viter d'envoyer des sous-ressources que le navigateur avait d√©j√†. Cet effet de ¬ę pouss√©e excessive ¬Ľ a entra√ģn√© une utilisation moins efficace de la bande passante du r√©seau, ce qui a consid√©rablement entrav√© les gains de performances. Dans l'ensemble, les donn√©es de Chrome ont montr√© que HTTP2 / Push √©tait en fait un inconv√©nient distinct pour les performances Web.

Inversement, Early Hints fonctionne mieux dans la pratique car il combine la possibilité d'envoyer une réponse préliminaire avec des suggestions qui laissent le navigateur récupérer ou se connecter à ce dont il a réellement besoin. Bien que Early Hints ne couvre pas tous les cas d'utilisation que HTTP2 / Push pourrait théoriquement traiter, nous pensons que Early Hints est une solution plus pratique pour accélérer la navigation.

Conclusion sur les premiers conseils et les performances Web

Ce que nous répétons toujours et que nous ne nous lasserons pas de répéter, c'est que les performances web sont un processus et non un produit. Penser à activer Early Hints, implémenter CloudFlare et ne pas avoir de cache statique comme Varnish, ne pas avoir un réglage adéquat des pools PHP-FPM, avoir des requêtes lentes sur la base de données, une architecture matérielle sous-alimentée, le manque de compression brotli, le manque de TCP BBR avec 0-RTT, ne mènera qu'à la conviction d'avoir résolu l'un des nombreux problèmes qui doivent être résolus avant d'insérer Early Hints.

Il ne suffit pas d'acheter et de porter les chaussures de course d'Usain Bolt pour battre le record du monde, tout comme il ne suffit pas d'activer Early Hints sur le serveur Web pour avoir un site rapide.

Nous vous rappelons cet article sur les différentes étapes à suivre pour avoir un site rapide.

 

Vous avez des doutes ? Vous ne savez pas par o√Ļ commencer ? Contactez-nous


Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modèle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos syst√®mes sans avoir √† migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entièrement gratuite.

Non merci, mes clients préfèrent le site lent.
Remonter en haut