HTTP 2 – O que é e como usar nos seus sites WordPress

HTTP 2 – O que é e como usar nos seus sites WordPress

O HTTP2 é uma tecnologia que surgiu para diminuir a latência das páginas web e também a redução do tempo de carregamento das mesmas.

Ela foi criado para corrigir vários problemas encontrados na sua versão anterior que é o HTTP/1.1.

O Protocolo HTTP é responsável pela comunicação das páginas web, ou seja quando você acessa um site na internet, toda comunicação é feita encima deste protocolo.

O grande problema é que o procolo HTTP/1.1 é antigo e muito limitado, o mesmo suporta apenas 8 conexões por host por vez, logo quanto maior for o seu site, se você não estiver usando HTTP2 suas páginas podem demorar para carregar. Vamos ver mais sobre este protocolo e como instalar ele no seu site WordPress.

Receba dicas exclusivas de Performance
WordPress diretamente no seu e-mail

Qual a diferença entre o HTTP 1 e o HTTP 2

Compressão automática

No HTTP 1.1 habilitamos o GZIP para comprimir as informações que mandamos em nossas respostas. Uma boa prática que precisa ser habilitada explicitamente. No HTTP 2 GZIP é padrão e obrigatório.

Somente os headers que mudam são re-enviados

No HTTP 1.1 os headers são enviados em plain text, em cada requisição (o famoso User-Agentpor exemplo). No HTTP 2 os headers são binários e comprimidos, diminuindo o volume de dados.

Além disso, é possível reaproveitar os headers para as requisições seguintes.

Dessa forma, só temos que mandar os cabeçalhos que mudam. Isso reduz as requisições e as deixa menos volumosas.

Paralelização de requisições

Para cada recurso que uma página possui, um request feito então para carrega-los mais rapidamente precisamos paralelizar essas requisições.

O problema é que o HTTP 1.1 é um protocolo sequencial, só podemos fazer 1 request por vez.

A solução é abrir mais de uma conexão ao mesmo tempo, paralelizando os requests em 4 a 8 requests (é o limite que temos).

Uma forma comum de lidar com isso é usar vários hostnames na página (pag.com e img.pag.com), assim ganhamos mais conexões paralelas.

No HTTP2 as requisições e respostas são paralelas automaticamente em uma única conexão.

É o chamado multiplexing.

Priorização de requisições

Uma otimização interessante é a de facilitar a renderização inicial, priorizando os recursos necessários para o usuário ver a página primeiro (CSS) e interagir (JS) depois.

No HTTP 2 podemos indicar nos requests quais deles são mais importantes através de priorização numérica.

Assim o browser pode dar prioridade alta a um arquivo CSS no head que bloqueia a renderização, e prioridade mais baixa para um JS assíncrono no fim da página.

HTTP 2 - O que é e como usar nos seus sites WordPress 1

Server Push

Uma gambiarra comum no HTTP 1.1 é fazer inline de recursos, visando a renderização inicial mais rápida.

O grande problema aqui é que anulamos o cache do navegador. CSS junto do HTML não pode ser cacheado independentemente.

Aí vem o Server Push no HTML 2.

A ideia é ter o servidor mandando alguns recursos para o navegador sem ele ter requisitado ainda.

O servidor “empurra” para o navegador recursos que ele sabe que serão requisitados logo. Assim quando o navegador precisar do recurso, já vai ter em cache e não fará um request.

Segurança

Um tempo atrás havia uma discussão se HTTP 2 permitiria uso sem SSL (parei de acompanhar faz algum tempo), mas na prática apenas conexões seguras HTTPS serão suportadas. Assim temos segurança e privacidade mais estabelecidas com o protocolo.

Por fim, recomendo o episódio do Hipsters.tech sobre HTTP2, vai te dar ainda mais informações sobre o assunto.

Como saber se o meu site está com HTTP2

Para saber se o seu servidor já aceita e usa o protocolo HTTP2, basta utilizar a ferramenta da Key CDN.

https://tools.keycdn.com/http2-test

Informe o seu site no campo de pesquisa e clique para verificar.

HTTP 2 - O que é e como usar nos seus sites WordPress 2

Agora e o seu servidor possuir tecnologia HTTP2 ele irá aparecer da seguinte forma

HTTP 2 - O que é e como usar nos seus sites WordPress 3

Porquê eu devo me preocupar em ter o protocolo HTTP2?

Como você viu acima, o protocolo HTTP2 implementa diversas melhorias na performance do seu site, sabemos que a performance de um site é muito importante e ela esta diretamente ligada a 2 fatores:

1 – Posicionamento no Google / Vendas

2 – Experiência dos seus clientes no seu site.

1 – Posicionamento no Google / Vendas

O Google Ama sites que possuí um tempo de carregamento rápido, ele os ama tanto que até melhora o posicionamento do mesmo em seu buscador, logo quanto mais rápido é o tempo de carregamento das suas páginas, melhor será sua posição no Google atraindo mais novos clientes e fechando mais negócios.

2 – Experiência dos seus clientes

Seus clientes vão passar mais tempo no seu site, com isso o Google vai perceber que seu site é legal e logo vai te posicionar bem por isso. É muito importante que você cuide desses dois pilares, isso vai fazer toda diferença no seu negócio.

Meu servidor não possuí HTTP2 o que eu faço?

