HTTP/2 x HTTP/1.1: como eles afetam o desempenho da web?

O HTTP/2 permite que os desenvolvedores personalizem a priorização ou a ordem em que os ativos da web são carregados. O HTTP/2 também oferece uma série de outras melhorias de performance em relação ao HTTP/1.

Objetivos de aprendizado

Após ler este artigo, você será capaz de:

  • Saiba o que é HTTP e as diferenças entre as versões HTTP
  • Entenda como a priorização funciona no HTTP/2
  • Explore as formas como o HTTP/2 melhora a performance da web

Copiar o link do artigo

O que é HTTP? Por que o HTTP/2 é mais rápido que o HTTP/1.1?

HTTP significa protocolo de transferência de hipertexto e é a base para quase todos os aplicativos web. Mais especificamente, o HTTP é o método que os computadores e servidores utilizam para solicitar e enviar informações. Por exemplo, quando alguém navega para cloudflare.com em seu laptop, seu navegador web envia uma solicitação HTTP aos servidores da Cloudflare para o conteúdo exibido na página. Em seguida, os servidores da Cloudflare enviam respostas HTTP com o texto, as imagens e a formatação que o navegador exibe para o usuário.

A primeira versão utilizável do HTTP foi criada em 1997. Por ter passado por vários estágios de desenvolvimento, essa primeira versão do HTTP foi chamada HTTP/1.1 e ainda está em uso na web. Em 2015, foi criada uma nova versão do HTTP chamada HTTP/2.

O HTTP/2 resolve vários problemas que os criadores do HTTP/1.1 não previram. Especificamente, o HTTP/2 é muito mais rápido e mais eficiente do que o HTTP/1.1. Uma das razões pelas quais o HTTP/2 é mais rápido reside na forma como ele prioriza o conteúdo durante o processo de carregamento.

O que é priorização?

No contexto de desempenho na web, a priorização se refere à ordem em que os conteúdos são carregados. Suponha que um usuário visite um site de notícias e navegue até um artigo. Qual parte deve ser carregada primeiro: a foto na parte superior do artigo, o texto do artigo ou os banners?

A priorização afeta o tempo de carregamento de uma página web. Por exemplo, determinados recursos, como grandes arquivos JavaScript, podem bloquear o carregamento do restante da página caso precisem ser carregados primeiro. Uma parte maior da página pode ser carregada de uma só vez se esses recursos que bloqueiam a renderização forem carregados por último.

Além disso, a ordem na qual esses recursos de página são carregados afeta a percepção do usuário quanto ao tempo de carregamento da página. Se apenas o conteúdo em segundo plano (como um arquivo CSS) ou o conteúdo que o usuário não pode ver imediatamente (como banners no final da página) for carregado primeiro, o usuário achará que a página não está sendo carregada. Se o conteúdo mais importante para o usuário for carregado primeiro, como a imagem na parte superior da página, então o usuário terá a percepção de que a página está sendo carregada mais rapidamente.

Como a priorização no HTTP/2 afeta o desempenho?

No HTTP/2, os desenvolvedores controlam a priorização de forma ativa e detalhada, o que permite que eles maximizem a velocidade percebida e a velocidade real de carregamento da página em um nível que não era possível no HTTP/1.1.

O HTTP/2 oferece um recurso chamado priorização ponderada. Isso permite que os desenvolvedores decidam quais recursos de página serão carregados primeiro, todas as vezes. No HTTP/2, quando um cliente faz uma solicitação para uma página web, o servidor envia vários streamings de dados para o cliente de uma só vez, em vez de enviar um após o outro. Esse método de envio de dados é conhecido como multiplexação. Os desenvolvedores podem atribuir a cada um desses streamings de dados um valor ponderado diferente, e o valor diz ao cliente qual streaming de dados deve ser renderizado primeiro.

