Airbnb migliora le prestazioni web con lo streaming HTTP

InfoQ Homepage Novità Airbnb migliora le prestazioni web con lo streaming HTTP

20 giugno 2023 2 minuti di lettura

di

Rafal Gancarz

Airbnb ha introdotto lo streaming HTTP per migliorare le prestazioni di caricamento delle pagine del proprio sito web. Hanno ridotto la metrica First Contentful Paint (FCP) di circa 100 millisecondi su ogni pagina testata, inclusa la home page. Hanno inoltre ridotto al minimo l'impatto delle query di backend lente sui tempi di caricamento.

Airbnb ha cercato possibili miglioramenti nel presentare i contenuti agli utenti del proprio sito web il più rapidamente possibile e ha scoperto che inviare il corpo della pagina solo dopo che è stato completamente renderizzato non offre la migliore esperienza utente, in particolare se il contenuto del corpo dipende dalle query del backend. Inoltre, le pagine web di solito richiedono che molte risorse aggiuntive, come file CSS e file Javascript esterni, vengano scaricate dal browser per visualizzare correttamente il contenuto all'utente. Queste dipendenze spesso danno luogo a cascate di richieste di risorse, meglio illustrate nella visualizzazione della sequenza di rete, come Waterfall di Chrome.

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

Una pratica ben nota per consentire al browser di scaricare prima le risorse esterne è posizionare tutti i tag che fanno riferimento ad esse all'interno del tag vicino all'inizio del documento HTML. Il browser scarica risorse esterne quando legge il tag . In genere, ciò accade solo una volta consegnato l'intero documento HTML, il che può richiedere del tempo se il contenuto è basato su query di backend lente.

Early flush è una tecnica che utilizza lo streaming HTTP per rendere il browser consapevole delle risorse esterne anche prima. È necessario dividere il documento HTML in due parti e inviarle separatamente utilizzando la codifica di trasferimento in blocchi. Il browser può iniziare a scaricare risorse esterne non appena il blocco iniziale, contenente solo l'inizio del documento HTML, viene ricevuto e analizzato.

Anche se la tecnica early flush non è nuova, non è stata ampiamente utilizzata poiché richiede il rendering e l'invio di porzioni incomplete di HTML senza tag di chiusura. Airbnb utilizza un server NodeJS basato su Express per eseguire il rendering delle pagine Web utilizzando React e ha dovuto rielaborare il singolo componente React precedentemente utilizzato per eseguire il rendering dell'intero documento HTML in tre componenti separati.

L'uso del flush anticipato aiuta a ottimizzare la cascata di rete per le risorse CSS e Javascript ma non gestisce i ritardi nel rendering del corpo della pagina. Con i moderni framework di app Web, è possibile eseguire il rendering del contenuto sul lato client o server (rendering lato server) e recuperare i dati separatamente, ma ciò richiede un'altra richiesta di rete.

Airbnb ha portato avanti il ​​proprio approccio allo streaming introducendo il terzo blocco, che hanno chiamato blocco di dati differiti, contenente i dati richiesti dalla pagina. Hanno utilizzato MutationObserver per rilevare quando i dati differiti vengono caricati e hanno inserito i dati nell'archivio dati di rete dell'applicazione, sostituendo sostanzialmente la richiesta di rete aggiuntiva.

Rendering lato server (SSR) e recupero dei dati lato client eseguiti in parallelo

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

Il team ha dovuto risolvere alcuni problemi per abilitare lo streaming HTTP nel proprio stack tecnologico. Hanno disattivato il buffering delle risposte in NGINX e nell'algoritmo di Nagle nel loro bilanciatore di carico haproxy per consentire alle risposte in blocchi di raggiungere il browser inalterate.

Victor Lin, un ingegnere informatico di Airbnb, riassume le esperienze del suo team e un ecosistema in crescita che supporta lo streaming HTTP:

Nonostante ci siano state delle sfide lungo il percorso, abbiamo scoperto che adattare la nostra applicazione React esistente per supportare lo streaming era molto fattibile e robusto, nonostante non fosse stato progettato originariamente per questo. Siamo anche entusiasti di vedere la tendenza più ampia dell'ecosistema frontend nella direzione di dare priorità allo streaming, da @defer e @stream in GraphQL allo streaming SSR in Next.js.