O que é HTTP2? O único guia que você precisa para configurar um site WordPress mais rápido

HTTP / 2 Em maio de 2015, foi anunciado que a especificação para HTTP2 havia sido finalizada e lançada. Ofertas HTTP2 vantagens de desempenho significativas para qualquer site, visto que a maioria dos sites é alimentada por WordPress, foi apenas uma questão de tempo antes que precisássemos saber como configurá-lo e o que é HTTP2.

Então aqui estamos com um guia completo e / ou tutorial do que é HTTP2, porque você deve habilitar o HTTP2 em seu site, quais são as vantagens e finalmente - como fazer isso de fato.

 

Portanto, vamos começar com as primeiras coisas.

O que é HTTP2?

HTTP2 é a última versão do HTTP (HyperText Transfer Protocol) que foi otimizado de forma a fazer com que seu site carregue muito mais rápido, sem nenhum esforço extra de sua parte. Depois de configurar o HTTP2, não há necessidade de otimizações como minificação, combinação e outros hacks que costumávamos realizar antes - eles são integrados ao próprio protocolo.

(Pelo CollectiveRay, gostamos de fazer nossos sites bonita e rápido!) 

Antes de realmente chegarmos ao HTTP2, vamos dar uma olhada no HTTP e por que uma nova versão do HTTP foi necessária.

O que é HTTP?

O protocolo de transferência de hipertexto (também conhecido como HTTP) é simplesmente uma maneira pela qual seu navegador se comunica com o servidor web do site que você está visitando.

Existem muitas maneiras pelas quais duas (ou mais) máquinas se comunicam pela Internet. HTTP é o usado para navegar em sites. Com o surgimento de sites como YouTube e Twitch, que transportam muito tráfego por HTTP, esse protocolo continua sendo o que transporta a maior parte do tráfego. É definitivamente o mais "visível", uma vez que está envolvido em toda a navegação no site.

Afinal, quantas vezes você digita https: // todos os dias?

http

Sem entrar em muitos detalhes, o protocolo HTTP é usado pelo navegador do visitante para solicitar todo o conteúdo de um site.

A conversa é mais ou menos assim:

navegador: Olá servidor em www.collectiveray.com - você pode me fornecer o conteúdo deste site?

servidor: Olá navegador, este é o conteúdo HTML de www.collectiveray.com

<html xmlns: og="https://ogp.me/ns#" xmlns: fb="https://www.facebook.com/2008/fbml" lang="pt-br" dir="ltr" classe='com_content ver artigo itemid-388 j35 mm-hover'>

...

navegador: Ótimo, agora vejo que também preciso do conteúdo desses arquivos js: collectiveray. Js, jquery.min.js, jquery-ui.min.js ... e também o conteúdo desses arquivos: styles.css, jquery.min.css, ... Além disso, envie-me as seguintes imagens: favicon.ico, logo.jpg, blog-header.jpg, advert1.jpg, ...

servidor:

  1. Aqui está o conteúdo do arquivo collectiveray. Js
  2. E aqui está o conteúdo do arquivo jquery.min.js
  3. E aqui está jquery-ui.min.js
  4. ...
  1. e aqui está a imagem footer-icon.jpg ...

Realmente e verdadeiramente, o servidor e o navegador estão jogando tênis digital com os dados do site que você está visitando.

Cada um dos lados do servidor envia uma pequena parte do site. Isso continua acontecendo até que todo o conteúdo seja enviado do servidor do site para o navegador.

Outra analogia muito boa que tem sido usada para descrever o HTTP1 é a de um garçom pegando bebidas no bar, pegando apenas uma bebida toda vez que visita o bar.

http11

Claro, este método de obter uma "coisa" de cada vez não é muito eficiente, e é aqui que começam os problemas com HTTP ...

A web cresceu mais rápido do que os recursos de HTTP

O HTTP já existe há muito tempo. Quando foi pensada e criada, a internet era um lugar muito diferente.

A largura de banda foi medida em bits, não dezenas de megabits. Consequentemente, para serem utilizáveis, os sites foram feitos principalmente de texto e hiperlinks. As imagens eram poucas e distantes entre si.

Avanço rápido para os tempos modernos.

Sites, temas e todos os tipos de funcionalidade tornaram os sites cada vez mais pesados ​​em termos de recursos. O seu site médio contém centenas de arquivos e imagens diferentes.

