Airbnb melhora o desempenho da Web com streaming HTTP

Notícias da página inicial do InfoQ Airbnb melhora desempenho da Web com streaming HTTP

20 de junho de 2023 2 minutos de leitura

por

Rafal Gancarz

O Airbnb introduziu o streaming HTTP para melhorar o desempenho de carregamento da página de seu site. Eles reduziram a métrica First Contentful Paint (FCP) em cerca de 100 milissegundos em cada página testada, incluindo a página inicial. Eles também minimizaram o impacto de consultas lentas de back-end nos tempos de carregamento.

O Airbnb tem buscado possíveis melhorias na apresentação do conteúdo aos usuários de seu site o mais rápido possível e identificou que enviar o corpo da página somente depois de totalmente renderizado não oferece a melhor experiência ao usuário, principalmente se o conteúdo do corpo depender de consultas de backend. Além disso, as páginas da web geralmente exigem que muitos recursos adicionais, como arquivos CSS e arquivos Javascript externos, sejam baixados pelo navegador para exibir o conteúdo corretamente ao usuário. Essas dependências geralmente resultam em cascatas de solicitações de recursos, melhor ilustradas na visualização de sequência de rede, como a Cascata do Chrome.

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

Uma prática bem conhecida para permitir que o navegador baixe recursos externos mais cedo é colocar todas as tags que fazem referência a eles dentro da tag perto do início do documento HTML. O navegador baixa recursos externos quando lê a tag . Normalmente, isso só acontece quando todo o documento HTML é entregue, o que pode levar algum tempo se o conteúdo for baseado em consultas de back-end lentas.

A liberação antecipada é uma técnica que utiliza streaming HTTP para alertar o navegador sobre recursos externos ainda mais cedo. Requer dividir o documento HTML em duas partes e enviá-las separadamente usando codificação de transferência em partes. O navegador pode começar a baixar recursos externos assim que o pedaço inicial, contendo apenas o início do documento HTML, for recebido e analisado.

Embora a técnica de liberação antecipada não seja nova, ela não tem sido amplamente utilizada, pois requer a renderização e o envio de partes incompletas do HTML sem tags de fechamento. O Airbnb emprega um servidor NodeJS baseado em Express para renderizar páginas da web usando React e teve que retrabalhar o único componente React usado anteriormente para renderizar todo o documento HTML em três componentes separados.

Usar a liberação antecipada ajuda a otimizar a cascata de rede para recursos CSS e Javascript, mas não lida com atrasos na renderização do corpo da página. Com estruturas modernas de aplicativos da web, é possível renderizar o conteúdo no cliente ou no servidor (Server-Side Render) e buscar os dados separadamente, mas isso requer outra solicitação de rede.

O Airbnb levou sua abordagem de streaming ainda mais longe, introduzindo o terceiro bloco, que eles chamaram de bloco de dados diferidos, contendo os dados exigidos pela página. Eles usaram o MutationObserver para detectar quando os dados diferidos são carregados e injetaram os dados no armazenamento de dados de rede do aplicativo, essencialmente substituindo a solicitação de rede adicional.

Renderização do lado do servidor (SSR) e busca de dados do lado do cliente executadas em paralelo

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

A equipe teve que resolver alguns problemas para ativar o streaming HTTP em sua pilha de tecnologia. Eles desativaram o buffer de resposta no algoritmo NGINX e Nagle em seu balanceador de carga haproxy para permitir que respostas fragmentadas chegassem ao navegador inalteradas.

Victor Lin, engenheiro de software do Airbnb, resume as experiências de sua equipe e um ecossistema crescente que oferece suporte ao streaming HTTP:

Embora tenha havido desafios ao longo do caminho, descobrimos que adaptar nosso aplicativo React existente para suportar streaming era muito viável e robusto, apesar de não ter sido projetado originalmente para isso. Também estamos entusiasmados em ver a tendência mais ampla do ecossistema de front-end na direção de priorizar o streaming, desde @defer e @stream no GraphQL até streaming SSR no Next.js.