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.
[elementor-template id=”67877″]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.
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.
Agora e o seu servidor possuir tecnologia HTTP2 ele irá aparecer da seguinte forma
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
Na próxima Tela, informe um e-mail válido e uma senha, após isso você será convidado a inserir o seu site.
Após digitar o seu domínio, a ferramenta vai te apresentar algumas opções.
Clique em NEXT nesta tela.
Selecione o Plano Gratuito e confirme.
Após essa tela clique no botão continuar.
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.
Clique em Alterar Servidores DNS
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.
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.
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
Instale e ative o Plugin CloudFlare para WordPress
Após isso, clique em configurações > CloudFlare
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.
Na próxima página, role a página até o final.
Copie 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);
Salve o arquivo e pronto. Agora o seu site está com HTTP2 do cloudFlare e HTTP2 Push Do WordPress.
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?
Olá,
o que você achou deste conteúdo? Conte nos comentários.
Olá! Meu servidor tendo http2, ainda assim preciso/devo instalar o CloudFlare? Var melhorar mais ainda a perfomance?
Para quem tem a hospedagem com suporte a http2 precisa inserir o código do push no wp-config?
Boa pergunta
Uau! Dica topíssima, Flávio! Muito obrigado pelo passo a passo. Informação super valiosa! Abraço!
E para quem não está usando wordpress e sim uma aplicação em PHP, como ativar o código no sistema?
Uma dúvida, na atualização do wordpress, não alterará o wp-config?
‘wp-config’ não é afetado por atualização. Tanto que quando você instala o WordPress, não existe o ‘wp-config’ final, apenas o temporário. O final é gerado quando você insere as infos de banco de dados.
O wp rocket também solicita o api key e oferece otimizações parecidas para o cloudflare, será que da para fazer isso usando só o wp rocket e sem esse plugin do cloudflare ai?