Os sites que precisam usar centenas de recursos estão na ordem do dia.

Por exemplo, se você está planejando criar um site de associação do WordPress, usando este guia escrito por CollectiveRay, você precisará de temas de associação, plug-ins e muitos outros recursos, todos os quais precisam de vários recursos para funcionar corretamente.

Para complicar as coisas, cada site solicita informações de vários servidores diferentes para todos os tipos de scripts de terceiros (por exemplo, scripts do Google Analytics, botões de compartilhamento do Facebook, Google Ads ou AdSense, marketing por e-mail e todos os tipos de outras plataformas).

A quantidade de vezes que um navegador precisa buscar arquivos do servidor de um site precisa continua crescendo e crescendo. 

Isso não é um problema em si, embora o número cada vez maior de arquivos signifique que o tamanho dos dados baixados continue crescendo.

Isso significa que a quantidade absoluta de dados a serem baixados fica cada vez maior. Isso torna o carregamento dos sites mais lento em geral.

Para piorar a situação, criar uma conexão entre o navegador e o servidor é um operação tecnicamente cara e leva tempo. Conforme o número de diferentes recursos necessários em um site aumenta, também aumenta o tempo que leva para carregar um site.

Isso ocorre porque usando o HTTP versão 1, cada vez que um novo arquivo é necessário, uma nova conexão (cara) precisa ser criada.

Isso significa que os sites que queriam carregar rapidamente tiveram que passar por todo um exercício de otimização.

Como tornar um site mais rápido (versão pré-HTTP2)

Como pode ser visto por meio de nosso exemplo simples, HTTP v1 tinha uma série de limitações devido ao estado atual da web, resultando em sites se tornando lentos. Agora, você provavelmente já viu centenas de artigos mostrando como fazer seu Site WordPress mais rápido.

Também temos esse artigo porque, como Desenvolvedores do WordPress, estamos sempre perseguindo a necessidade de velocidade - e só ficamos felizes quando atingimos uma classificação de velocidade A.

A propósito, apresentamos muitos artigos diferentes para quem deseja aprender sobre o WordPress, verifique a seção de tutoriais em Collectiveray.

O que a maioria desses artigos que buscam acelerar o WordPress fazem é encontrar uma maneira de contornar as limitações do HTTP1. Eles executam soluções alternativas para garantir que os sites não fiquem lentos por todas essas conexões.

É por isso que havia uma necessidade urgente de HTTP2, não apenas para WordPress, mas para todos os outros sites que existem. Algo precisava ser feito para lidar com os problemas inerentes ao HTTP1 (tanto no navegador quanto no servidor web).

Então, quais foram as soluções / soluções alternativas para tornar um site usando HTTP v1 mais rápido? Normalmente nos referimos a eles como Reduzir, armadilha para peixes, Reciclar. Para obter mais explicações sobre isso, sugerimos que você leia nosso artigo sobre como tornar os sites mais rápidos acima.

  1. Crie um site leve que usa um quantidade mínima de JS, CSS e arquivos de imagem
  2. Reduza o número de solicitações para diferentes arquivos CSS e arquivos JS combinando o maior número possível desses arquivos (reduzindo as solicitações por meio da combinação de arquivos)
  3. Reduzindo o número de solicitações de imagens por criando uma imagem que combina todos eles em um e usando sprites CSS
  4. Remova quaisquer plug-ins extras (para reduzir o número de imagens, arquivos CSS e arquivos JS que eles adicionam ao site)
  5. Comprimir os dados necessários de modo que seja menor em tamanho (e, portanto, mais rápido para transportar) (por exemplo, você normalmente habilitar a compressão GZIP do WordPress para diminuir o tamanho dos dados que precisam ser transferidos)
  6. Aproveite o cache do navegador no WordPress usando um plug-in, de forma que, se um usuário visitar seu site novamente em um curto espaço de tempo, ele não terá o download dos mesmos arquivos novamente
  7. Outras ações...

Em essência, queríamos reduzir o número de solicitações separadas entre o servidor e o navegador. Também queríamos reduzir o tamanho dessas solicitações.

Otimize o http1 do site minimizando as solicitações de http

Então, como o HTTP / 2 melhora tudo isso?

Digite HTTP / 2

O HTTP / 2 foi escrito com a intenção de corrigir esses problemas inerentes. Um dos principais objetivos do HTTP2 é

