Airbnb verbessert die Webleistung mit HTTP-Streaming

InfoQ Homepage News Airbnb verbessert die Webleistung mit HTTP-Streaming

20. Juni 2023 2 Minuten Lesezeit

von

Rafal Gancarz

Airbnb hat HTTP-Streaming eingeführt, um die Seitenladeleistung seiner Website zu verbessern. Sie reduzierten die First Contentful Paint (FCP)-Metrik auf jeder getesteten Seite, einschließlich der Homepage, um rund 100 Millisekunden. Sie minimierten auch die Auswirkungen langsamer Backend-Abfragen auf die Ladezeiten.

Airbnb hat nach möglichen Verbesserungen bei der schnellstmöglichen Präsentation von Inhalten für seine Website-Benutzer gesucht und festgestellt, dass das Versenden des Seitentexts erst nach vollständiger Darstellung nicht die beste Benutzererfahrung bietet, insbesondere wenn der Textinhalt von Backend-Abfragen abhängt. Darüber hinaus erfordern Webseiten in der Regel viele zusätzliche Ressourcen, wie CSS-Dateien und externe Javascript-Dateien, die vom Browser heruntergeladen werden müssen, um dem Benutzer den Inhalt korrekt anzuzeigen. Diese Abhängigkeiten führen häufig zu Kaskaden von Ressourcenanforderungen, die sich am besten in der Netzwerksequenzansicht veranschaulichen lassen, z. B. im Wasserfall von Chrome.

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

Eine bekannte Vorgehensweise, die es dem Browser ermöglicht, externe Ressourcen früher herunterzuladen, besteht darin, alle darauf verweisenden Tags innerhalb des -Tags am Anfang des HTML-Dokuments zu platzieren. Der Browser lädt externe Ressourcen herunter, wenn er das -Tag liest. Normalerweise geschieht dies erst, wenn das gesamte HTML-Dokument bereitgestellt wurde. Dies kann einige Zeit dauern, wenn der Inhalt auf langsamen Backend-Abfragen basiert.

Early Flush ist eine Technik, die HTTP-Streaming nutzt, um den Browser noch früher auf externe Ressourcen aufmerksam zu machen. Dazu muss das HTML-Dokument in zwei Teile aufgeteilt und mithilfe der Chunked-Transfer-Kodierung separat gesendet werden. Der Browser kann mit dem Herunterladen externer Ressourcen beginnen, sobald der erste Block, der nur den Anfang des HTML-Dokuments enthält, empfangen und analysiert wird.

Auch wenn die Early-Flush-Technik nicht neu ist, wurde sie noch nicht weit verbreitet, da sie das Rendern und Senden unvollständiger HTML-Teile ohne schließende Tags erfordert. Airbnb verwendet einen Express-basierten NodeJS-Server zum Rendern von Webseiten mit React und musste die einzelne React-Komponente, die zuvor zum Rendern des gesamten HTML-Dokuments verwendet wurde, in drei separate Komponenten überarbeiten.

Die Verwendung des Early Flush trägt zur Optimierung des Netzwerkwasserfalls für CSS- und Javascript-Ressourcen bei, verhindert jedoch keine Verzögerungen beim Rendern des Seitentexts. Mit modernen Web-App-Frameworks ist es möglich, den Inhalt auf der Client- oder Serverseite zu rendern (Server-Side Render) und die Daten separat abzurufen, aber dafür ist eine weitere Netzwerkanforderung erforderlich.

Airbnb führte seinen Streaming-Ansatz weiter, indem es den dritten Block einführte, den sie „Deferred Data Chunk“ nannten und der die von der Seite benötigten Daten enthält. Sie nutzten MutationObserver, um zu erkennen, wann die verzögerten Daten geladen werden, und fügten die Daten in den Netzwerkdatenspeicher der Anwendung ein, wodurch im Wesentlichen die zusätzliche Netzwerkanforderung ersetzt wurde.

Serverseitiges Rendering (SSR) und clientseitiger Datenabruf werden parallel ausgeführt

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

