Quanto mais pedidos HTTP seu site tiver, mais lento ele será carregado. Portanto, se você puder reduzir o número de solicitações HTTP e otimizar como elas carregam, você pode melhorar o desempenho do seu site.
Neste post, nós o levaremos através de tudo o que você precisa saber sobre como fazer menos solicitações HTTP no WordPress.
Começaremos com uma introdução básica às solicitações HTTP, por que elas são importantes, e como analisar as solicitações de seu site WordPress.
Em seguida, compartilharemos algumas dicas e estratégias que você pode implementar para reduzir as solicitações de seu site. Além de ajudá-lo com a mensagem “Fazer menos solicitações HTTP” em GTmetrix, estas estratégias também o ajudarão com a mensagem “Evite encadear solicitações críticas” no Google PageSpeed Insights.
Prefere assistir à versão em vídeo?
O que são solicitações HTTP?
Quando você constrói um website, ele tem muitas partes diferentes. Você tem os diferentes arquivos de imagem que você usa em uma página, as folhas de estilo CSS que controlam a aparência do conteúdo, os arquivos JavaScript que adicionam toda aquela funcionalidade legal, e assim por diante.
Quando alguém visita seu website, seu navegador precisa de uma maneira de baixar todos os recursos necessários para aquela página do seu servidor. Para fazer isso, ele faz solicitações HTTP ao servidor para cada recurso individual.
Por exemplo, poderia dizer, “hey server, I need that coolimage.png file” e “hey server, I need also the CSS stylesheet for that contact form plugin“. O servidor então responde a essas solicitações com os arquivos em questão.
Uma vez que o navegador da web recebe esses arquivos, ele pode montar a página web para seu visitante. É claro que é um pouco mais complicado do que isso, mas essa é a idéia básica.
HTTP, abreviação de Hypertext Transfer Protocol, é como esses computadores (o navegador do visitante e seu servidor 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 web, o navegador precisa fazer cinco solicitações HTTP separadas, uma para cada imagem.
Da mesma forma, se você usar quatro plugins WordPress e cada plugin adicionar sua própria folha de estilo CSS, o navegador do visitante precisará fazer quatro solicitações HTTP separadas, uma para a folha de estilo de cada plugin.
Por que é importante reduzir as solicitações HTTP?
Em geral, quanto mais pedidos HTTP seu site tiver, mais lento será o seu carregamento. Portanto, se você quiser fazer seu site carregar mais rápido, você precisa otimizar e reduzir o número de solicitações HTTP que seu site requer.
Embora isto seja um pouco simplista demais, a idéia básica é que o navegador web só exibirá o site ao seu visitante uma vez terminado o download de todas as solicitações HTTP (embora haja algumas táticas para dizer ao navegador que não há problema em esperar por certos arquivos).
Portanto, se um site tem que fazer 70 solicitações HTTP antes de poder exibir a página, isso vai levar mais tempo do que se ele tiver 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 iniciar o download de certas solicitações HTTP até que termine o download das solicitações HTTP antes dele.
O resultado final é: quando você faz menos solicitações HTTP, você faz com que seu site seja carregado mais rapidamente.
Como ver e analisar as solicitações HTTP do seu site
Acima, você aprendeu que tudo sendo igual, reduzindo o número de solicitações HTTP, agilizará seu site. Entretanto, todas as solicitações HTTP nem sempre são “iguais”. Algumas solicitações HTTP são maiores do que outras. Algumas são mais lentas do que outras.
Por exemplo, o pedido de um enorme arquivo de imagem de 3 MB levará muito mais tempo do que o pedido de uma pequena imagem de 20 KB.
Se você quiser fazer a maior melhoria em seu site, concentrando-se primeiro nas grandes solicitações HTTP de carregamento lento, terá o maior retorno sobre seu investimento.
Para analisar as solicitações HTTP de seu site, você pode usar algo chamado análise de Cascata.
A maioria das ferramentas de teste de velocidade oferece isso, mas as interfaces na GTMetrix e no Pingdom são muito convenientes. Você também pode usar as ferramentas de desenvolvimento do seu navegador. No entanto, usaremos GTmetrix para nossas capturas de tela.
Assim que você conectar sua URL, você verá uma caixa de resumo básico no topo. Isto mostra quantas solicitações HTTP seu site tem, mas não decompõe as solicitações individuais:
Para analisar seus pedidos individuais, vá para a aba Cascata abaixo.
Aqui, você verá uma lista de cada solicitação HTTP individual em seu site, juntamente com informações sobre quanto tempo aquela solicitação HTTP levou para ser baixada:
Você pode ver como nem todas as solicitações HTTP são iguais. Por exemplo, a imagem de 839,3 KB leva 1,12s enquanto a imagem de 57,6 KB leva apenas 87,5 ms:
Você também pode encontrar solicitações HTTP dos diferentes plugins do WordPress que você está usando, procurando o nome da pasta daquele plugin em seu servidor. Por exemplo, você pode ver que o WooCommerce adiciona sete de suas próprias requisições HTTP:
Desta forma, você pode ver se algum plugin que esteja usando está adicionando muitas solicitações HTTP (especialmente solicitações de carregamento lento).
Como Otimizar e Fazer Menos Solicitações HTTP no WordPress
A um alto nível, há duas estratégias amplas para fazer menos solicitações HTTP:
- Remover solicitações HTTP. Se possível, você deve remover completamente todas as solicitações HTTP desnecessárias. Por exemplo, se você tem um plugin que não agrega nenhum valor ao seu site e está carregando seu próprio CSS e JavaScript, basta remover completamente esse plugin para se livrar de todas as suas solicitações HTTP.
- Combinar solicitações HTTP. Se você tem solicitações HTTP que você absolutamente precisa carregar, você pode combiná-las em um único arquivo. Por exemplo, ao invés de seis pequenos arquivos CSS, você pode combiná-los em um único arquivo CSS maior, que ainda será carregado mais rapidamente porque o navegador precisa fazer menos solicitações (isto nem sempre é verdade com o HTTP/2, que discutiremos abaixo).
Começaremos com as táticas que se concentram na remoção de solicitações HTTP e depois entraremos na forma de combinar as solicitações HTTP restantes. A idéia básica é remover o que você puder e depois combinar o que restar.
1. Remover plugins de WordPress desnecessários
Para começar, você vai querer usar a análise da cascata para puxar para cima todas as solicitações de seus plugins. Você pode fazer isso procurando por “plugins”, que irão puxar para cima cada solicitação HTTP originada da pasta wp-content/plugins.
Se você passar o mouse sobre o nome do arquivo, você pode ver de qual plugin ele vem. Por exemplo, aqui você pode ver um pedido de Apresentação de Slides que você pode estar usando.
Algumas escavações posteriores mostrariam que a Apresentação de Slides acrescenta três de suas próprias solicitações HTTP, embora esta página de teste não contenha nenhum slides:
Se você estiver usando o Slider Revolution para uma chave deslizante, então talvez você precise mantê-la. Mas se você o instalou para testá-lo, então mais tarde removeu os slides, e agora você não está realmente usando-o… então você deve removê-lo para se livrar daqueles pedidos HTTP.
Basicamente, você quer percorrer a lista inteira e se perguntar se cada plugin está realmente agregando valor ao seu site. Se um plugin não está (mas está adicionando solicitações HTTP), então será melhor removê-lo.
2. Substituir os plugins pesados por outros mais leves
Uma vez aparados quaisquer plugins desnecessários, o próximo passo é ver se você pode substituir quaisquer plugins que esteja usando por alternativas mais leves.
Por exemplo, digamos que você queira adicionar botões de compartilhamento social ao seu site. É um bom recurso a ter, mas alguns plugins de compartilhamento social podem adicionar muitas solicitações HTTP.
Por exemplo, o popular AddThis plugin acrescenta seis de suas próprias solicitações HTTP (incluindo algumas solicitações externas – mais sobre aquelas em um segundo):
Você poderia aparar muita desta gordura usando uma alternativa mais otimizada como NovaShare ou Growby Media Vine.
3. Carregar condicionalmente roteiros que não são necessários em todo o site
Neste ponto, você deveria ter removido todos os plugins que não são necessários em nenhum lugar de seu site. Entretanto, há outra classe de plugins que podem causar problemas – plugins que são necessários apenas em partes específicas de seu site, mas carregam seus scripts em todos os lugares.
Por exemplo, pegue o popular plugin Contact Form 7. Você provavelmente só precisará deste plugin em algumas páginas (por exemplo, sua página “Fale conosco”). Entretanto, o Contact Form 7 carrega seus scripts em cada uma das páginas de seu site. Assim, por exemplo, o Contact Form 7 ainda está adicionando alguns pedidos HTTP aos seus posts no blog, mesmo que seus posts no blog não tenham nenhum formulário de contato.
Outro exemplo poderia ser o WooCommerce se você estiver usando-o apenas como um processador de pagamento. O WooCommerce ainda carregará seus scripts em todos os lugares, mesmo que 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 condicionalmente os plugins somente onde eles são necessários. Por exemplo, você poderia deixar o Contact Form 7 carregar em sua página “Contate-nos”, mas desativá-lo em qualquer outro lugar.
Se você não é um desenvolvedor, você pode usar plugins como Asset CleanUp ou Perfmatters para fazer isso sem código. Com Perfmatters, você precisará primeiro habilitar o gerenciador de scripts. Depois, você pode abrir o gerenciador de scripts para visualizar todos os scripts carregados em uma página e desabilitar os que não forem necessários:
Tenha cuidado, pois você pode causar problemas se desabilitar acidentalmente um roteiro que realmente é necessário. Embora esta seja uma tática útil, é também uma tática avançada.
Se você não se sentir confiante, talvez queira simplesmente pular esta etapa ou contratar um desenvolvedor para ajudá-lo.
4. Remover imagens desnecessárias (e otimizar o resto)
Bem usadas, as imagens tornam seu site mais fácil de usar e envolvente. Elas agregam valor ao seu site.
Entretanto, cada imagem em seu site é uma solicitação HTTP separada. Portanto, se você tiver imagens que não estejam agregando valor, é melhor removê-las para eliminar essas solicitações HTTP.
Por exemplo, esse GIF engraçado vale a pena? Pode valer… mas também pode não valer – você precisa pensar nas compensações sempre que estiver adicionando mais imagens ao seu conteúdo.
Finalmente, certifique-se de redimensionar e comprimir as imagens que restam. Embora isto não reduza o número de solicitações HTTP por si só, reduzirá o tamanho dessas solicitações HTTP, o que as fará carregar mais rapidamente.
5. Use o Lazy Loading para Imagens e Vídeos
Com o carregamento preguiçoso, seu site esperará para carregar imagens, vídeos e iframes abaixo do dobrado até que um usuário comece a rolar para baixo.
Como estes recursos não são carregados imediatamente, não há necessidade de fazer um pedido HTTP para a carga inicial da página.
A partir do WordPress 5.5, o WordPress agora inclui o carregamento de imagens nativas preguiçosas usando o atributo de carregamento HTML. Para algumas outras formas de implementar o carregamento preguiçoso (inclusive para arquivos de vídeo), você pode conferir nosso guia completo de carregamento preguiçoso WordPress.
6. Limitar o uso de fontes personalizadas e/ou usar fontes do sistema (o mesmo para fontes de ícones)
As fontes personalizadas são ótimas para melhorar o design e a experiência do usuário em seu site. Entretanto, você precisa ter cuidado com a forma de usá-las, pois cada tipo de fonte personalizada que você usa adiciona outro pedido HTTP.
Se você vai usar fontes personalizadas, certifique-se de se ater a um número pequeno. Você realmente precisa de uma fonte diferente para seu título postal e seu corpo postal? Ou você poderia usar a mesma fonte? Você realmente precisa dos cinco pesos das fontes? Ou você poderia escolher apenas duas?
O mesmo se aplica a fontes de ícones como a fonte Awesome e IcoMoon. As fontes de ícones podem ser úteis, mas você provavelmente não precisa carregar várias bibliotecas de fontes de ícones. É melhor escolher apenas uma biblioteca de fontes de ícones e ficar com isso.
Finalmente, se você quiser ir um passo além e eliminar completamente as solicitações HTTP relacionadas às fontes de seu site, você pode considerar o uso de uma pilha de fontes do sistema. Embora isto lhe dê menos flexibilidade em termos de design, também significa que seus visitantes não terão que carregar nenhum arquivo de fontes apenas para renderizar seu site.
(Leitura sugerida: Como mudar as fontes no WordPress).
7. Desativar Emojis do WordPress
Por padrão, o WordPress adiciona sua própria solicitação HTTP para emojis. Embora seja apenas uma única solicitação HTTP de 5.1 KB, este arquivo há muito tempo tem sido um espinho no lado dos fãs do desempenho do WordPress. Aqui em Kinsta, adoramos o desempenho do WordPress, e é por isso que temos um guia completo sobre como desativaros emojis do WordPress.
A opção mais simples é apenas instalar e ativar o plugin gratuito Disable Emojis (GDPR friendly). No entanto, você pode ler nosso guia completo para algumas outras opções.
Depois de fazer isso, sua contagem de pedidos HTTP cairá por um e você ainda poderá usar emojis 😃
8. Reduzir/Eliminar solicitações HTTP de terceiros
Até agora, nós nos concentramos principalmente em reduzir as solicitações HTTP de arquivos no servidor do seu site WordPress. Entretanto, os navegadores de seus visitantes também podem precisar solicitar arquivos de servidores de terceiros.
Estes pedidos podem ser ainda mais problemáticos porque seu site está à mercêda velocidade desses servidores de terceiros.
Alguns exemplos:
- Google Analytics – o script de rastreamento é hospedado nos servidores do Google, mas os navegadores dos visitantes ainda precisam baixar esse arquivo.
- Vídeos do YouTube incorporados – você verá muitos pedidos HTTP para os servidores do YouTube.
- Serviços de anúncios de terceiros – você verá toneladas de solicitações de terceiros relacionadas à veiculação de seus anúncios.
- Google Fonts (no CDN do Google) – você verá pedidos de terceiros aos servidores do Google para carregar seus arquivos de fontes.
Você pode aplicar muitas das mesmas táticas de cima para estas solicitações HTTP de terceiros.
Por exemplo, se um plugin adicionar seus próprios pedidos de terceiros (como o AddThis plugin de cima faz), você pode removê-lo e usar algo mais otimizado.
Para vídeos do YouTube, você pode carregá-los com preguiça e substituir a carga inicial da página por uma miniatura de imagem. Isto atrasará a adição desses pedidos HTTP até que um visitante queira reproduzir o vídeo.
Para scripts de terceiros que são necessários, como Google Analytics ou Facebook Pixel, você pode experimentar hospedar esses scripts localmente.
WPRocket tem add-ons incorporados para hospedar localmente Google Analytics e Facebook Pixel ou você pode usar um plugin como CAOS (Complete Analytics Optimization Suite).
Temos também alguns guias que podem ajudar:
9. Combinar imagens com Sprites CSS
Neste ponto, você deveria ter sido capaz de fazer menos solicitações HTTP a partir de seu site. Agora, é hora de começar a combinar as solicitações HTTP que restam, começando com as imagens.
Outra maneira de otimizar as imagens em seu site é combinar imagens separadas em um único arquivo de imagem. Então, você pode usar o CSS para exibir apenas uma parte desse arquivo de imagem onde for necessário. Esta é uma tática chamada CSS sprites.
Os sprites CSS funcionam melhor para imagens decorativas como variações de logotipos ou ícones. Você não deve usar sprites CSS para imagens informativas (como imagens no corpo de um post de blog) porque há dois grandes inconvenientes:
- SEO – porque você está combinando imagens em um único arquivo de imagem, você não pode classificar imagens individuais no Google Search.
- Acessibilidade – porque não é possível adicionar texto altàs imagens, as pessoas com leitores de tela não serão capazes de entender as imagens carregadas com sprites CSS (embora existam algumas táticas para corrigir isso).
Se você ainda estiver confuso sobre este tópico, aqui está um exemplo do arquivo sprite CSS da Amazon – você pode ver como ele inclui um monte de variações de logotipos, assim como alguns ícones. A Amazon usa o CSS para garantir que apenas a “porção” relevante desse arquivo de imagem seja exibida em cada local:
Infelizmente, não há nenhum plugin WordPress “configure-o e esqueça-o” para sprites CSS. Entretanto, você pode encontrar ferramentas para ajudar, como esta Ferramenta Sprite CSS:
- Carregue as imagens que você deseja combinar com a ferramenta.
- A ferramenta lhe dará então um arquivo de imagem combinado, juntamente com algum código CSS para cada imagem que você carregou.
- Faça o upload do arquivo de imagem combinado para seu site WordPress.
- Use o código CSS para exibir a imagem em seu conteúdo. O CSS fornecido selecionará automaticamente apenas a porção apropriada do arquivo de imagem combinado.
10. Combinar arquivos CSS e JavaScript
Entre seu tema WordPress e seus plugins, seu site provavelmente estará carregando várias folhas de estilo CSS e arquivos JavaScript, o que significa várias solicitações HTTP apenas para que o navegador baixe o CSS e o JavaScript que ele precisa para renderizar a página.
Para reduzir todas estas solicitações separadas, você pode combinar estes arquivos/folhas de estilos separados em um único arquivo/folha de estilos. Isto é chamado de combinação ou concatenação de arquivos, dependendo da ferramenta que você estiver usando.
Muitos plugins de cache do WordPress incluem recursos para combinar arquivos CSS e JavaScript. Por exemplo, o WP Rocket, que você pode usar no Kinsta, permite ativar ambos com alguns cliques.
Ir para a guia Otimização de arquivos nas configurações do WP Rocket. Depois, habilite a minificação e depois combine os arquivos:
Para um olhar mais detalhado, confira nosso guia WPRocket completo.
Você também pode usar o Autoptimize para combinar arquivos CSS e JavaScript. Para combinar arquivos, vá para Configurações → Autoptimize e escolha as opções para:
- Arquivos JS agregados
- Arquivos CSS agregados
Para um olhar mais detalhado, confira nosso tutorial completo Autoptimize.
Os benefícios da combinação de arquivos são menos claros com oHTTP/2, que é o que seu site utiliza se você hospedar na Kinsta. O HTTP/2 foi projetado para ser mais eficiente na transferência de vários arquivos pequenos, o que significa que há menos diferença entre um arquivo CSS/JS grande e vários arquivos pequenos.
Basicamente, se você estiver hospedado na Kinsta, talvez não precise fazer esta etapa para melhorar o tempo de carregamento da sua página. Isso porque os clientes Kinsta podem acessar o recurso de minificação de código diretamente em seu painel de controle MyKinsta. Isto ajudará a aumentar a otimização geral, permitindo que os clientes ativem a minificação automática de CSS e JavaScript com um simples clique.
Recomendamos ainda testá-lo, pois ainda pode ser benéfico para alguns sites, mas você também pode não notar nenhuma diferença nos tempos reais de carregamento de página.
Entretanto, muitas ferramentas de teste de desempenho como GTmetrix ainda não reconhecem o HTTP/2, portanto GTmetrix ainda pode exibir a mensagem “Fazer Menos Solicitações HTTP” e reduzir sua pontuação. Lembre-se, porém – a pontuação não importatanto quanto o temporeal de carregamento dapágina.
11. Defer Render-Blocking JavaScript
Adiar o JavaScript de render-bloqueio não está eliminando as solicitações HTTP em si. Entretanto, está otimizando como eles carregam, o que pode ter o mesmo efeito nos tempos de carga percebidos em seu site.
Também pode ajudar com a mensagem “evite encadear pedidos críticos” no Google PageSpeed Insights/Lightthouse.
Ao adiar solicitações para certos arquivos ou carregá-los assincronamente, você pode evitar que certos recursos sem importância “bloqueiem” recursos que são necessários para carregar rapidamente a porção visível de seu site.
Para saber mais sobre o porquê disto acontecer, você pode ler nosso guia para entender o caminho de renderização crítica de uma página web.
Em seguida, você pode seguir nosso guia detalhado para eliminar recursos de render-bloqueio no WordPress.
Melhores Plugins WordPress para Fazer Menos Pedidos HTTP
Se você estiver procurando alguns plugins WordPress “tudo em um” para fazer menos solicitações HTTP, recomendamos dois dos plugins do tutorial acima:
Enquanto você ainda precisará avaliar manualmente seu tema e plugins para ver se eles estão fazendo muitos pedidos HTTP, ambos os plugins podem ajudá-lo a otimizar tudo o que permanece em seu site uma vez que você tenha feito sua limpeza.
Resumo
Cada recurso separado em seu site acrescenta 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 plugins também adicionarão suas próprias solicitações HTTP. Você também terá solicitações HTTP de quaisquer imagens que você usar e scripts de terceiros que você adicionar (tais como ferramentas analíticas).
Mais e/ou maiores solicitações HTTP levarão a um website mais lento. É por isso que você normalmente verá mensagens como “fazer menos solicitações HTTP” ou “otimizar solicitações HTTP” ou “evitar encadear solicitações críticas” quando você usa 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 os passos que detalhamos acima.
Você ainda tem alguma pergunta sobre como fazer menos solicitações HTTP no WordPress? Informe-nos nos comentários!
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário