Como fazer menos solicitações HTTP no WordPress (11 dicas)

Para exibir seu site, o navegador de um usuário enviará solicitações HTTP ao seu servidor. No entanto, se você tiver vários arquivos não otimizados, o servidor deverá processar muitas solicitações. Como eles podem aumentar significativamente o tempo de carregamento da página, convém que seu site faça menos solicitações HTTP.

Felizmente, é possível reduzi-los, e é disso que trata este post.

Uma introdução às solicitações HTTP

Sempre que um usuário visita seu site, o navegador dele precisa baixar recursos do seu servidor. Para se comunicar com ele, o navegador envia solicitações com HTTP (Hypertext Transfer Protocol).

Os sites compreendem diferentes formas de dados, e os arquivos de HTML, CSS, imagens e vídeos são todos armazenados em um servidor – renderizar esse conteúdo em um navegador requer solicitações HTTP.

Aqui estão as etapas envolvidas quando alguém navega na Internet:

É importante observar que a renderização de um site não requer apenas uma solicitação HTTP. Cada arquivo de imagem individual, folha de estilo de plug-in, script JavaScript, fonte da Web e assim por diante geralmente terá o seu próprio. Portanto, se o seu site não for otimizado, isso poderá afetar negativamente os tempos de carregamento.

Por que você pode querer que seu site WordPress faça menos solicitações HTTP

Ao criar um site, é importante minimizar arquivos desnecessários. Assim, o navegador do visitante não precisa solicitar tantos recursos do servidor. Como seu site fará menos solicitações HTTP, ele carregará muito mais rápido.

Como regra geral, um número maior de solicitações HTTP leva a velocidades de página mais lentas. Se houver mais recursos para baixar antes de renderizar a página, os usuários terão que esperar muito tempo para visualizar o conteúdo.

Por exemplo, um site com apenas 50 solicitações geralmente carrega mais rápido do que um com 70 solicitações. Isso ocorre porque há menos recursos para processar e baixar.

A história real é um pouco mais complexa, pois nem todas as solicitações HTTP são criadas iguais. Uma solicitação HTTP grande e de carregamento lento pode ter um efeito maior do que cinco solicitações HTTP pequenas e de carregamento rápido. Mas, como regra geral – menos solicitações HTTP = site de carregamento mais rápido .

Ao reduzir as solicitações de HTTP em seu site, você melhorará suas principais métricas da Web, especialmente sua pontuação de maior pintura de conteúdo (LCP). Por sua vez, isso pode melhorar a experiência do usuário (UX), pois os visitantes verão o conteúdo mais rapidamente.

Como testar as solicitações HTTP do seu site

Como mencionamos anteriormente, as solicitações HTTP fazem parte da renderização. No entanto, nem todas as solicitações HTTP são iguais. Antes de começar a reduzi-los em seu site, você precisa saber exatamente quais deles segmentar.

Para fazer isso, você pode usar uma ferramenta de análise de desempenho como o GTmetrix. Comece inserindo o URL do seu site e clique em Testar seu site :

Você receberá um relatório de desempenho contendo informações sobre o tamanho da sua página e o número total de solicitações. Para visualizar esses dados, role para baixo até Detalhes da página :

Você também pode visualizar solicitações individuais clicando na guia Cascata . Isso mostrará quanto tempo cada arquivo levou para baixar:

Usando este gráfico em cascata, você pode identificar quais elementos em seu site causam solicitações HTTP desnecessárias. Depois de encontrar o problema, você pode implementar a solução certa e acelerar seu site.

Como você pode ver no gráfico acima, cada solicitação HTTP tem um tamanho diferente e leva um tempo diferente para carregar.

Se você deseja o maior retorno de seus esforços, tente se concentrar em eliminar as solicitações HTTP maiores e mais lentas.

Você também deve se concentrar na remoção de solicitações HTTP de terceiros ( recursos que seu site carrega do servidor de outra pessoa, como os scripts do Google Analytics ). Essas solicitações de terceiros exigem pesquisas extras de DNS e apresentam outras desvantagens de desempenho.

Como fazer menos solicitações HTTP no WordPress e acelerar seu site (11 dicas)

Depois de testar seu site, é hora de reduzir suas solicitações HTTP.

Abaixo, examinaremos 11 maneiras diferentes de fazer menos solicitações HTTP e otimizar as solicitações HTTP restantes. Algumas dessas dicas não eliminarão necessariamente as solicitações HTTP, mas otimizarão as solicitações para que sejam carregadas mais rapidamente, o que ainda é importante para acelerar o seu site.

1. EXCLUA PLUGINS DESNECESSÁRIOS
2. ADIAR JAVASCRIPT DE BLOQUEIO DE RENDER E/OU ATRASAR A EXECUÇÃO DE JAVASCRIPT
3. SCRIPTS DE CARREGAMENTO CONDICIONAL
4. MINIMIZAR SOLICITAÇÕES DE TERCEIROS
5. OTIMIZE SUAS IMAGENS
6. IMPLEMENTAR LAZY LOADING
7. USE UMA PILHA DE FONTES DO SISTEMA
8. COMBINE CSS E JAVASCRIPT
9. USE SPRITES CSS PARA COMBINAR IMAGENS
10. MINIFICAR O CÓDIGO DO SEU SITE
11. DESATIVAR EMOJIS

1. Exclua plug-ins desnecessários

Você pode ter vários plugins instalados em seu site. Mesmo quando você não os está usando ativamente, plug-ins desnecessários podem aumentar as solicitações HTTP e tornar suas páginas da web mais lentas.

Para analisar suas solicitações de plugins, procure por “plugins” no relatório GTmetrix Waterfall. Isso exibirá apenas solicitações HTTP originadas de sua pasta wp-content/plugins :

Você verá qual plug-in criou a solicitação passando o mouse sobre um resultado. Para otimizar seu site, percorra a lista em busca de plugins desnecessários. Se uma determinada ferramenta não estiver contribuindo ativamente para o seu site, considere excluí-la.

2. Adiar JavaScript de bloqueio de renderização e/ou atrasar a execução de JavaScript

Se você deseja fazer menos solicitações HTTP e otimizar suas solicitações HTTP, focar no JavaScript é outra ótima tática.

Há duas maneiras principais de otimizar o carregamento do JavaScript do seu site:

1. Adiar JavaScript de bloqueio de renderização
2. Atrasar a execução do JavaScript

Adiar JavaScript de bloqueio de renderização

Adiar o JavaScript de bloqueio de renderização não removerá as solicitações HTTP por si só, mas garantirá que o carregamento do JavaScript do seu site não esteja bloqueando solicitações HTTP mais importantes.

Durante o processo de carregamento, um navegador pode ser executado em um recurso de bloqueio de renderização. Esses arquivos CSS ou JavaScript pausam a renderização até que o recurso seja processado. Se você tiver esses arquivos desnecessários, eles podem aumentar o tempo de exibição do seu conteúdo.

Adicionar atributos deferidos ou assíncronos a esses arquivos informará o navegador para executá-los posteriormente. Com atributos defer, os scripts são baixados durante a análise de HTML e, em seguida, executados. Os atributos assíncronos executarão o script assim que estiverem disponíveis.

Para implementar isso, você pode usar um plug-in específico do recurso, como o plug-in Async JavaScript gratuito.

Ou, muitos plug-ins gerais de desempenho/cache também oferecem esse recurso, incluindo WP Rocket e FlyingPress.

Você também pode configurar isso manualmente no código do seu site, se você se sentir confortável fazendo isso.

Para implementar um atributo defer, basta abrir o arquivo functions.php e encontrar a tag <script> para o recurso. Aqui, insira um atributo defer:

 <script src="resource.js" defer></script>

Aqui está a aparência de um atributo assíncrono:

 <script src="resource.js" async></script>

Geralmente, é melhor usar atributos assíncronos. No entanto, você precisará usar os atributos defer quando o script depender de outro script.

Atrasar a execução do JavaScript

Se você quiser fazer menos solicitações HTTP para o carregamento inicial da página, outra tática popular é atrasar parte/toda a execução do JavaScript do seu site até a interação do usuário.

Quando você configura isso, seu site espera para carregar os arquivos até que um usuário faça alguma interação, como clicar, rolar, etc.

Ao mover essas solicitações HTTP para mais tarde na visita, você pode fazer menos solicitações HTTP para o carregamento inicial e acelerar bastante as métricas focadas na experiência do usuário, como a Maior Pintura de Conteúdo.

Para configurar isso, você pode usar um destes plugins de desempenho:

• foguete WP
• FlyingPress
• Perfmatters

Aqui está a aparência do FlyingPress – você pode atrasar todos os seus scripts, exceto os scripts selecionados, ou apenas atrasar os scripts selecionados:

