Como fazer menos solicitações HTTP no WordPress e GTmetrix YSlow

Precisa fazer menos solicitações HTTP no seu site WordPress?


Isso significa apenas que você precisa reduzir quantos elementos (solicitações) são carregados no site.

Faça menos solicitações HTTP

Combinar arquivos CSS e JavaScript pode ajudar, mas existem outras otimizações que podem reduzir solicitações HTTP, como desativar seletivamente plug-ins que não precisam ser carregados em páginas específicas, desativar scripts e estilos WooCommerce em páginas que não são de comércio eletrônico ou evitar alta CPU plugins que geram um grande número de solicitações e tornam o site mais lento.

Fazendo menos solicitações HTTP é uma recomendação no GTmetrix, Pingdom e outras ferramentas de teste de velocidade. As recomendações abaixo ajudarão a reduzir solicitações e tornar seu site mais rápido.

1. Combine folhas de estilo CSS + JavaScript

Combinando folhas de estilo CSS + JavaScript significa que você precisa copiar / colar tudo em seus arquivos CSS em um único arquivo. Isso permite que os navegadores façam uma única solicitação para um arquivo CSS em vez de várias solicitações. A maioria dos plugins de cache tem uma opção para combinar seus arquivos CSS + JavaScript.

Passo 1: Nas configurações do plug-in de cache, encontre a opção de combinar e reduzir CSS + JavaScript.

Passo 2: Habilite cada configuração uma de cada vez e teste os resultados no GTmetrix.

Minify Combine arquivos CSS

Minify Combine arquivos JavaScript

etapa 3: Verifique se há erros visíveis no seu site. Se você encontrar erros, visualize o código-fonte, encontre os arquivos problemáticos e exclua-os das configurações de minificação CSS ou JavaScript. Por exemplo, se o seu controle deslizante desaparecer ao ativar uma determinada configuração, verifique seus arquivos no código-fonte e exclua o arquivo problemático. Se você não encontrar erros, não há necessidade disso.

Como alternativa, você pode combinar manualmente seus arquivos CSS no WordPress em Aparência > Editor de temas. Basta copiar e colar o conteúdo de todos os arquivos em um único arquivo CSS.

Arquivos CSS do WordPress

2. Desativar seletivamente plugins

Muitos plug-ins são executados em todo o site, mesmo em páginas onde eles não são necessários.

Formulários de contato, compartilhamento social, rich snippet, slider e alguns outros plugins precisam ser carregados apenas em determinados tipos de conteúdo. Você pode desativá-los em qualquer outro lugar usando Limpeza de ativos.

Ao desativar plug-ins em páginas nas quais eles não precisam ser carregados, isso resulta em menos solicitações de HTTP. Isso não se limita a plugins; scripts e estilos também podem ser desativados em determinadas páginas (por exemplo, scripts, estilos e fragmentos de carrinho do WooCommerce podem ser desativados em páginas que não são de comércio eletrônico).

Passo 1: Instale o Asset CleanUp ou Perfmatters (ambos permitem desativar seletivamente plug-ins).

Passo 2: Edite uma página ou publicação, role para baixo até a seção Asset CleanUp e revise quais arquivos CSS + JavaScript estão carregando na página. Podem ser de plugins, temas ou scripts externos.

Desativar scripts externos do WordPress

etapa 3: Desative todos os plugins e solicitações que você não precisa nessa página. Você pode desativá-los em uma única página, em todo o site, por tipo de postagem ou usar o RegEx (expressões regulares) para desativá-los em padrões de URL específicos. RegEx está incluído apenas no Perfmatters ou no Asset CleanUp Pro.

3. Desative scripts, estilos e fragmentos de carrinho do WooCommerce

Sites WooCommerce naturalmente geram mais solicitações HTTP.

Normalmente, eles não apenas exigem mais plugins, como também carregam scripts extras do WooCommerce, estilos, e fragmentos de carrinho. Assim como você pode desativar seletivamente os plug-ins na etapa anterior, também pode desativar seletivamente o carregamento de solicitações do WooCommerce em todo o site.

Usando o Asset CleanUp ou Perfmatters, desative-os nas páginas em que eles não precisam carregar:

Limpeza de ativos WooCommerce

