Paralelização de Requests na Otimização de Frontend: Enganando as Limitações e Acelerando o Carregamento

Ao realizar um curso da Alura sobre Otimizações no Frontend, um dos tópicos me chamou muito a atenção: Paralelização de Requests. Um contexto que até então eu não conhecia muito bem e quase não tinha estudado sobre. Decidi reunir a partir do meu ponto de vista os principais tópicos e exemplos sobre o assunto e apresentar aqui para quem quiser saber mais sobre esse conceito. Vou deixar no artigo imagens e o link do site que usamos para aplicar as otimização assim facilita para quem quiser somente dar uma olhada.

Então, vamos lá!!

Quando acessamos um site moderno, podemos notar que existem várias otimizações implementadas para garantir que a experiência do usuário seja rápida e suave. No entanto, mesmo com todas essas melhorias, muitos sites ainda enfrentam o problema de fazer muitas requisições, o que pode resultar em filas de espera e aumentar o tempo de carregamento.

Essa questão está relacionada à limitação do navegador, que permite realizar apenas seis conexões simultâneas por host name. Isso significa que cada recurso do site que precisamos baixar, como imagens, arquivos CSS e JavaScript, é considerado uma requisição que ocupa uma dessas seis conexões. Quando todas as conexões estão em uso, qualquer novo pedido precisa esperar na fila até que uma conexão esteja disponível.

No entanto, há uma técnica inteligente que podemos utilizar para contornar essa limitação e acelerar o carregamento dos recursos: a paralelização de host names. Essa estratégia consiste em aproveitar recursos de lugares externos, ou seja, de outros host names, para que o navegador possa abrir conexões adicionais sem competir com as seis conexões do host principal.

O funcionamento dessa técnica é bastante simples. Normalmente, um site é acessado através de um host name específico, como "performance-sergio.appspot.com", que possui as seis conexões disponíveis. No entanto, se tivermos recursos externos, como vídeos hospedados no "vimeo.com", eles precisarão ser baixados através de conexões separadas.

A solução é utilizar um segundo host name para esses recursos externos. Por exemplo, podemos colocar as imagens em "web-dot-performance-sergio.appspot.com", um host name diferente do principal, o que evitará que as conexões competam entre si.

Assim, quando o navegador identifica host names distintos, ele pode abrir até seis novas conexões para cada uma das origens, totalizando até doze conexões paralelas em vez de apenas seis.

Para aplicar essa técnica, precisaremos de um segundo domínio, o que pode ser facilmente obtido utilizando o app engine. Dessa forma, podemos utilizar o mesmo site "performance-sergio.appspot.com" e também acessá-lo através do "web-dot-performance-sergio.appspot.com".

Para garantir que as imagens sejam baixadas do segundo host name, faremos um "replace" nas requisições de imagens, substituindo "assets/img" pelo novo endereço "web-dot-performance-sergio.appspot.com/assets/img". Isso fará com que o navegador entenda que as imagens devem ser buscadas no segundo host name.

Contudo, é importante prestar atenção a alguns detalhes. Arquivos com "inline src" devem ser atualizados com o novo domínio, enquanto as imagens que não podem estar em outro host name (devido a links específicos para o site) devem ser mantidas no host principal.

Após essas modificações e um novo "deploy", ao observarmos na aba "Network", veremos que temos coisas baixadas tanto do domínio principal quanto do secundário.

Podemos realizar um teste no site "Web Page Test" para verificar os resultados práticos dessa técnica. O gráfico em forma de cascata nos mostrará como os conteúdos baixados do segundo host name se intercalam com os do host principal.

Dessa forma, conseguimos paralelizar em até doze conexões, acelerando significativamente o carregamento dos recursos. Vale ressaltar que existe um limite prático para o paralelismo da rede, sendo recomendado trabalhar com dois ou três hosts, o que geralmente é o ideal.

Portanto, cabe aos desenvolvedores testar e observar os resultados na prática, analisando o gráfico waterfall, para determinar se essa estratégia está trazendo benefícios e melhorias de desempenho.

Em resumo, a paralelização de host names é uma maneira inteligente de contornar a limitação do navegador de apenas seis conexões simultâneas, possibilitando um carregamento mais rápido dos recursos em sites baseados em HTTP/1. Vale a pena experimentar essa técnica e observar os benefícios na otimização do frontend do seu site.