Diminua a latência para melhorar a velocidade de carregamento da página em navegadores da web. (Fonte: WikiPedia)

e apresenta as seguintes melhorias

  • é binário, em vez de textual
  • é totalmente multiplexado, em vez de ordenado e bloqueando
  • pode, portanto, usar uma conexão para paralelismo
  • usa compressão de cabeçalho para reduzir a sobrecarga
  • permite que os servidores "enviem" respostas proativamente para os caches do cliente

Espere o que? Não se preocupe - vamos tentar explicar isso um pouco em termos mais simples.

  1. Binário em vez de textual: isso é algo que torna a transferência e a análise dos dados muito mais eficientes. A transferência de dados binários também é muito menos sujeita a erros. Os dados textuais são destinados ao consumo humano. Os dados binários são projetados para o consumo da máquina, o uso de binários para a transferência de dados é inerentemente mais rápido.

  2. Totalmente multiplexado: novamente, de forma simples, com HTTP, o problema era que cada conexão estava propensa a bloquear as conexões que precisavam acontecer depois dela. Imagine-se na fila para entrar na sua partida esportiva favorita, mas em vez de ter vários pontos de entrada, você só tinha uma catraca. Você pode imaginar que as coisas podem ficar muito lentas. A multiplexação permite que vários arquivos e solicitações sejam transferidos ao mesmo tempo. No exemplo da partida de futebol, em vez de ter uma pessoa entrando por vez, temos 1 portas, com 10 catracas entrando juntas.

  3. Use uma conexão para paralelismo: como mencionamos antes, quando uma conexão é cara para criar, se você continuar criando e fechando para todos os recursos de que precisa, você criará um sério problema de sobrecarga. A multiplexação permite que a mesma conexão seja reutilizada continuamente. Imagine a conexão como um tubo pelo qual os dados continuam fluindo até que você não tenha mais dados. Além disso, observe que, para qualquer site da Web, você normalmente terá o navegador conversando com vários servidores da web para vários scripts e recursos de terceiros (scripts de compartilhamento do Facebook, Twitter, Google Analytics, redes de anúncios, etc.) tendo uma conexão para cada um deles é mais eficiente.

  4. Compactação de cabeçalho também é outra maneira eficiente de remover várias das sobrecargas associadas à necessidade de recuperar vários recursos diferentes do mesmo ou de vários servidores da web. Mais uma vez, normalmente, em vez de ter que realizar várias viagens de ida e volta, uma viagem normalmente é o suficiente.

  5. Permite que os servidores enviem recursos proativamente: esta é uma maneira que o servidor, em vez de esperar que o navegador do cliente solicite os diferentes recursos conforme nosso primeiro exemplo, enviará proativamente os recursos de que o navegador eventualmente precisará ou solicitará. Isso é chamado de push de servidor HTTP / 2.

Se tivéssemos que voltar à analogia do garçom que trazia uma bebida por vez, a maior vantagem é que agora o garçom está usando uma bandeja de bebidas para levar todas as bebidas juntas. E também estão tomando bebidas do bar, de que provavelmente vão precisar quando estiverem no restaurante.

http vs http2

O que é SPDY? (também conhecido como Speedy)

Antes do HTTP2 realmente nascer, outra pessoa havia tentado consertar os problemas do HTTP. Este foi um projeto de pesquisa de alguns engenheiros do Google, que tentaram corrigir alguns dos problemas do HTTP1.1.

Os objetivos do SPDY eram para

  • Permitir multiplexação para permitir solicitações simultâneas - resolvendo assim os problemas de latência criados por ter várias conexões
  • Priorize recursos, como os recursos mais importantes de um site, sendo enviados primeiro
  • Compactar cabeçalhos HTTP para melhorar a eficiência, conforme discutido acima
  • Implemente o push do servidor conforme discutido acima também

Em um blog inicial lançado pelos engenheiros que escreveram o protocolo, foi alegado que tornar a web 2 vezes mais rápida. Embora os principais navegadores e os principais servidores da web suportassem SPDY, houve pouca adoção real.

No entanto, sua pesquisa foi crítica para o eventual lançamento do HTTP2, uma vez que o primeiro rascunho do HTTP2 usava o SPDY como base de trabalho.

O que preciso fazer para habilitar o HTTP / 2?

Antes de habilitar o HTTP2, você precisa saber quais implicações existem em seu site.