Como alternativa, o Perfmatters permite desativá-los com um clique:

otimização woocommerce perfmatters

4. Evite plug-ins de alta CPU

Plugins com CPU alta podem gerar uma tonelada de solicitações HTTP.

Geralmente, são plug-ins de compartilhamento social, estatística (análise), sliders, portfólios, criadores de páginas, calendários, bate-papo e formulário de contato. Basicamente, evite qualquer plug-in que extraia solicitações externas de sites externos, execute processos em andamento ou demore muito para carregar.

Passo 1: Verifique se há plugins lentos no GTmetrix Waterfall ou Monitor de consulta.

Plugin-WordPress-lento

Passo 2: Evite plugins conhecidos de alta CPU.

  1. Adicione isso
  2. Monitoramento de fraude de cliques do AdSense
  3. Calendário de Eventos Multifuncional
  4. Backup Buddy
  5. Beaver Builder
  6. Sitemaps XML do Google melhores para WordPress
  7. Verificador de link quebrado (use o Dr. Link Check)
  8. Contato constante para WordPress
  9. Formulário de contato 7
  10. Veja todos os 65 plugins lentos

etapa 3: Substitua plug-ins lentos por plug-ins mais rápidos e leves. Pesquisa e testes são necessários.

5. Substitua os plugins pelo código

Você pode evitar muitos plugins substituindo-os pelo código.

Exemplos:

  • Google Fonts: hospede suas fontes localmente
  • Código de rastreamento do Google Analytics: insira manualmente
  • Sumário: projete-o manualmente em HTML + CSS
  • Tweets incorporados ou Google Maps: faça uma captura de tela
  • Widget incorporado do Facebook: substitua pelo widget real do Facebook

Consolidando plug-ins também ajuda. Um exemplo clássico é o uso do WP Rocket, que inclui hospedagem de fontes, análises e Facebook Pixel localmente, carregamento lento de imagens e vídeos, limpeza de banco de dados, pré-carregamento, controle de pulsação e integração de Cloudflare e várias CDNs. Com outros plugins de cache (como a maioria deles não possui esses recursos), você precisará instalar de 6 a 7 plugins extras para obter essas otimizações de velocidade, quando integradas ao WP Rocket.

6. Eliminar scripts externos

Scripts externos são tudo o que atrai solicitações de sites externos.

As fontes do Google podem ser combinadas em um arquivo. Os vídeos podem ser carregados com preguiça e o iframe é substituído por uma imagem de visualização. Muitos scripts podem ser otimizados, outros não. Abaixo estão alguns exemplos.

  • Fontes do Google: combine fontes e hospede-as localmente usando plug-ins como WP Rocket, Otimização automática, OMGF, fontes auto-hospedadas do Google e Asset CleanUp.
  • Google Analytics: hospede o código de rastreamento localmente no WP Rocket / CAOS Analytics.
  • Anúncios do Google: carregue de forma assíncrona e tente o Cloudflare Rocket Loader.
  • Google Maps: tire uma foto do Google Map e inclua um link para instruções de direção quando as pessoas clicam na imagem (isso parece tão bom quanto um mapa)!
  • Gerenciador de tags do Google: geralmente faz mais mal do que bem ao tentar combinar vários scripts. Só deve ser usado para sites grandes e não otimizados.
  • Vídeos incorporados: use o WP Rocket ou o WP YouTube Lyte para carregar vídeos preguiçosamente e substitua o iframe por uma imagem de visualização (os vídeos são um elemento muito pesado).
  • Widgets incorporados + postagens: faça capturas de tela em vez de incorporá-las.
  • Facebook Pixel: WP Rocket pode adicionar cache do navegador ao Facebook Pixel.
  • Gravatars: nada funcionou para mim além de desativar os Gravatars (o WP Rocket também não os usa no blog). Mas você pode tentar Harrys, FV ou o Cache Gravatar ideal ou tentar quebrar ou ocultar comentários expansíveis.
  • Plug-ins de compartilhamento social: gere infame solicitações do Facebook, Twitter e redes sociais para atualizar as contagens. Experimente um plugin mais rápido como Social Pug, Mashsharer, Snap socialAddToAny, WP Social Sharing, ou Partilha Social Fácil