3. Carregar scripts condicionalmente

Alguns plug-ins carregam scripts desnecessariamente em todo o site. Por exemplo, um plug-in pode lidar apenas com os formulários da sua página de contato , mas adicionar scripts a outra área. Nesse caso, recomendamos carregar condicionalmente os scripts do plug-in.

Para carregar condicionalmente seus plugins, considere instalar uma ferramenta como Perfmatters. Ele vem com um gerenciador de script integrado para desabilitar plug-ins ou scripts individuais em páginas ou postagens específicas:

Para uma opção gratuita, você também pode considerar o plug-in Asset CleanUp.

Carregue condicionalmente seus plug-ins e, em seguida, execute seu site através do GTmetrix novamente. Se você ainda notar um excesso de solicitações HTTP, é hora de continuar com o próximo método.

4. Minimize solicitações de terceiros

À medida que seu site é carregado, o navegador do visitante pode precisar extrair dados de uma plataforma de terceiros, o que requer solicitações HTTP adicionais. Além disso, como você depende de um servidor de terceiros, essas solicitações podem tornar seu site significativamente mais lento.

Aqui estão alguns exemplos de scripts de terceiros:

• Vídeos do YouTube incorporados
• Scripts de rastreamento do Google Analytics
• Fontes do Google
• Anúncios de terceiros

Assim como os recursos de bloqueio de renderização, você pode aplicar atributos assíncronos ou adiados aos scripts de terceiros.

Para serviços como Google Analytics e Google Fonts, você também pode considerar hospedá-los localmente usando plug-ins como estes:

• OMGF – hospede o Google Fonts localmente.
• CAOS – hospede o Google Analytics localmente.

5. Otimize suas imagens

Assim como nos plugins, remover imagens desnecessárias do seu site é importante. Como cada imagem requer sua própria solicitação HTTP, você deve minimizar o número de fotos em seu site.

Então, todas as suas imagens precisam ser otimizadas. Embora isso não diminua o número de solicitações HTTP, reduzirá seu tamanho. Isso pode efetivamente melhorar o tempo de carregamento da página.

Um dos melhores otimizadores de imagem é o Optimole. Este plug-in freemium oferece um conjunto completo de recursos de otimização de imagem, incluindo:

• Servindo imagens adaptáveis ​​que são otimizadas para o dispositivo de cada usuário.
• Comprimindo imagens.
• Redimensionando imagens.
• Convertendo imagens para formatos ideais.
• Servindo imagens por meio de sua rede de distribuição de conteúdo (CDN) integrada.

Conforme você carrega novas imagens, o Optimole irá comprimi-las e redimensioná-las. Portanto, você não terá que se preocupar com arquivos de imagem grandes que exigem recursos excessivos.

6. Implemente o carregamento lento

Também é uma boa ideia implementar o carregamento lento. Isso evita que imagens e vídeos abaixo da dobra sejam carregados até que o visitante role a página para baixo.

Isso move essas solicitações HTTP para mais tarde na visita do usuário, o que permite que você faça menos solicitações HTTP para o carregamento inicial e acelere seu tempo de pintura de maior conteúdo.

O WordPress 5.5 adicionou o carregamento lento integrado para imagens usando o carregamento lento do navegador nativo.

No entanto, nem todos os navegadores suportam o carregamento lento nativo ainda. Além disso, usar um plug-in de carregamento lento dedicado oferece mais controle sobre a funcionalidade de carregamento lento em seu site.

Por exemplo, você pode querer excluir as primeiras imagens do carregamento lento para evitar afetar negativamente seus tempos de maior pintura de conteúdo.

Se você usar o plug-in Optimole da seção anterior, ele também inclui um recurso integrado para carregar lentamente as imagens do seu site de maneira ideal.

Você também pode ajustar ainda mais o comportamento de carregamento lento nas configurações do plug-in.

7. Use uma pilha de fontes do sistema

Você pode usar uma variedade de fontes personalizadas para tornar seu site único. No entanto, cada nova fonte adicionará outra solicitação HTTP à medida que o site for carregado.

Por esse motivo, é melhor limitar o número de fontes personalizadas que você está usando.

Como alternativa, você pode usar uma pilha de fontes do sistema, que usa as fontes nativas do sistema operacional do visitante.

Certos temas, como Neve, GeneratePress ou Astra, permitem reverter para fontes do sistema. No entanto, você também pode alterar sua pilha de fontes com CSS.

8. Combine CSS e JavaScript

