Como reduzir solicitações HTTP / S no WordPress

Aqui está uma história que você vai adorar se quiser acelerar seu site WordPress.


Outro dia, construí um site brilhante. Fiz tudo ao máximo e adicionei o WooCommerce, o Gerenciador de tags do Google, o OneSignal, o helpdesk, o Yoast, o rádio ao vivo (ah, sim, sim), o Aviso sobre cookies, as mídias sociais e vários outros plugins.

Assim como você, eu estava decidido a impressionar meus visitantes, ou assim eu pensei. Mas então as coisas ficaram insuportavelmente lentas. Depois de muita angústia, eu acendi GTMetrix para liberar o problema.

Para minha consternação, vi o seguinte:

resultados do teste de velocidade gtmetrix

Fiquei impressionado? Inferno para o NAW! Eu queria obter um A perfeito e reduzir o tempo de carregamento da página para menos de dois segundos.

Então, eu apertei o botão de re-teste, mas adivinhe? Ainda é o mesmo resultado doentio. Fiquei chocado, até com raiva. Mas não desisto facilmente porque esse tipo de coisa é inaceitável.

Você sabe o que eu fiz a seguir? Eu testei o site em Pingdom porque o GTMetrix pode sugá-lo. Mas, abaixo estão os resultados sombrios, mais uma vez:

ferramentas pingdom acelerar os resultados dos testes

Eu estava exasperado. O proverbial espinho na minha carne foram os pedidos HTTP errantes, visto que eu poderia corrigir muitos dos outros problemas rapidamente.

Para piorar a situação, eu estava usando um tema WordPress de comércio eletrônico que carregava um bilhão elementos para construir a página inicial. Em minha defesa, parecia incrível. Alguns usuários concordaram que o design também estava certo; então, sim, eu não caí no truque sozinho “

Mas um excelente design visual e velocidades lentas não andam de mãos dadas. Eu precisava de uma solução e rápido.

Como reduzir solicitações de HTTP no meu site WordPress?

Sempre que você visita um site WordPress, muitos dados são movidos entre o navegador e os servidores do site. Em outras palavras, o WordPress faz solicitações HTTP para vários servidores para criar o que os usuários veem quando carregam seu site.

Se o seu site WordPress exigir muitos elementos para carregar, você terá mais solicitações HTTP e vice-versa. Mais solicitações de HTTP significam um site lento, má experiência do usuário (UX), pontuações ruins de SEO e baixas taxas de conversão.

Os sites WordPress geralmente são dinâmicos, o que significa que são necessárias muitas partes diferentes para renderizar seu site em um navegador. A boa notícia é que você pode reduzir solicitações HTTP e acelerar seu site significativamente.

E na postagem de hoje, você aprende exatamente como!

Os relatórios do GTMetrix e Pingdom geralmente mostram onde está o problema. Como tal, teste seu site usando as duas ferramentas para descobrir as áreas que você deve melhorar. Com seus relatórios prontos, veja como reduzir solicitações HTTP / S e acelerar seu site WordPress.

Etapa 1: Declutter

Pessoal, se você tem muitas coisas no site do WordPress, terá muitas solicitações HTTP. É um acéfalo. A primeira etapa para reduzir solicitações HTTP é a organização.

Com isso, quero dizer me livrar de todos os plugins que você não precisa. Os plugins do WordPress vêm com muitos arquivos, seja PHP, CSS ou JavaScript (JS). Todo arquivo acionado por cada plug-in criará uma solicitação HTTP.

Se você possui vários plugins, definitivamente terá mais solicitações HTTP. Quanto menos plugins, menos solicitações. É bem simples.

O que fazer?

Faça uma auditoria nos seus plugins. Quais plugins você deve ter para executar seu site? Existem plugins que você não precisa? Você tem plugins que acessam servidores de terceiros? Você pode fazer sem esses plugins?

Para reduzir solicitações de HTTP, desinstale todos os plugins que você não precisa. Se você precisar de um plugin ocasionalmente, instale-o somente quando precisar. Depois, desinstale o plugin.

O mesmo vale para temas e conteúdo do WordPress que você não usa. Limpe tudo isso. Remova tudo o que você não precisa; é bom para a velocidade e segurança do seu site.

Você pode ir além e carregar plugins seletivamente. Por exemplo, se você precisar carregar apenas o Formulário de contato 7 na sua página de contato, poderá impedir que outros plug-ins sejam carregados nessa página específica.

Isso seria incrível, você não concorda? E pensar que você só precisa do Plugin de WordPress de ativos CleanUp.