Imagine que Alice quer ler um romance que seu amigo Bob escreveu, mas tanto Alice como Bob só se comunicam pelo correio normal. Alice envia uma carta ao Bob pedindo que ele envie seu romance a ela. Bob decide enviar o romance no "estilo HTTP/1.1": ele envia um capítulo de cada vez, e só envia o capítulo seguinte depois de receber uma carta de resposta de Alice confirmando que recebeu o capítulo anterior. Usando esse método de entrega de conteúdo, Alice levará muitas semanas para ler o romance de Bob.

Agora imagine que Bob decide enviar a Alice seu romance no "estilo HTTP/2": nesse caso, ele envia cada capítulo do romance separadamente (para ficar dentro dos limites de tamanho do serviço postal), mas todos ao mesmo tempo. Ele também numera cada capítulo: Capítulo 1, Capítulo 2, etc. Agora, Alice recebe o romance de uma só vez e pode montá-lo na ordem correta em seu próprio tempo. Se faltar um capítulo, ela pode enviar uma resposta rápida pedindo esse capítulo específico, mas caso contrário o processo está completo e Alice pode ler o romance em apenas alguns dias.

No HTTP/2, os dados são enviados todos de uma só vez, como Bob faz ao enviar vários capítulos à Alice de uma só vez. E, assim como Bob, os desenvolvedores podem numerar os capítulos no HTTP/2. Eles podem decidir o que será carregado primeiro: o texto de uma página web, os arquivos CSS, o JavaScript ou o que eles acharem mais importante para a experiência do usuário.

Quais são as outras diferenças entre o HTTP/2 e o HTTP/1.1 que afetam o desempenho?

Multiplexação: o HTTP/1.1 carrega os recursos um após o outro e portanto, se um recurso não puder ser carregado, ele bloqueia todos os outros recursos depois dele. Em comparação, o HTTP/2 consegue usar uma única conexão TCP para enviar vários streamings de dados de uma só vez, de modo que nenhum recurso bloqueie qualquer outro. O HTTP/2 faz isso dividindo os dados em mensagens de código binário e numerando essas mensagens para que o cliente saiba a qual streaming cada mensagem binária pertence.

Push de servidor: normalmente, um servidor só fornece conteúdo a um dispositivo do cliente se o cliente o solicitar. No entanto, essa abordagem nem sempre é prática para as páginas web modernas, que muitas vezes envolvem várias dezenas de recursos separados que o cliente deve solicitar. O HTTP/2 resolve este problema permitindo que um servidor "envie" conteúdo para um cliente antes que o cliente o solicite. O servidor também envia uma mensagem para que o cliente saiba que conteúdo enviado deve esperar - como se Bob tivesse enviado à Alice um índice de seu romance antes de enviar todo ele.

Compactação do cabeçalho: arquivos pequenos são carregados mais rapidamente do que os grandes. Para acelerar o desempenho da web, tanto o HTTP/1.1 como o HTTP/2 compactam as mensagens HTTP para torná-las menores. Entretanto, o HTTP/2 usa um método de compactação mais avançado chamado HPACK que elimina informações redundantes em pacotes de cabeçalhos HTTP. Isso elimina alguns bytes de cada pacote HTTP. Devido ao volume de pacotes HTTP envolvidos no carregamento até mesmo de uma única página web, esses bytes aumentam rapidamente, resultando em um carregamento mais rápido.

O que é HTTP/3?

O HTTP/3 é a próxima versão proposta do protocolo HTTP. O HTTP/3 ainda não foi amplamente adotado na web, mas seu uso está crescendo. A principal diferença entre o HTTP/3 e as versões anteriores do protocolo é que o HTTP/3 é executado sobre o QUIC em vez do TCP. O QUIC é um protocolo mais rápido e seguro da camada de transporte, desenvolvido para atender às necessidades da internet moderna.

Como a Cloudflare ajuda os desenvolvedores a implementar o HTTP/2 para obter um desempenho mais rápido?

A Cloudflare é compatível com todos os recursos do HTTP/2. As propriedades da web na Cloudflare podem ativar o HTTP/2 gratuitamente com apenas um clique. Além do HTTP/2, a Cloudflare também é compatível com o HTTP/3.