Outra maneira de fazer menos solicitações HTTP para arquivos CSS e JavaScript é combinar arquivos CSS e JavaScript separados em uma única folha de estilo ou arquivo.

Com o plug-in Autoptimize, você poderá agregar arquivos do site facilmente em apenas algumas etapas:

Em Configurações > Autoptimize , ative o plug-in para otimizar o código JavaScript e CSS. Em seguida, marque as caixas ao lado de Agregar arquivos JS e Agregar arquivos CSS :

Isso compilará seu CSS em um arquivo e o JavaScript em outro. Em vez de enviar muitas solicitações para vários arquivos, o Autoptimize permite que seu site faça menos solicitações HTTP.

Nota – embora a combinação de CSS e JavaScript seja uma maneira infalível de reduzir as solicitações HTTP, pode não ter nenhum impacto no desempenho do mundo real, dependendo do seu host.

Se o seu host usa HTTP/2 ou posterior (o que a maioria dos hosts faz hoje em dia), pode ser melhor não combinar arquivos porque o HTTP/2 oferece suporte à multiplexação (o que significa que ele pode baixar vários arquivos do servidor sem várias solicitações do servidor).

Se você não tiver certeza se seu host usa HTTP/2, entre em contato com o suporte.

9. Use sprites CSS para combinar imagens

Em um site WordPress típico, cada imagem é um arquivo individual. Se houver várias fotos em uma página, o navegador enviará várias solicitações HTTP. No entanto, um sprite CSS combinará essas imagens em um arquivo.

A CSS Sprites Tool é um software gratuito para criar e customizar sprites CSS. Para começar, solte suas imagens na caixa de upload:

Depois de gerar o sprite CSS, adicione-o à Biblioteca de mídia do WordPress. Em seguida, você pode usar o código HTML e CSS gerado para colocar cada imagem em seu site.

10. Minimize o código do seu site

Minimizar os arquivos do seu site não ajudará você a fazer menos solicitações HTTP, mas ajudará a otimizar as solicitações HTTP inevitáveis ​​para o código HTML, CSS e JavaScript do seu site.

Ao escrever o código, você pode incluir caracteres e espaços em branco para melhorar a legibilidade. Como eles não são necessários para processar uma solicitação, você pode removê-los.

A maneira mais fácil de minificar o código do seu site WordPress é com um plug-in como o plug-in Autoptimize que mencionamos anteriormente.

A maioria dos plug-ins de cache do WordPress também inclui recursos de minificação de código, incluindo WP Rocket, FlyingPress, WP Fastest Cache e muito mais.

Ou, se você estiver usando o CDN do Cloudflare, também pode fazer com que o Cloudflare minifique seu código para você.

Depois de minificar os arquivos do seu site, as solicitações HTTP terão tempos de execução mais rápidos. Com um código mais leve, você acelerará seu site e minimizará solicitações volumosas.

11. Desative os emojis

Por padrão, os emojis do WordPress adicionam uma solicitação HTTP extra ao seu site. Para se livrar de mais uma solicitação HTTP, você pode desativar os emojis do WordPress.

Para a opção mais simples, basta instalar o plug-in leve Disable Emojis.

Como alternativa, você pode adicionar esse código ao arquivo functions.php do seu tema filho ou a um plug-in gerenciador de código como Code Snippets:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Depois de implementar todas essas dicas, você deve ter um site com menos solicitações HTTP!

Faça menos solicitações HTTP em seu site 🎯

Como regra geral, quanto mais solicitações HTTP seu site tiver, mais lento ele carregará. Isso pode afetar negativamente a experiência do usuário (UX) do seu site, fazendo com que os visitantes saiam sem ler seu conteúdo ou comprar um produto.

Para acelerar seu site, você deseja eliminar o máximo possível de solicitações HTTP e otimizar as solicitações HTTP restantes para que carreguem o mais rápido possível.

Com as dicas deste post, você pode realizar os dois trabalhos e criar um site de carregamento rápido para seus visitantes.

👉 No entanto, lembre-se de que otimizar as solicitações HTTP do seu site é apenas uma parte do quebra-cabeça de desempenho. Você também precisará de hospedagem WordPress de qualidade se quiser que seu site carregue rapidamente – confira nosso melhor resumo de hospedagem WordPress para ver as principais opções.

Você tem alguma dúvida sobre como reduzir o número de solicitações HTTP no WordPress? Pergunte-nos na seção de comentários abaixo!