7. Combine fontes do Google

As fontes do Google podem ser combinadas para gerar uma solicitação em vez de várias solicitações.

Google-Fonts-GTmetrix

Os seguintes plugins têm opções para otimizar o Google Fonts:

  • WP Rocket
  • Limpeza de ativos
  • Otimizar automaticamente
  • OMGF

O melhor método, no entanto, é hospedar fontes do Google localmente. Isso envolve o download de suas fontes diretamente do site Google Fonts, além de ser mínimo com o número de fontes e o peso das fontes. Em seguida, use uma ferramenta como Transfonter ou converter as fontes em arquivos de fonte da web. Você fará o upload dos novos arquivos de fonte da web para a pasta wp-content / uploads, adicionará a fonte personalizada ao CSS e testará a fonte para garantir que esteja funcionando. Mais uma vez, consulte esse link para obter um tutorial completo.

Transfonter-Google-Font-Conversion

7. Minimize HTML, CSS, JavaScript

A redução de arquivos geralmente é feita pelo seu plug-in de cache (consulte a etapa 1).

Mas, às vezes, isso pode danificar seu site. Nesse caso, você precisaria testar cada configuração uma por uma, verificar se há arquivos problemáticos no código-fonte e excluir esses arquivos da minificação usando o plug-in de cache. Se você não encontrar erros visíveis, não precisará fazer isso.

8. Otimize a entrega de CSS

Isso deve corrigir o recursos de bloqueio de renderização item no PageSpeed ​​Insights.

WP Rocket, Autoptimize e outros plugins semelhantes devem ter uma opção para otimizar a entrega de CSS. Simplesmente entre nas suas configurações e verifique se a opção está ativada..

Otimizar entrega de CSS

9. Adiar / carregar arquivos JavaScript combinados de forma assíncrona

JavaScript assíncrono significa que os arquivos são carregados depois de a página terminou de baixar.

Isso pode ser feito usando o WP Rocket ou JavaScript assíncrono e deve corrigir o remover item Javascript de bloqueio de renderização. O JavaScript assíncrono fornece controle total de quais scripts adicionar um atributo ‘assíncrono’ ou ‘adiar’, enquanto o WP Rocket adia o JavaScript automaticamente com 1 clique.

Arquivos JavaScript

10. Vídeos de carregamento lento

Vídeos incorporados são recursos externos que geram solicitações HTTP.

Eles podem levar mais de 2 segundos para carregar! Embora você não possa eliminá-los completamente, você pode atrasar o carregamento de vídeos até que os usuários rolem para baixo (carregamento lento) e clique no botão reproduzir (incorporação de luz).

Você tem algumas opções aqui: você pode usar o WP Rocket para ativar o carregamento lento e substituir o iframe do YouTube pela imagem de visualização. Mas se você não possui o WP Rocket, pode tentar o WP YouTube Lyte plugin ou siga isto tutorial sobre incorporações leves do YouTube. Ambos funcionam bem.

Aqui está um exemplo (e um ótimo vídeo no WordPress Speed):

11. Adicione um CDN

CDNs podem ajudar a fazer menos solicitações HTTP.

Em vez de fazer com que o servidor de origem responda a uma solicitação, os datacenters da CDN descarregam a largura de banda enquanto diminuem a carga no servidor de origem. Cloudflare é gratuito, por isso é um acéfalo.

Várias CDNs = mais data centers = entrega de conteúdo mais rápida e mais descarregamento de recursos. Muitas pessoas começam com o Cloudflare e, eventualmente, procuram no StackPath ao usar várias CDNs (atualmente uso as duas). KeyCDN também é bom. Isso é chamado de “cadeia” de CDNs.

Configurando várias CDNs
Com o Cloudflare, eles atribuem a você dois nomes de nomes que você altera no seu registro de domínio. Com outras CDNs, como StackPath e KeyCDN, elas atribuem a você uma URL da CDN que você colará no campo URL da CDN no plug-in de cache (a maioria delas possui) ou usa o CDN Enabler.

Várias CDNs

12. Minimize redirecionamentos

Redirecionamentos desnecessários podem causar solicitações HTTP extras.