Quais navegadores suportam HTTP / 2?

No momento em que este artigo foi escrito, os navegadores de cliente mais populares suportavam totalmente HTTP / 2. FireFox, Chrome e navegadores baseados em Blink (ou seja, Opera e Yandex) suportam HTTP2. O Microsoft Edge também oferece suporte a HTTP2, embora Apple também suporta no Safari. Estatísticas de sites como Eu posso usar? mostram que a distribuição global do suporte atual está em mais de 95%. 

Se o navegador não for compatível com HTTP2 e o site for compatível com HTTP2, haverá um fallback normal para HTTP1, portanto, não haverá absolutamente nenhum problema para qualquer visitante se você ativar HTTP / 2. Só pode haver benefícios.

posso usar http2?

Quais servidores suportam HTTP / 2

Apache, Nginx, LiteSpeed, IIS e as implementações de servidor mais populares suportam HTTP / 2 - você pode verificar se o seu servidor web favorito ou o servidor da web que você usa tem suporte para http2 aqui.

No entanto, se você pode usar HTTP2, na verdade depende se sua empresa de hospedagem o ativou. Portanto, você terá que confirmar a disponibilidade real de HTTP / 2 com sua empresa de hospedagem. A imagem abaixo é uma lista de servidores que oferecem suporte a http / 2. 

suporte de servidor http2

Simplificando, se o seu site atualmente suporta HTTP / 2 depende totalmente da sua empresa de hospedagem ou do servidor onde você hospeda o seu site. Nós usamos Hospedagem InMotion (e aqui está o nosso Análise de hospedagem InMotion e essencialmente como nosso VPS tarifas), que oferecem suporte total ao HTTP2 há vários anos.

No entanto, também usamos StackPath para servir aos nossos recursos, que também suporta HTTP / 2.

A maioria das empresas de hospedagem de hoje oferece suporte a HTTP2 em seus servidores, então isso não deve ser uma preocupação.

Você pode usar esta ferramenta do KeyCDN para determinar se o seu site atualmente oferece suporte para HTTP / 2. Este teste HTTP / 2 pode dizer se você precisa executar alguma ação adicional ou não.

Seu site precisa ser seguro para habilitar HTTP2

Atualmente, todos os navegadores por aí suportam apenas HTTP2 criptografado.

Isso significa que, para que seu site seja compatível com HTTP / 2, você precisará ter seu site servido por uma conexão segura (TLS / SSL). Examinamos isso profundamente em nosso artigo sobre configurar um certificado seguro do WordPress em seu servidor.

Para recapitular embora

  1. Sites seguros obtêm um aumento de sinal de classificação de SEO
  2. Eles protegem os dados que estão sendo transferidos de e para o site (particularmente importante para senhas, dados de cartão de crédito e outros dados confidenciais)
  3. Há um forte movimento em direção a sites totalmente seguros e, se você não implementar a segurança em seu site, ele será deixado para trás

Você precisará adquirir um certificado seguro por meio de sua empresa de serviços de hospedagem. Empresas de hospedagem, como InMotion permitem que você use um certificado compartilhado, embora se quiser usá-lo com seu domínio, é altamente recomendável que você adquira seu próprio certificado. 

Precisa de ajuda com seu site?

Contrate um especialista em website avaliado por apenas US $ 65. Inscreva-se hoje para começar a bater papo gratuitamente.

Converse com um especialista

Outros sites como o WordPress.com (em oposição ao WordPress.org) - leia sobre a diferença aqui - fornecer certificados seguros já.

A instalação do certificado é normalmente feita pelo servidor de hospedagem. É uma coisa única, então você não precisa se preocupar.

Uma vez feito isso, você simplesmente precisará executar um redirecionamento 301 permanente por meio de seu arquivo .htaccess.

Mais uma vez, hosts como Hospedagem InMotion pode cuidar de tudo isso para você, se você não estiver inclinado a fazer esse tipo de ajuste técnico sozinho (que apresenta um certo risco de tempo de inatividade se não for feito corretamente).

Existe um plugin que posso usar para HTTP2?

Mencionamos que um dos benefícios de usar HTTP2 é a capacidade de realizar um push de servidor de itens que serão necessários para o navegador. Isso, é claro, é algo que precisa ser feito no nível do CMS, portanto, precisa do suporte do WordPress ou do seu CMS favorito.

