Aqui está uma história que você vai adorar se quiser acelerar seu site WordPress .
No outro dia eu construí um site brilhante. Fiz tudo e adicionei WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, rádio ao vivo (ah, sim, eu fiz), Cookie Notice, mídia social e vários outros plugins.
Assim como você, eu estava empenhado em impressionar meus visitantes, ou assim pensei. Mas então as coisas ficaram insuportavelmente lentas. Depois de muita angústia, acionei o GTMetrix para resolver o problema.
Para meu espanto, vi isso:
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 adivinhem? Ainda o mesmo resultado doentio. Fiquei chocado, até com raiva. Mas eu não desisto facilmente porque esse tipo de coisa é inaceitável.
Você sabe o que eu fiz em seguida? Eu testei o site no Pingdom porque o GTMetrix pode sugá-lo. Mas, abaixo estão os resultados sombrios, mais uma vez:
Eu estava exasperado. O espinho proverbial na minha carne foram as solicitações HTTP errôneas, 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 de elementos para construir a página inicial. Em minha defesa, parecia incrível. Alguns usuários concordaram que o design estava no ponto também, então yay, eu não caí no truque sozinho
Mas um ótimo design visual e velocidades lentas não andam de mãos dadas. Eu precisava de uma solução e rápido.
Como posso reduzir solicitações HTTP no meu site WordPress?
Toda vez que você visita um site WordPress, muitos dados se movem entre seu 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 requer muitos elementos para carregar, você terá mais solicitações HTTP e vice-versa. Mais solicitações HTTP significam um site lento, experiência do usuário ruim (UX), pontuações ruins de SEO e baixas taxas de conversão.
Os sites do 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 as solicitações HTTP e acelerar significativamente seu site.
E no post de hoje, você aprende exatamente como!
Os relatórios do GTMetrix e do 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.
Passo 1: Destruir
Pessoal, se você tem muita coisa no seu site WordPress, vai ter muitas requisições HTTP. É um acéfalo. O primeiro passo para reduzir as solicitações HTTP é organizar.
Com isso, quero dizer se 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). Cada arquivo que cada plugin dispara criará uma solicitação HTTP.
Se você tiver muitos plugins, com certeza terá mais solicitações HTTP. Quanto menos plugins, menos solicitações. É simples.
O que fazer?
Realize uma auditoria de 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 as solicitações HTTP, desinstale todos os plugins desnecessários. Se você precisar de um plug-in ocasionalmente, instale-o apenas quando precisar. Depois, desinstale o plugin.
O mesmo vale para temas e conteúdos do WordPress que você não usa. Limpe todas essas coisas. 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ê só precisa do Contact Form 7 para carregar em sua página de contato, você pode impedir que outros plugins sejam carregados nessa página específica.
Isso seria incrível, você não concorda? E pensar que você só precisa do plugin Asset CleanUp WordPress .
INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO
O plugin é fácil de usar e bastante eficiente. Ou como o desenvolvedor coloca:
“Asset CleanUp” varre sua página e detecta todos os ativos que são carregados. Tudo o que você precisa fazer ao editar uma página/post é apenas selecionar os CSS/JS que não são necessários para carregar, reduzindo assim o inchaço.
Limpe sua instalação já hombre; livre-se do lixo – spam de comentários incluído. Ah, sim, elimine links quebrados e otimize seu banco de dados também. Essas são áreas importantes a serem consideradas no que diz respeito ao aumento da velocidade do seu site, mas eu discordo.
Vamos voltar à redução de 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 cada imagem é responsável por uma solicitação HTTP. Para adicionar sal à lesão, as imagens estão no topo entre os elementos que demoram para carregar.
Ainda assim, não podemos ignorar o fato de que a maioria dos temas do WordPress (leia sites) dependem de imagens e muitas imagens para esse assunto. Então, à luz disso, como você pode reduzir as solicitações HTTP otimizando suas imagens?
Para começar, livre-se de todas as imagens que você não usa. Seja implacável; livre-se de todo esse inchaço – você não precisa disso. Depois disso, comprima e otimize as imagens para remover dados de arquivos desnecessários.
INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO
Embora existam vários plugins para escolher, nós 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 se declarar com 100 imagens de graça – para que você possa pelo menos tentar.
A otimização de imagens não reduz suas solicitações HTTP em si, mas reduz o tamanho de seus arquivos de imagem, o que se traduz em melhores velocidades de página no futuro.
Como alternativa, para reduzir as solicitações HTTP, aproveite o poder dos 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 de CSS, você pode escolher qual parte da imagem mostrar. Mas como isso reduz as solicitações HTTP? Aqui está uma analogia.
Digamos que você precise de cinco imagens em 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ê onde eu estou indo com isso? Quanto menos viagens, menores as solicitações HTTP. A melhor parte é que você não precisa suar para criar e implementar sprites de imagem CSS. Você pode usar uma ferramenta como CSS Sprite Generator . Implementar sprites de imagem CSS é fácil, desde que você conheça o CSS.
Dica profissional : Você pode esquecer tudo sobre sprites de imagem CSS se 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, então não se preocupe se parecer que suas imagens estão criando uma tonelada de solicitações HTTP.
Mas eu digo: se sprites de imagem CSS podem reduzir significativamente as solicitações HTTP em seu site, e você sabe como implementar o mesmo, vá em frente e tire 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ê entende a deriva.
Etapa 3: combinar e reduzir HTML, CSS e JavaScript
A principal causa de muitas solicitações 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.
De cerca de 130 solicitações HTTP, solicitações externas de CSS e JavaScript foram responsáveis
Se eu combinar e minimizar esses 44 arquivos JS e 22 CSS, posso reduzir significativamente minhas solicitações HTTP, o tamanho do site e o tempo que leva para carregar. Mas o que é esse negócio de “combinar” e “minificar”?
De acordo com Raelene Morey do Words by Birds (sou uma grande fã ), minificação é o processo de “… remover quaisquer 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 t necessário para que o código seja executado.”
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 as solicitações HTTP. Para isso, você precisa combinar seus arquivos CSS e JavaScript.
Mais uma vez, Raelene diz:
A combinação de arquivos, entretanto, é exatamente como parece. Por exemplo, se sua página da Web carregar 5 arquivos CSS externos e 5 arquivos JavaScript externos, combinar seu CSS e JavaScript em um único arquivo separado resultaria em apenas 2 solicitações em vez de 10.
Você entendeu? Eu com certeza espero que sim. A combinação de arquivos reduz as solicitações HTTP. A minificação, por outro lado, reduz o tamanho do arquivo. Combine os dois e você matará dois coelhos com a mesma pedra.
Existem plug-ins? Sim claro!
INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO
Há uma tonelada de plugins do WordPress para combinar e reduzir seus arquivos. Um bom exemplo é o plugin WP Rocket. É basicamente um dos melhores plugins de cache que oferece recursos para combinar e reduzir arquivos em apenas alguns cliques.
Outra opção popular (e gratuita ) é o plugin Autoptimize .
A propósito, enquanto isso, reduza o número de arquivos CSS externos e scripts JS? Por exemplo, e não estamos mencionando nomes aqui, você realmente precisa de uma plataforma de comentários de terceiros? Você precisa de um plugin de rádio ao vivo?
Não importa o que eu diga, 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, combinar arquivos pode não ser uma opção, especialmente para arquivos e scripts de terceiros que mudam com frequência. Nesses casos, você pode adiar o carregamento de tais ativos. HTTP/2 suporta carregamento assíncrono de arquivos, o que significa que todos os arquivos são carregados simultaneamente.
Se você não tiver um carregamento assíncrono em andamento por algum motivo (talvez você não esteja usando HTTP/2 ou os scripts não sejam assíncronos), esses arquivos podem tornar seu site significativamente lento.
Lembre-se de que suas páginas da Web são carregadas de cima para baixo. Se você tiver CSS e JS de bloqueio de renderização na parte superior da sua página, o navegador parará de carregar até que os arquivos tenham sido totalmente carregados. Assim, os usuários verão uma página em branco até que os scripts sejam carregados, o que leva tempo.
Quão? Mova todos os scripts de bloqueio de renderização da parte superior para a parte inferior da sua página da web. Mas tenha cuidado aqui; você não precisa mover todos os scripts para o final. Digo isso porque sua página pode precisar de CSS e JS para oferecer uma experiência totalmente envolvente.
Se você adiar alguns arquivos CSS ou JavaScript, seus usuários poderão ver uma versão distorcida de sua página da Web até que a página seja totalmente carregada, o que é exatamente o oposto do que você deseja alcançar.
Portanto, adie apenas scripts que não sejam necessários para o carregamento da página. Dessa forma, seus usuários não esperarão muito para que sua página seja carregada. Por quê? Porque você precisará de menos solicitações HTTP para entregar sua mensagem.
Ele não reduz as solicitações HTTP em si (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 só é carregada quando está na janela de visualização, não quando o resto (e as partes mais importantes) da página está carregando.
A propósito, corrigir CSS e JS de bloqueio de renderização pode revelar arquivos e scripts que você não precisa para criar uma página da web.
Por exemplo, se algum script JS de compartilhamento social externo estiver demorando para carregar, você poderá adiá-lo. Além disso, você pode eliminá-lo e criar compartilhamento social em seu tema.
Você eliminará solicitações HTTP e acelerará seu site, mantendo a mesma funcionalidade. Entendo que codificar recursos em seu tema é 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 plugin WP Rocket para corrigir scripts de bloqueio de renderização, mas tenha cuidado. Leia a documentação deles, porque se você bagunçar as coisas, poderá quebrar seu site facilmente.
Existem opções gratuitas? Claro! Estamos trabalhando com WordPress, lembra? Você pode usar o JavaScript Async , entre outros plugins.
Etapa 5: usar cache e CDN
Você sabia que o cache e as CDNs podem reduzir suas solicitações HTTP? A princípio, não parece um fato, mas quando você considera o que acontece nos bastidores, pode usar o cache e a CDN a seu favor.
O armazenamento em cache envolve o armazenamento de arquivos estáticos em um navegador para que os usuários não baixem os arquivos em visitas subsequentes. Digamos que você tenha um plug-in de cache e o usuário baixe seu conteúdo em cache na primeira visita.
Nas visitas subsequentes, seu site não fará solicitações ao servidor. Em vez disso, ele servirá os recursos em cache do navegador, reduzindo as solicitações HTTP e aumentando a velocidade do seu site.
Uma CDN (ou Rede de Entrega de Conteúdo ) é uma rede de servidores espalhados pelo mundo. Uma CDN também usa cache, mas para velocidades ainda mais rápidas, o provedor de CDN atende seu conteúdo em cache de um servidor mais próximo do visitante.
Distâncias mais curtas significam entrega de conteúdo mais rápida, e o armazenamento em cache significa que seu site não precisa baixar o mesmo conteúdo do servidor central novamente. Isso faz sentido para você?
INFORMAÇÕES E DOWNLOADVEJA A DEMONSTRAÇÃO
E o melhor de tudo, há várias opções de CDN gratuitas (ou pelo menos testes gratuitos para que você possa literalmente ver a diferença que faz). No WPExplorer, usamos e recomendamos o CLoudflare, mas escolha o CDN que você achar que funciona melhor para você.
Bônus: Certifique-se de que o HTTP/2 seja 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 – nesta época e idade – usa qualquer coisa além de HTTP/2?
Você provavelmente nem sabe do que se trata o HTTP/2 . Bem, para começar, o HTTP/2 suporta o carregamento assíncrono de arquivos, entre outras coisas. Ele tem outros benefícios em relação ao HTTP 1.0, mas isso é uma lição para outro dia.
Se você usar HTTP 1.0 ou inferior, notará um número considerável de solicitações HTTP.
Não seja rápido em julgar; Eu vi provedores de hospedagem na web que ainda usam HTTP 1.0 e versões mais antigas do PHP. Sim, mesmo com os aparentes benefícios 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 quê? O fato de alguns provedores de hospedagem na web não se incomodarem com o fato de o PHP 5.6 estar obsoleto e ter vulnerabilidades de segurança é apenas outra coisa. E se eles não suportam HTTP/2, isso é um fator decisivo para você.
Entre em contato com seu host ou use a ferramenta do KeyCDN para verificar se 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 em ambos os casos, peça a eles para atualizar ou escolher um host melhor.
Palavras finais
Reduzir solicitações HTTP em seu site WordPress significa eliminar coisas que você não precisa. Se você tiver muitas coisas em seu site WordPress, terá muitas solicitações HTTP e velocidades de página relativamente lentas.
Para reduzir solicitações HTTP, organize seu site, otimize imagens, corrija scripts de bloqueio de renderização, use cache e garanta que seu host suporte HTTP/2. Fora isso, esforce-se para criar sites simples e limpos que não exijam uma tonelada de ativos para carregar.
Se você tiver dúvidas, por favor, deixe-nos saber na seção de comentários abaixo. Um brinde a sites mais rápidos e um grande futuro pela frente!
