Airbnb améliore les performances Web grâce au streaming HTTP

Accueil InfoQ Actualités Airbnb améliore les performances Web grâce au streaming HTTP

20 juin 2023 2 min de lecture

par

Rafal Gancarz

Airbnb a introduit le streaming HTTP pour améliorer les performances de chargement des pages de son site Web. Ils ont réduit la métrique First Contentful Paint (FCP) d’environ 100 millisecondes sur chaque page testée, y compris la page d’accueil. Ils ont également minimisé l’impact des requêtes lentes du backend sur les temps de chargement.

Airbnb a recherché des améliorations possibles pour présenter le contenu aux utilisateurs de son site Web le plus rapidement possible et a identifié que l'envoi du corps de la page seulement après qu'il a été entièrement rendu n'offre pas la meilleure expérience utilisateur, en particulier si le contenu du corps dépend de requêtes back-end. De plus, les pages Web nécessitent généralement que de nombreuses ressources supplémentaires, telles que des fichiers CSS et des fichiers Javascript externes, soient téléchargées par le navigateur pour afficher correctement le contenu à l'utilisateur. Ces dépendances se traduisent souvent par des cascades de demandes de ressources, mieux illustrées dans la vue de séquence réseau, telle que la cascade de Chrome.

Source : https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

Une pratique bien connue pour permettre au navigateur de télécharger des ressources externes plus tôt consiste à placer toutes les balises les faisant référence à l'intérieur de la balise près du début du document HTML. Le navigateur télécharge des ressources externes lorsqu'il lit la balise . En règle générale, cela ne se produit qu'une fois que l'intégralité du document HTML est livrée, ce qui peut prendre un certain temps si le contenu est basé sur des requêtes back-end lentes.

Le vidage anticipé est une technique qui utilise le streaming HTTP pour informer le navigateur des ressources externes encore plus tôt. Cela nécessite de diviser le document HTML en deux parties et de les envoyer séparément à l'aide d'un codage de transfert fragmenté. Le navigateur peut commencer à télécharger des ressources externes dès que le morceau initial, contenant uniquement le début du document HTML, est reçu et analysé.

Même si la première technique de vidage n'est pas nouvelle, elle n'a pas été largement utilisée car elle nécessite le rendu et l'envoi de parties incomplètes de HTML sans balises de fermeture. Airbnb utilise un serveur NodeJS basé sur Express pour restituer les pages Web à l'aide de React et a dû retravailler le composant React unique précédemment utilisé pour restituer l'intégralité du document HTML en trois composants distincts.

L'utilisation du vidage anticipé permet d'optimiser la cascade réseau pour les ressources CSS et Javascript, mais ne résout pas les retards dans le rendu du corps de la page. Avec les frameworks d'applications Web modernes, il est possible de restituer le contenu côté client ou côté serveur (Server-Side Render) et de récupérer les données séparément, mais cela nécessite une autre requête réseau.

Airbnb a poussé son approche de streaming plus loin en introduisant le troisième bloc, qu'ils ont appelé le bloc de données différées, contenant les données requises par la page. Ils ont utilisé MutationObserver pour détecter le moment où les données différées sont chargées et les ont injectées dans le magasin de données réseau de l'application, remplaçant essentiellement la requête réseau supplémentaire.

Rendu côté serveur (SSR) et récupération de données côté client exécutés en parallèle

Source : https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

L'équipe a dû résoudre certains problèmes pour activer le streaming HTTP dans sa pile technologique. Ils ont désactivé la mise en mémoire tampon des réponses dans NGINX et l'algorithme de Nagle dans leur équilibreur de charge haproxy pour permettre aux réponses fragmentées d'atteindre le navigateur sans modification.

Victor Lin, ingénieur logiciel chez Airbnb, résume les expériences de son équipe et un écosystème croissant prenant en charge le streaming HTTP :

Même s'il y a eu des défis en cours de route, nous avons constaté que l'adaptation de notre application React existante pour prendre en charge le streaming était très réalisable et robuste, même si elle n'avait pas été conçue pour cela à l'origine. Nous sommes également ravis de constater la tendance plus large de l'écosystème frontend à donner la priorité au streaming, de @defer et @stream dans GraphQL au streaming SSR dans Next.js.