Embora isso ainda não seja suportado no nível central, você pode ajustar seus temas ou plug-ins de forma que implementem a capacidade de enviar um 

Link:<...> rel="prefetch"

cabeçalho para cada script e estilo enfileirados à medida que o WordPress os envia para o código-fonte da página.

Se você deseja tornar seu site mais rápido em geral, habilitando a pré-busca e outros comandos para torná-lo mais rápido, recomendamos altamente WP foguete - um plugin premium que aumenta significativamente a velocidade do seu site. Se você quiser um plugin grátis, você pode usar isto

Confira WP Rocket para tornar seu site mais rápido

Na verdade, isso está aproveitando as vantagens reais dos recursos habilitados pelo HTTP / 2.

Recomendação Final

Então você está aqui porque queria tornar seu site mais rápido, colocando HTTP2 no lugar certo? 

Isto é apenas um de muitos maneiras de tornar seu site mais rápido. Além dessa tecnologia, você precisará fazer várias outras otimizações se quiser tornar seu site mais rápido, como

  • Implementar um plugin de cache de página
  • Habilitar cache de nível de PHP, como OpCache
  • Otimize as imagens para melhorar o desempenho
  • Habilite um CDN (gratuito ou não)
  • Ativar cache do navegador e compactação gzip
  • Otimize as fontes do Google
  • Habilitar pré-busca de DNS
  • Ativar carregamento lento de imagem
  • Habilitar minificação e concatenação
  • etc etc

Parece muito trabalho, certo? Isto é!

At CollectiveRay, às vezes gastamos muitos dias trabalhando para empurrar nosso site apenas algumas frações de segundo mais rápido. Isso ocorre porque nosso site é executado em Joomla, portanto, não temos muitos dos plug-ins disponíveis para outras opções populares de CMS, como o WordPress.

Por exemplo, para nossos clientes, sempre instalamos WP foguete. Nos sites onde o instalamos, sempre carregamos em menos de 3 segundos, com resultados típicos sendo que o site carrega em menos de 1 segundo.

Teste de velocidade antes depois

A beleza disso, porém, é que não temos que realizar nenhum trabalho manual que costumávamos fazer antes, então nós economizar horas de tempo e frustração, e obtemos excelentes resultados para começar.

Confira WP Rocket para tornar seu site rápido 

PERGUNTAS FREQUENTES

Devo usar HTTP2?

Sim, você deve habilitar e usar HTTP2 em seu site, se puder. O HTTP2 tornará seu site mais rápido e não há absolutamente nenhuma desvantagem em comparação com o HTTP versão 1. Mesmo se um cliente estiver usando um navegador antigo que não oferece suporte a HTTP2, há um fallback normal para o HTTP.

Qual é a diferença entre HTTP e HTTP2?

Existem várias diferenças e melhorias entre HTTP e HTTP2. HTTP2 é binário, em vez de textual, tornando-o inerentemente mais rápido. É totalmente multiplexado, em vez de ordenado e bloqueador, de forma que várias conexões podem ser utilizadas simultaneamente. Ele usa a compactação de cabeçalho para reduzir a sobrecarga e permite que os servidores "enviem" respostas proativamente para os caches do cliente. Todas essas melhorias tornam o HTTP2 muito mais rápido do que o HTTP.

O HTTP2 requer SSL?

Sim, o HTTP2 só é compatível no modo criptografado, portanto, seu site também precisa implementar certificados SSL / TLS seguros para poder usar o HTTP2.

Os navegadores suportam HTTP2?

Mais de 95% dos navegadores de sites em uso hoje são compatíveis com HTTP2. Mesmo se o navegador não oferecer suporte a HTTP2, haverá um fallback normal para HTTP.

 

 

Conclusão: vamos tornar a web mais rápida com HTTP2 

At CollectiveRay, sempre nos preocupamos em tornar nossos sites mais rápidos. HTTP2 é uma evolução e uma revolução ao mesmo tempo, e realmente esperamos que este artigo o ajude a avançar na configuração do WordPress HTTP2.

Por favor, deixe um comentário abaixo e diga-nos o que mais você gostaria de saber.

 

Precisa de ajuda para fazer as coisas? Experimente esses shows acessíveis com melhor classificação no Fiverr!

logotipo da fiverr

Clique aqui para encontrar especialistas em otimização de velocidade do WordPress.

Clique aqui para criar um site WordPress completo.

 

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...