Você precisará examinar seu relatório do GTmetrix para ver o que está causando esse erro. Ele está sendo gerado por um script ou plugin externo no seu site? Você já tentou otimizar esse script ou procura um plugin mais leve? É porque você alterou a versão do seu domínio para não WWW ou HTTPS, mas não atualizou todos os links / imagens do seu site para refletir a nova versão?

Minimizar erros de redirecionamento

Causas comuns

  • Plugins incorretos
  • Scripts externos
  • Alterado para WWW x Não WWW, mas não possui links atualizados
  • Alterado para HTTPS vs não HTTPS, mas não possui links atualizados

13. Otimizar imagens

Para reduzir solicitações HTTP causadas por imagens, existem três maneiras principais de otimizar imagens:

Servir imagens em escala: redimensione imagens grandes para que sejam menores. O GTmetrix informa quais imagens são muito grandes e as dimensões corretas para as quais elas devem ser cortadas / redimensionadas. Tente criar uma folha de dicas sobre a dimensão da imagem medindo as dimensões dos seus controles deslizantes, imagens de blog de largura total, widgets e outras áreas do seu site. Depois, redimensione as imagens para as dimensões corretas antes de fazer o upload. Se você fizer isso, nunca deverá exibir erros de imagem em escala.

Otimizar imagens (compactação sem perdas): use um plug-in como ShortPixel (recomendado), Smush ou Imagify para compactar imagens. Embora esses plugins digam sem perdas, às vezes você pode notar uma pequena perda de qualidade. É por isso que é melhor fazer backup de suas imagens e testar algumas antes de otimizar em massa todas as imagens no seu site, para garantir que você esteja satisfeito com a qualidade.

Especificar dimensões da imagem: adicione uma largura + altura ao HTML ou CSS da imagem. Isso é feito automaticamente no Editor Visual, mas não no HTML personalizado, em alguns construtores de páginas e possivelmente em outras áreas do seu site WordPress. O GTmetrix mostra quais imagens têm essas erros e fornece as dimensões corretas. Para corrigir o erro, você precisará localizar a imagem no painel do WordPress, editar o HTML ou CSS e adicionar largura + altura.

Ainda é necessário fazer menos solicitações HTTP?

Se você ainda precisar de ajuda, deixe-me um comentário. o WordPress acelera o grupo no Facebook também é útil, ou você pode contratar-nos para serviços de velocidade do WordPress com antes + depois dos relatórios do GTmetrix.

WordPress acelera o grupo no Facebook

perguntas frequentes

&# x1f680; O que causa solicitações HTTP?

Solicitações HTTP são tudo o que cria uma solicitação para o servidor (por exemplo, uma única imagem cria 1 solicitação). A guia Cachoeira do GTmetrix informa todos os pedidos que são carregados em uma página.

&# x1f680; Quais são 5 coisas que você pode reduzir para solicitações HTTP?

Cinco coisas fáceis que você pode fazer são combinar arquivos CSS + JavaScript, carregar preguiçosamente imagens e vídeos, evitar nossa lista de plug-ins com alta CPU, desativar seletivamente plug-ins de determinadas páginas / posts com Perfmatters ou Asset CleanUp e otimizar suas fontes.

&# x1f680; Um plug-in de cache ajudará a reduzir solicitações HTTP?

Sim, um bom plug-in de cache deve ajudar a reduzir e combinar arquivos, além de reduzir solicitações de HTTP quando configuradas corretamente. Tenho tutoriais para quase todos os plugins de cache.

&# x1f680; A correção de outros itens do GTmetrix reduzirá as solicitações HTTP?

Sim, em muitos casos, ele irá especialmente reduzir e combinar arquivos, eliminar erros de redirecionamento e usar uma CDN também pode ajudar.

&# x1f680; Qual plug-in de cache reduz mais as solicitações HTTP e como configurá-lo?

Eu recomendo o WP Rocket, que foi classificado como o número 1 na maioria das pesquisas do Facebook e possui mais recursos de otimização de velocidade do que a maioria dos plugins de cache, e é por isso que geralmente produz melhores pontuações e tempos de carregamento no GTmetrix. Confira meu tutorial sobre como definir as configurações do WP Rocket.

Obrigado pela leitura :)

Felicidades,
Tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map