Você sabe como fazer menos solicitações HTTP no WordPress para acelerar seu site? Nesse post vou mostrar como reduzir e combinar solicitações HTTP, fazendo com que o tempo de carregamento do seu site seja mais rápido.
É claro que diminuir apenas as requisições HTTP em um site não resolverá 100% o problema de ter um tempo de carregamento mais rápido, entretanto é uma das tarefas necessárias para alcançar esse objetivo.
Quanto mais solicitações HTTP seu site tiver, mais lento será o carregamento. Portanto, se você pode reduzir o número de solicitações HTTP e otimizar o modo como são carregadas, pode melhorar o desempenho do seu site.
Vou começar com uma introdução básica às solicitações HTTP, por que são importantes e como analisar as solicitações do seu site WordPress.
Em seguida, vou citar algumas dicas e estratégias que você pode implementar para reduzir as solicitações do seu site. Além de ajudá-lo com a mensagem “Faça menos solicitações HTTP” no GTmetrix, essas estratégias também ajudarão com a mensagem “Evite o encadeamento de solicitações críticas” no Google PageSpeed Insights.
O que você vai ler neste artigo
O que são solicitações HTTP?
Quando você constrói um site , ele tem várias partes diferentes. Você tem os diferentes arquivos de imagem que usa em uma página, as folhas de estilo CSS que controlam a aparência do conteúdo, os arquivos JavaScript que adicionam todas as funcionalidades interessantes e assim por diante.
Quando alguém visita seu site , o navegador precisa fazer o download de todos os recursos necessários para essa página do seu servidor. Para fazer isso, ele faz solicitações HTTP ao servidor para cada recurso individual.
Por exemplo, pode dizer, “ei servidor, preciso daquele arquivo coolimage.png ” e “ei servidor, também preciso da folha de estilo CSS para o plugin de formulário de contato “. O servidor então responde a essas solicitações com os arquivos em questão.
Depois que o navegador obtém esses arquivos, ele pode montar a página da web para o seu visitante. Claro, é um pouco mais complicado do que isso, mas essa é a ideia básica.
HTTP, abreviação de Hypertext Transfer Protocol, é a forma como esses computadores (o navegador do visitante e seu servidor da web) se comunicam.
Uma coisa importante a entender é que cada elemento separado é uma solicitação HTTP separada. Por exemplo, se você tiver cinco arquivos de imagem em uma página da web, o navegador precisará fazer cinco solicitações HTTP separadas, uma para cada imagem.
Da mesma forma, se você usar quatro plug-ins do WordPress e cada plug-in adicionar sua própria folha de estilo CSS, o navegador do visitante precisará fazer quatro solicitações HTTP separadas, uma para cada folha de estilo do plug-in.
Por que é importante reduzir as solicitações HTTP?
Em geral, quanto mais solicitações HTTP seu site tiver, mais lento será o carregamento . Portanto, se você deseja que o seu site carregue mais rápido, é necessário otimizar e reduzir o número de solicitações HTTP que o seu site exige.
Embora isso seja uma simplificação exagerada, a ideia básica é que o navegador da web só exibirá o site para o seu visitante quando terminar de baixar todas as solicitações HTTP (embora haja algumas táticas para dizer ao navegador que está tudo bem para esperar por certos arquivos).
Portanto, se um site tem que fazer 70 solicitações HTTP antes de exibir a página, isso vai demorar mais do que se tivesse que fazer 40 solicitações HTTP.
Além disso, algumas solicitações HTTP irão “bloquear” outras solicitações HTTP, o que significa que o navegador não pode começar a baixar certas solicitações HTTP até terminar de baixar as solicitações HTTP anteriores.
O ponto principal é: quando você faz menos solicitações HTTP, faz com que seu site carregue mais rápido .
Como ver e analisar as solicitações HTTP do seu site
Acima, você aprendeu que todas as coisas sendo iguais, reduzir o número de solicitações HTTP irá acelerar seu site . No entanto, todas as solicitações HTTP nem sempre são “iguais”. Algumas solicitações HTTP são maiores do que outras. Alguns são mais lentos do que outros.
Por exemplo, a solicitação de um arquivo de imagem enorme de 3 MB demorará muito mais do que a solicitação de uma imagem minúscula de 20 KB.
Se você deseja fazer a maior melhoria em seu site, concentrar-se primeiro nas solicitações HTTP grandes e de carregamento lento terá o maior retorno sobre o investimento.
Para analisar as solicitações HTTP do seu site, você pode usar algo chamado Waterfall ou análise em cascata.
A maioria das ferramentas de teste de velocidade oferece isso, mas as interfaces do GTMetrix e Pingdom são muito convenientes. Você também pode usar as ferramentas de desenvolvedor do seu navegador. No entanto, usaremos GTmetrix para nossas capturas de tela.
Depois de inserir seu URL, você verá uma caixa de resumo básico na parte superior. Isso mostra quantas solicitações HTTP seu site tem, mas não divide as solicitações individuais:
Para analisar suas solicitações individuais, vá para guia Waterfall abaixo.
Aqui, você verá uma lista de cada solicitação HTTP individual em seu site, juntamente com informações sobre quanto tempo essa solicitação HTTP demorou para baixar:
Você pode ver como nem todas as solicitações HTTP são iguais. Dito isso, Você também pode encontrar solicitações HTTP de diferentes plug-ins do WordPress que está usando, pesquisando o nome da pasta do plug-in em seu servidor.
Dessa forma, você pode ver se algum plug-in que está usando está adicionando muitas solicitações HTTP (especialmente solicitações de carregamento lento).
Como otimizar e fazer menos solicitações HTTP no WordPress
Em um alto nível, existem duas estratégias amplas para fazer menos solicitações HTTP:
- Remova solicitações HTTP. Se possível, você deve remover completamente todas as solicitações HTTP desnecessárias. Por exemplo, se você tiver um plug-in que não agrega valor ao seu site e está carregando seu próprio CSS e JavaScript, basta remover completamente esse plug-in para se livrar de todas as suas solicitações HTTP.
- Combine solicitações HTTP. Se você tiver solicitações HTTP que absolutamente devem ser carregadas, poderá combiná-las em um único arquivo. Por exemplo, em vez de seis pequenos arquivos CSS, você pode combiná-los em um único arquivo CSS maior, que ainda carregará mais rápido porque o navegador precisa fazer menos solicitações (isso nem sempre é verdade com HTTP / 2 , que irei abordar abaixo).
Vou começar com as táticas que se concentram na remoção de solicitações HTTP e, em seguida, veremos como combinar as solicitações HTTP restantes. A ideia básica é remover o que você puder e então combinar o que sobrou.
1. Remova os plug-ins desnecessários do WordPress
Para começar, você desejará usar a análise em cascata para obter todas as solicitações de seus plug-ins. Você pode fazer isso procurando por “plug-ins”, que puxará todas as solicitações HTTP originadas da pasta wp-content / plugins
Se você passar o mouse sobre o nome do arquivo, poderá ver de qual plugin ele vem.
Basicamente, você deseja percorrer toda a lista e se perguntar se cada plugin está realmente agregando valor ao seu site. Se um plug-in não for (mas estiver adicionando solicitações HTTP), será melhor removê-lo.
2. Substitua Plugins Pesados por Plugins Mais Leves
Depois de aparar todos os plug-ins desnecessários, a próxima etapa é ver se você pode substituir os plug-ins que está usando por alternativas mais leves.
Por exemplo, digamos que você deseja adicionar botões de compartilhamento social ao seu site . Esse é um bom recurso, mas alguns plug-ins de compartilhamento social podem adicionar muitas solicitações HTTP.
Você poderia cortar muito dessa gordura usando uma alternativa mais otimizada, como Social Snap ou Grow by MediaVine. No caso do MBN, ele usa o Social Snap que possui apenas duas requisições.
3. Carregar condicionalmente os scripts que não são necessários em todo o site
Neste ponto, você deve ter removido todos os plug-ins que não são necessários em nenhum lugar do seu site. No entanto, há outra classe de plug-ins que pode causar problemas – plug-ins que são necessários apenas em partes específicas do seu site, mas carregam seus scripts em todos os lugares.
Por exemplo, pegue o popular plugin Contact Form 7 . Provavelmente, você só precisará desse plugin em algumas páginas (por exemplo, na página “Fale conosco”). No entanto, o Contact Form 7 carrega seus scripts em cada página do seu site. Assim, por exemplo, o Contact Form 7 ainda está adicionando algumas solicitações HTTP às suas postagens de blog, mesmo que suas postagens de blog não tenham nenhum formulário de contato.
Outro exemplo poderia ser WooCommerce se você o estiver usando apenas como um processador de pagamentos . O WooCommerce ainda carregará seus scripts em todos os lugares, embora você realmente só precise deles no carrinho e nas páginas de checkout para este caso de uso.
Uma tática avançada aqui é carregar plug-ins condicionalmente apenas onde eles são necessários. Por exemplo, você pode deixar o Formulário de contato 7 carregar na página “Fale conosco”, mas desativá-lo em todos os outros lugares.
Se você não for um desenvolvedor, assim como eu, aconselho você a usar plug-ins como Asset CleanUp ou Perfmatters para fazer isso sem código. Com o Perfmatters, você primeiro precisa habilitar o gerenciador de scripts. Em seguida, você pode abrir o gerenciador de scripts para visualizar todos os scripts carregados em uma página e desativar aqueles que não são necessários:
Tenha cuidado, pois você pode causar problemas se acidentalmente desativar um script que realmente é necessário . Embora seja uma tática útil, também é uma tática avançada.
Se você não se sentir confiante, pode simplesmente pular esta etapa ou contratar um desenvolvedor para ajudá-lo.
4. Remova as imagens desnecessárias (e otimize o resto)
Bem utilizadas, as imagens tornam o seu site mais amigável e envolvente. Eles agregam valor ao seu site.
No entanto, cada imagem em seu site é uma solicitação HTTP separada. Portanto, se você tiver imagens que não agregam valor, é melhor removê-las para eliminar essas solicitações HTTP.
Por fim, certifique-se de redimensionar e compactar as imagens restantes . Embora isso não reduza o número de solicitações HTTP por si só, reduzirá o tamanho dessas solicitações HTTP, o que fará com que carreguem mais rápido.
Para isso você pode usar ferramentas como:
5. Use o carregamento lento (lazy) para imagens e vídeos
Com o carregamento lento (lazy loading), seu site aguardará para carregar imagens, vídeos e iframes abaixo da dobra até que um usuário comece a rolar a página para baixo.
Como esses recursos não são carregados imediatamente, não há necessidade de fazer uma solicitação HTTP para o carregamento inicial da página.
A partir do WordPress 5.5, o WordPress incluiu o carregamento lento (lazy loading de forma nativa para imagens usando o atributo de carregamento de HTML. Se seu WordPress não for o 5.5 você pode simplesmente adicionar, por exemplo nas imagens de post a classe “class=”lazy”, ficará mais ou menos assim:
<img src="exemplo.jpg" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">
6. Limitar o uso de fontes personalizadas e / ou o uso de fontes do sistema
Fontes personalizadas são ótimas para melhorar o design e a experiência do usuário em seu site. No entanto, você precisa ter cuidado ao usá-los, pois cada tipo de fonte personalizada que você usa adiciona outra solicitação HTTP.
Se você for usar fontes personalizadas, certifique-se de usar um pequeno número. Você realmente precisa de uma fonte diferente para o título e o corpo da sua postagem? Ou você poderia usar a mesma fonte? Você realmente precisa de todos os cinco pesos de fonte? Ou você pode apenas escolher dois?
O mesmo se aplica a fontes de ícone , como Font Awesome e IcoMoon. As fontes de ícone podem ser úteis, mas provavelmente você não precisa carregar várias bibliotecas de fontes de ícone. É melhor escolher apenas uma biblioteca de fontes de ícone e ficar com ela.
Finalmente, se você quiser ir um passo adiante e eliminar completamente as solicitações HTTP relacionadas às fontes do seu site, você pode considerar o uso de uma pilha de fontes do sistema. Embora isso ofereça menos flexibilidade em termos de design, também significa que seus visitantes não terão que carregar nenhum arquivo de fonte apenas para renderizar seu site.
7. Combine imagens com CSS Sprites
Nesse ponto, você deve ter conseguido fazer menos solicitações HTTP de seu site. Agora, é hora de descobrir como combinar as solicitações HTTP restantes, começando com imagens.
Outra maneira de otimizar as imagens em seu site é combinar imagens separadas em um único arquivo de imagem. Em seguida, você pode usar CSS para exibir apenas uma parte desse arquivo de imagem onde necessário. Esta é uma tática chamada sprites CSS .
Sprites CSS funcionam melhor para imagens decorativas, como variações de logotipo ou ícones. Você não deve usar sprites CSS para imagens informativas (como imagens no corpo de uma postagem de blog) porque existem duas grandes desvantagens:
- SEO – como você combina imagens em um único arquivo de imagem, não é possível classificar imagens individuais na Pesquisa Google.
- Acessibilidade – como você não pode adicionar texto alternativo às imagens , as pessoas com leitores de tela não serão capazes de entender imagens carregadas com sprites CSS (embora existam algumas táticas para corrigir isso).
Infelizmente, não existe um plugin WordPress do tipo “configure e esqueça” para sprites CSS. No entanto, você pode encontrar ferramentas para ajudar, como esta ferramenta CSS Sprite:
- Faça upload das imagens que deseja combinar para a ferramenta.
- A ferramenta então fornecerá um arquivo de imagem combinado, junto com algum código CSS para cada imagem que você carregou.
- Faça upload do arquivo de imagem combinado para o seu site WordPress.
- Use o código CSS para exibir a imagem em seu conteúdo. O CSS fornecido selecionará automaticamente apenas a parte adequada do arquivo de imagem combinado.
Resultado das ações para reduzir solicitações http
Ao aplicar as ações com a finalidade de reduzir a quantidade de solicitações http e que impactam diretamente no tempo de carregamento, é possível notar que o número das requisições foi reduzido de 123 solicitações para 81 aumentando em dois pontos o PageSpeed score, como mostra a imagem abaixo:
Ainda faltam diversas ações possíveis, mas apenas com as dicas menciodas já foi possível obter esses resultados.
Resumindo o assunto
Cada recurso separado em seu site adiciona uma solicitação HTTP. Uma imagem é uma solicitação HTTP, uma folha de estilo CSS é uma solicitação HTTP, um arquivo de fonte é uma solicitação HTTP e assim por diante.
Se você estiver usando o WordPress , seu tema certamente adicionará suas próprias solicitações HTTP e muitos plug-ins também adicionarão suas próprias solicitações HTTP. Você também terá solicitações HTTP de quaisquer imagens que usar e scripts de terceiros que adicionar (como ferramentas de análise ).
Solicitações HTTP mais e / ou maiores levarão a um site mais lento. É por isso que você geralmente verá mensagens como “faça menos solicitações HTTP” ou “otimize solicitações HTTP” ou “evite o encadeamento de solicitações críticas” ao usar ferramentas de teste de velocidade como GTmetrix ou PageSpeed Insights.
Para reduzir o número de solicitações HTTP em seu site, você pode seguir as etapas que detalhei acima.