WP Asset CleanUp plugin do WordPress

O plugin é fácil de usar e bastante eficiente. Ou, como o desenvolvedor coloca:

O “Asset CleanUp” varre sua página e detecta todos os ativos carregados. Tudo o que você precisa fazer ao editar uma página / postagem é apenas selecionar o CSS / JS que não é necessário carregar, reduzindo assim o inchaço.

Limpe sua instalação já hombre; Livre-se do spam de comentários indesejados incluído. Ah, sim, elimine links quebrados e otimize seu banco de dados enquanto estiver nele. Essas são áreas importantes a serem consideradas no que diz respeito ao aumento da velocidade do site, mas discordo.

Vamos voltar a reduzir solicitações HTTP.

Etapa 2: otimizar imagens

Um site sem imagens é, bem, monótono. Dizem que uma imagem fala mais que mil palavras, e isso é legal. Mas toda imagem é responsável por uma solicitação HTTP. Para adicionar sal à lesão, as imagens são as principais dentre os elementos que demoram a carregar.

Ainda assim, não podemos ignorar o fato de que a maioria dos temas do WordPress (sites de leitura) se baseia em imagens e muitas imagens nesse sentido. Portanto, à luz disso, como você pode reduzir as solicitações HTTP otimizando suas imagens?

Para iniciantes, livre-se de todas as imagens que não usa. Seja implacável; se livrar de todo esse inchaço – você não precisa disso. Depois disso, comprima e otimize imagens para remover dados de arquivos desnecessários.

WP Compress Plugin

Informações e DownloadVer a demonstração

Embora haja vários plugins para você escolher, realmente gostamos do WP Compress. Embora seja um serviço premium, a poderosa otimização automática de imagens, compactação sem perdas, processamento em nuvem para reduzir a carga do servidor, suporte a imagens WebP, redimensionamento automático e muito mais fazem o investimento valer a pena (confira nossa análise para saber mais). Além disso, você pode obter 100 imagens de graça – para pelo menos tentar.

A otimização de imagens não reduz suas solicitações HTTP por si só, mas reduz o tamanho dos arquivos de imagem, o que se traduz em melhores velocidades de página ao longo da linha.

Como alternativa, para reduzir solicitações de HTTP, aproveite o poder de Sprites de imagem CSS. Para os não iniciados, um sprite é uma coleção de imagens colocadas em um único arquivo de imagem.

Em seguida, usando truques CSS, você pode escolher qual parte da imagem será exibida. Mas como isso reduz as solicitações HTTP? Aqui está uma analogia.

Digamos que você precise de cinco imagens na sua página inicial. Para carregar seu site, sua instalação do WordPress fará cinco viagens ao servidor para obter as imagens. Agora, se você colocar todas as cinco imagens em um único arquivo de imagem (sprite), sua instalação do WordPress fará apenas uma viagem.

Você vê para onde estou indo com isso? Quanto menos viagens, menor o pedido de HTTP. A melhor parte é que você não precisa se preocupar em criar e implementar sprites de imagem CSS. Você pode usar uma ferramenta como CSS Sprite Generator. É fácil implementar sprites de imagem CSS, desde que você saiba o que fazer em CSS.

Dica profissional: Você pode esquecer tudo sobre sprites de imagem CSS, se o seu site usa HTTP / 2 que suporta carregamento assíncrono de imagens e scripts. O GTMetrix não leva em consideração o HTTP / 2 ao avaliar o desempenho, portanto, não se preocupe se parece que suas imagens estão criando uma tonelada de solicitações HTTP.

Mas eu digo: Se os sprites de imagem CSS puderem reduzir significativamente as solicitações de HTTP em seu site, e você souber como implementá-las, faça isso e retire esses segundos extras do tempo de carregamento da página. Se você tem ou não HTTP / 2.

Afinal, um único arquivo de imagem requer uma única solicitação HTTP. Dez imagens separadas precisam de 10 solicitações HTTP e assim por diante. Eu sei que você entendeu.

Etapa 3: combinar e minimizar HTML, CSS e JavaScript

A principal causa de muitos pedidos de HTTP no meu site WordPress foram arquivos CSS e JavaScript externos. Sim, eu estava lutando com 43 scripts JS e 22 arquivos CSS. São 66 solicitações HTTP impressionantes.

Das cerca de 130 solicitações HTTP, as solicitações externas de CSS e JavaScript foram responsáveis ​​por 51% do problema! Isso é ridículo. Obrigado, GTMetrix, bata meu punho.