Se você fez o teste e deu negativo para HTTP2 não se preocupe, mesmo que o seu servidor ainda não tenha esta tecnologia presente nós temos outras formas de implementá-las uma delas é usando o Cloud Flare.

Usando o HTTP2 do CloudFlare

Para começarmos o processo de instalação do HTTP2 será necessário instalar o CloudFlare no seu site, para isso siga os procedimentos abaixo.

1 – Crie uma conta gratuita no CloudFlare

Acesse o site do CloudFlare www.cloudflare.com e crie uma conta gratuita

HTTP 2 - O que é e como usar nos seus sites WordPress 4

Na próxima Tela, informe um e-mail válido e uma senha, após isso você será convidado a inserir o seu site.

HTTP 2 - O que é e como usar nos seus sites WordPress 5

Após digitar o seu domínio, a ferramenta vai te apresentar algumas opções.

HTTP 2 - O que é e como usar nos seus sites WordPress 6

Clique em NEXT nesta tela.

HTTP 2 - O que é e como usar nos seus sites WordPress 7

Selecione o Plano Gratuito e confirme.

HTTP 2 - O que é e como usar nos seus sites WordPress 8

 

Após essa tela clique no botão continuar.

HTTP 2 - O que é e como usar nos seus sites WordPress 9

Esta é a ultima etapa e é a mais importante, você deverá copiar os DNS do Cloudflare e substituir na empresa que você registrou o domínio.

Como Mudar o DNS para o CloudFlare?

A última etapa para você usar o CloudFlare é mudar os DNS. Para isso você deverá acessar o seu Painel do Registro.br ou da empresa que você registrou o seu DNS.

HTTP 2 - O que é e como usar nos seus sites WordPress 10

Clique em Alterar Servidores DNS

HTTP 2 - O que é e como usar nos seus sites WordPress 11

Informe os DNS do CloudFlare nos campos Master e Slave1 e clique em salvar Dados.

Pronto você instalou o CloudFlare no seu site WordPress

Agora você precisará aguardar o prazo de 24 horas para o DNS propagar totalmente, enquanto isso seu site ficará temporariamente instável. ou até mesmo indisponível.

CloudFlare e o SSL Lets Encrypt

Se antes de você instalar o CloudFlare você já tiver o HTTPS no seu site, será necessário fazer uma configuração para que não haja conflito com o SSL do CloudFlare.

Para isso siga os passos abaixo.

Atenção: Este passo é apenas para quem já possuí SSL ativo antes da instalação do CloudFlare.

HTTP 2 - O que é e como usar nos seus sites WordPress 12

Clique em CRIPTO e depois mude para FULL STRICT.

Feito isso você não terá problemas.

Ao ter o CloudFlare instalado seu site ele já estará funcionando com HTTP2 no entanto há mais um Hack para que possamos implementar o Push do HTTP2.

Como faço para ativar o PUSH de servidor HTTP2 no WordPress?

O Push de Servidor HTTP2 permite que um site envie conteúdo para um navegador, sem ter que esperar que o HTML de uma página seja renderizado primeiro. Em conjunto com o suporte de simultaneidade embutido no HTTP / 2, o Server Push é capaz de reduzir drasticamente a quantidade de solicitações necessárias para carregar seu site.

HTTP 2 - O que é e como usar nos seus sites WordPress 13

O Cloudflare oferece suporte ao Push do Servidor HTTP / 2 e pode ser ativado para folhas de estilo e scripts usando o plug-in WordPress do Cloudflare.

Para utilizar esse recurso, você deve primeiro garantir que o plug-in do Cloudflare para WordPress esteja instalado e configurado em seu site.

Como Instalar o Plugin do CloudFlare para WordPress

HTTP 2 - O que é e como usar nos seus sites WordPress 14

Instale e ative o Plugin CloudFlare para WordPress

Após isso, clique em configurações > CloudFlare

HTTP 2 - O que é e como usar nos seus sites WordPress 15

Nesta tela você será solicitado a inserir o seu E-mail e chave de API do CloudFlare.

Para pegar a chave de API do CloudFlare siga os procedimentos abaixo.

1 – Faça login na sua conta do CloudFlare

2 – Vá até seu Perfil, clicando no canto superior direito.

HTTP 2 - O que é e como usar nos seus sites WordPress 16

Na próxima página, role a página até o final.

HTTP 2 - O que é e como usar nos seus sites WordPress 17Copie a API gerada e cole na Tela de configuração do plugin CloudFlare no WordPress.

Pronto, esta etapa está concluída.

Uma vez que o plugin esteja instalado, você pode ativar o Push do Servidor HTTP / 2 simplesmente adicionando o seguinte código de configuração ao seu arquivo wp-config.php:

 define(‘CLOUDFLARE_HTTP2_SERVER_PUSH_ACTIVE’, true); 

HTTP 2 - O que é e como usar nos seus sites WordPress 18

Salve o arquivo e pronto. Agora o seu site está com HTTP2 do cloudFlare e HTTP2 Push Do WordPress.

HTTP 2 - O que é e como usar nos seus sites WordPress 19

Conclusão

Performance WordPress é muito mais que só ter um site rápido. Performance esta diretamente ligado ao posicionamento do seu site no Google e também as vendas que você gera e com o crescimento do seu negócio e por isso ela é tão importante.

Mas me diga, você conseguiu implementar todos os passos? Seu site ganhou Performance?

Compartilhe os seus resultados conosco, qual era sua performance antes? E qual é a performance depois de aplicar este método?

Fechar Menu