Das Team musste einige Probleme lösen, um HTTP-Streaming in seinem Technologie-Stack zu ermöglichen. Sie haben die Antwortpufferung in NGINX und den Nagle-Algorithmus in ihrem Haproxy-Load-Balancer deaktiviert, damit geblockte Antworten den Browser unverändert erreichen können.

Victor Lin, Softwareentwickler bei Airbnb, fasst die Erfahrungen seines Teams und eines wachsenden Ökosystems, das HTTP-Streaming unterstützt, zusammen:

Auch wenn es unterwegs Herausforderungen gab, haben wir festgestellt, dass die Anpassung unserer bestehenden React-Anwendung zur Unterstützung von Streaming sehr machbar und robust war, obwohl sie ursprünglich nicht dafür konzipiert war. Wir freuen uns auch über den breiteren Trend des Frontend-Ökosystems in Richtung der Priorisierung von Streaming, von @defer und @stream in GraphQL bis hin zu Streaming-SSR in Next.js.

Erhalten Sie umsetzbare Ratschläge für Ihre technischen Herausforderungen. Übernehmen Sie die richtigen aufkommenden Trends auf der QCon San Francisco (2.–6. Oktober 2023)!

Das Schreiben für InfoQ hat viele Türen geöffnet und die Karrierechancen erhöht Für mich. Ich konnte mich intensiv mit Experten und Vordenkern austauschen, um mehr über die von mir behandelten Themen zu erfahren. Und ich kann meine Erkenntnisse auch an die breitere Tech-Community weitergeben und verstehen, wie die Technologien in der realen Welt eingesetzt werden.

Ich habe das Mitwirkendenprogramm von InfoQ Anfang dieses Jahres entdeckt und es seitdem genossen! Das Peer-to-Peer-Review-System von InfoQ bietet mir nicht nur eine Plattform, auf der ich meine Erkenntnisse mit einer globalen Community von Softwareentwicklern teilen kann, sondern hat auch mein Schreiben erheblich verbessert . Wenn Sie nach einem Ort suchen, an dem Sie Ihr Software-Know-how teilen können, beginnen Sie mit der Mitarbeit bei InfoQ.

Ich habe angefangen, Nachrichten für die InfoQ .NET-Warteschlange zu schreiben, um auf dem neuesten Stand der Technik zu bleiben, aber ich habe so viel mehr daraus gemacht. Ich habe sachkundige Leute kennengelernt, weltweite Sichtbarkeit erlangt und meine Schreibfähigkeiten verbessert.

Redakteur für InfoQ zu werden war eine der besten Entscheidungen meiner Karriere . Es hat mich herausgefordert und mir in vielerlei Hinsicht geholfen, zu wachsen . Wir würden uns über mehr Leute freuentrete unserem Team bei.

InfoQ sucht einen Chefredakteur in Vollzeit dem internationalen, stets remote arbeitenden Team von C4Media beizutreten. Entdecken Sie mit uns die innovativsten Technologien unserer Zeit, arbeiten Sie mit den besten Software-Experten der Welt zusammen und helfen Sie mehr als 1,6 Millionen Entwicklerteams bei der Einführung neuer Technologien und Praktiken, die die Grenzen dessen erweitern, was Software und Teams leisten können!

Jeden Dienstag wird eine Zusammenfassung der Inhalte der letzten Woche auf InfoQ verschickt. Treten Sie einer Community von über 250.000 erfahrenen Entwicklern bei. Sehen Sie sich ein Beispiel an

Wir schützen Ihre Privatsphäre.

Sie müssen ein InfoQ-Konto registrieren oder sich anmelden oder anmelden, um Kommentare zu posten. Aber hinter der Registrierung steckt noch viel mehr.

Holen Sie das Beste aus dem InfoQ-Erlebnis heraus.

Zulässiges HTML: a,b,br,blockquote,i,li,pre,u,ul,p

Zulässiges HTML: a,b,br,blockquote,i,li,pre,u,ul,p

Zulässiges HTML: a,b,br,blockquote,i,li,pre,u,ul,p