Se eu combinar e minificar esses 44 arquivos JS e 22 CSS, posso reduzir significativamente minhas solicitações HTTP, o tamanho do site e o tempo necessário para carregar. Mas o que é esse negócio de “combinação” e “minificação”??

De acordo com Raelene Morey de Words by Birds (eu sou um grande fã ��), a minificação é o processo de “… remover caracteres desnecessários, como comentários, formatação, espaço em branco e novas linhas de arquivos HTML, CSS e JavaScript que não são necessários para o código para executar. “

A redução reduz o tamanho do arquivo, eliminando todos os outros caracteres para deixar apenas o código. Mas se você tiver mais de 66 scripts externos, a minificação não fará muito para minimizar solicitações de HTTP. Para isso, você precisa combinar seus arquivos CSS e JavaScript.

Mais uma vez, Raelene diz:

Enquanto isso, a combinação de arquivos é como parece. Por exemplo, se sua página da web carregar 5 arquivos CSS externos e 5 arquivos JavaScript externos, a combinação de CSS e JavaScript em um único arquivo separado resultaria em apenas 2 solicitações em vez de 10.

Você entendeu? Eu espero que sim. A combinação de arquivos reduz as solicitações HTTP. Minificação, por outro lado, reduz o tamanho do arquivo. Combine os dois e você mata dois coelhos com a mesma pedra.

Existem plugins? Sim, claro!

WP Rocket WordPress Plugin de cache

Informações e DownloadVer a demonstração

Existem vários plugins do WordPress para combinar e reduzir seus arquivos. Um bom exemplo é o plugin WP Rocket. É basicamente um dos melhores plugins de cache, oferecendo recursos para combinar e reduzir arquivos em apenas alguns cliques.

Outro popular (e livre) é a opção Otimizar automaticamente plugar.

A propósito, enquanto isso, reduza o número de arquivos CSS externos e scripts JS? Por exemplo, e não mencionamos nomes aqui, você realmente precisa de uma plataforma de comentários de terceiros? Você precisa de um plug-in de rádio ao vivo?

Não importa o que eu digo, elimine todos os scripts e arquivos externos que você não precisa.

Etapa 4: Ajustar arquivos CSS e JavaScript de bloqueio de renderização

Em alguns casos, a combinação de arquivos pode não ser uma opção, especialmente para arquivos e scripts de terceiros que são alterados com frequência. Nesses casos, você pode adiar o carregamento desses ativos. O HTTP / 2 suporta carregamento assíncrono de arquivos, o que significa que todos os arquivos são carregados simultaneamente.

Se não houver carregamento assíncrono por algum motivo (talvez você não esteja usando HTTP / 2 ou os scripts não sejam assíncronos), esses arquivos podem tornar o site significativamente mais lento.

Lembre-se de que suas páginas da Web são carregadas de cima para baixo. Se você possui CSS e JS de bloqueio de renderização na parte superior da sua página, o navegador para de carregar até que os arquivos tenham sido totalmente carregados. Dessa forma, os usuários verão uma página em branco até o carregamento dos scripts, o que leva tempo.

Quão? Mova todos os scripts de bloqueio de renderização da parte superior para a inferior da sua página da web. Mas tenha cuidado aqui; você não precisa mover todos os scripts para o final. Digo isso, já que sua página pode precisar de CSS e JS para oferecer uma experiência completamente envolvente.

Se você adiar alguns arquivos CSS ou JavaScript, seus usuários poderão ver uma versão distorcida da sua página da web até que a página seja carregada completamente, o que é precisamente o oposto do que você deseja obter.

Portanto, adie apenas os scripts que não são necessários para o carregamento da página. Dessa forma, seus usuários não esperam idades para carregar sua página. Por quê? Porque você precisará de menos solicitações HTTP para entregar sua mensagem.

Não reduz as solicitações HTTP por si só (porque todos os scripts e arquivos serão carregados eventualmente), mas reduz o número de solicitações HTTP necessárias para renderizar sua página.

É muito parecido com o carregamento lento de imagens; a imagem é carregada apenas quando está na janela de visualização, não quando o restante (e as partes mais importantes) da página está carregando.

A propósito, a correção de CSS e JS de bloqueio de renderização pode revelar arquivos e scripts que você não precisa criar uma página da web.

Por exemplo, se algum script JS de compartilhamento social externo estiver demorando muito para carregar, você poderá adiá-lo. Além disso, você pode eliminá-lo e incorporar o compartilhamento social ao seu tema.

Você eliminará solicitações HTTP e acelerará seu site, mantendo a mesma funcionalidade. Entendo que os recursos de codificação do seu tema são uma tarefa difícil para a maioria dos iniciantes, portanto, verifique com um usuário ou desenvolvedor avançado do WP.

Como alternativa, você pode usar o plug-in WP Rocket para corrigir scripts de bloqueio de renderização, mas tenha cuidado. Leia a documentação deles, porque se você estragar tudo, pode quebrar seu site facilmente.

Existem opções gratuitas? Claro! Estamos trabalhando com o WordPress, lembra? Você pode usar o JavaScript assíncrono, entre outros plugins.

Etapa 5: usar cache e CDN

Você sabia que o cache e as CDNs podem reduzir suas solicitações HTTP? Não parece um fato a princípio, mas quando você considera o que acontece nos bastidores, pode usar o cache e a CDN para sua vantagem..

O armazenamento em cache envolve o armazenamento de arquivos estáticos em um navegador para que os usuários não baixem os arquivos nas visitas subseqüentes. Digamos que você tenha um plug-in de cache e o usuário faça o download do conteúdo em cache na primeira visita.

Nas visitas subseqüentes, seu site não fará solicitações ao servidor. Em vez disso, ele servirá os recursos em cache do navegador, reduzindo solicitações de HTTP e aumentando a velocidade do seu site.

Uma CDN (ou Content Dentrega Network) é uma rede de servidores localizados em todo o mundo. Uma CDN também usa armazenamento em cache, mas, para velocidades ainda mais rápidas, o provedor de CDN atende às suas necessidades. em cache conteúdo de um servidor mais próximo do visitante.

Distâncias mais curtas significam entrega mais rápida de conteúdo e cache significa que seu site não precisa baixar o mesmo conteúdo do servidor central novamente. Isso faz sentido para você?

Cloudflare CDN Plugin

E o melhor de tudo: há várias opções gratuitas de CDN (ou pelo menos avaliações gratuitas para que você possa literalmente ver a diferença que isso faz). No WPExplorer, usamos e recomendamos o CLoudflare, mas escolha o CDN que considerar melhor para você.

Bônus: verifique se o HTTP / 2 é suportado

Você pode estar fazendo tudo para reduzir as solicitações HTTP, mas seu host pode ser a causa de seus problemas. Não se surpreenda; perguntando e pensando, quem – nessa época e idade – usa qualquer coisa, menos HTTP / 2?

Você provavelmente nem sabe o que HTTP / 2 é tudo sobre. Bem, para iniciantes, o HTTP / 2 suporta o carregamento assíncrono de arquivos, entre outras coisas. Tem outros benefícios sobre o HTTP 1.0, mas isso é uma lição para outro dia.

Se você usa HTTP 1.0 ou inferior, notará um número considerável de solicitações HTTP.

Não seja rápido em julgar; Vi fornecedores de hospedagem na web que ainda usam HTTP 1.0 e versões mais antigas do PHP. Sim, mesmo com os benefícios aparentes do HTTP / 2 e PHP 7. Eu nem estou blefando; alguns de seus clientes me procuram quando alguns de seus plugins não funcionam, e isso é irritante!

Mas realmente, por que? O fato de alguns provedores de hospedagem não serem incomodados pelo fato de o PHP 5.6 estar obsoleto e ter vulnerabilidades de segurança é outra coisa. E se eles não suportam HTTP / 2, isso é um diferencial para o seu.

Teste KeyCDN HTTP / 2

Entre em contato com seu host ou use Ferramenta do KeyCDN para verificar se o seu servidor suporta HTTP / 2. O melhor host da web suporta HTTP / 2 e a versão mais recente do PHP. Se o seu host estiver atrasado nos dois casos, peça a ele para atualizar ou escolher um host melhor.

Palavras Finais

Reduzir as solicitações de HTTP no seu site WordPress tem tudo a ver com eliminar coisas que você não precisa. Se você tem muitas coisas no seu site WordPress, terá muitas solicitações HTTP e velocidades de página relativamente lentas.

Para reduzir solicitações de HTTP, organize o site de forma organizada, otimize imagens, corrija scripts de bloqueio de renderização, use o cache e verifique se o host suporta HTTP / 2. Fora isso, tente criar sites simples e limpos que não exijam uma tonelada de recursos para carregar.

Se você tiver dúvidas, informe-nos na seção de comentários abaixo. Felicidades para sites mais rápidos e um grande futuro pela frente!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me