As configurações ideais de otimização automática + Cloudflare / StackPath CDN (2020)

Otimizar automaticamente é um ótimo plugin, mas, para o cache, o WP Rocket geralmente é o número 1 nas pesquisas do Facebook.


Então, por que você usaria?

Porque alguns hosts como Vai Papai e Motor WP coloque na lista negra a maioria dos plug-ins de cache (já que eles têm seu próprio sistema de cache interno), mas não otimizam HTML, CSS, JavaScript, Google Fonts ou CDN (rede de entrega de conteúdo). Portanto, embora o sistema de cache do seu host possa funcionar bem, o Autoptimize ajuda a fazer o resto das coisas (consertando itens no GTmetrix + Pingdom). Evite o Google PageSpeed ​​Insights, pois nem mede os tempos de carregamento.

Até o desenvolvedor do Autoptimize diz em sua página de plug-in que funciona melhor quando combinado com um plug-in de cache. Eu recomendo o Swift se você estiver indo pela rota gratuita e WP Rocket se você puder fazer US $ 49 / ano, pois é mais fácil de configurar (também é o que eu uso e tenho 100% de pontuação no GTmetrix), pois ele vem com muitos recursos que a maioria dos plugins de cache não possui (limpeza do banco de dados, hospedagem local do código do Google Analyitcs localmente, batimentos cardíacos controle e integração com o Cloudflare + outras CDNs). Tenho tutoriais para o WP Rocket, Rápido, Cache mais rápido do WP, W3TC e até super cache do WP.

Então, vamos definir as configurações de Otimização automática. Também mostrarei como adicionar uma CDN (idealmente Cloudflare e StackPath), pois cada um possui seu próprio conjunto de datacenters e mais datacenters = entrega mais rápida de conteúdo. CDNs são recomendados em Guia de otimização do WordPress.

Plug-in de otimização automática

1. JS, CSS, & HTML

Ative tudo isso para otimizar arquivos JavaScript, CSS e HTML, e veja as instruções abaixo.

Otimize automaticamente as configurações HTML de JS CSS

Otimizar código JavaScript

  • Arquivos JS agregados: enable, isso combina arquivos JavaScript conforme recomendado pelo GTmetrix. Se desativado, os arquivos individuais serão carregados e eles não serão combinados.
  • Também agrega JS embutido: enable, isso combina arquivos JavaScript localizados em arquivos HTML. A otimização automática emite um aviso, que basicamente significa que, se quebrar alguma coisa no seu site, exclua os arquivos JavaScript ou desative esta opção..
  • Forçar JavaScript em : desativar, a menos que você tenha erros de JavaScript. É melhor tentar encontrar arquivos problemáticos e excluí-los do que selecionar essa opção, pois isso torna o bloqueio de renderização do JavaScript (não ideal para velocidade).
  • Excluir scripts da otimização automática: se você encontrar erros após ativar determinadas configurações de JavaScript, encontre o JavaScript problemático e exclua os arquivos aqui.
  • Adicionar agrupamento try-catch: desativar, a menos que você tenha erros de JavaScript. Esta é outra maneira de corrigir erros de JS sem precisar ativar o JavaScript forçado na cabeça.

Otimizar código CSS

  • Arquivos CSS agregados: ativar, o mesmo que agregar arquivos JS apenas para CSS.
  • Também agrega CSS embutido: ativar, o mesmo que agregar arquivos JS embutidos apenas para CSS. Ative ambos para melhorar ainda mais o tempo de carregamento + pontuações GTmetrix.
  • Gerar dados: URIs para imagens: desabilite se estiver usando uma CDN. MaxCDN (StackPath) avisa você a ativação dessa opção força a veiculação de imagens a partir da sua origem, em vez da sua CDN. A ativação disso pode resultar inicialmente em menos solicitações HTTP, mas provavelmente não após a configuração de uma CDN e a exibição de imagens por essa.
  • CSS embutido e adiado: enable, você só pode ativar esta opção ou “incorporar todo o CSS”, que a otimização automática não recomenda nas perguntas frequentes. Eles dizem que “embora a inclusão de todo o CSS faça com que o CSS não bloqueie a renderização, isso fará com que a sua página HTML básica fique significativamente maior, exigindo mais“ ida e volta ”.
  • Inline all CSS: desativar, a otimização automática não recomenda ativar.
  • Excluir CSS da otimização automática: se você encontrar erros após ativar determinadas configurações de CSS, encontre os arquivos CSS problemáticos e exclua-os aqui. Nota: a opção “reduzir CSS e JS excluídos” nas Opções diversas precisa ser desativada.

2. Opções da CDN

É aqui que o seu URL da CDN vai (instruções abaixo). O Cloudflare não fornece um URL da CDN (você mudará os servidores de nomes). O URL base da CDN é especificamente para StackPath, KeyCDN e outras CDNs – não para o Cloudflare. Sugiro usar o StackPath + Cloudflare, pois suas CDNs terão mais data centers e mais data centers = site mais rápido.

Passo 1: Inscreva-se em uma CDN. Eu uso o StackPath, que possui mais de 34 datacenters localizados nos Estados Unidos e é onde estão os meus visitantes. São US $ 10 / mês com uma avaliação gratuita de 30 dias.

Centros de dados StackPath

Passo 2: No painel StackPath, clique na guia CDN e criar um site CDN do StackPath.

Tab StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-Server-IP-Address

* Copie o endereço IP do servidor conforme necessário na etapa 5 desta seção.

Otimização automática de URL StackPath-CDN-URL

etapa 3: Cole seu URL da CDN na otimização automática com http: // ou https: // (o que você usar).

Otimize automaticamente o URL da CDN

Passo 4: No StackPath, vá para CDN → Configurações de cache e clique em “Limpar tudo”.

StackPath-Purge-Cache

Etapa 5: Coloque o endereço IP do servidor na lista de permissões no StackPath (WAF → Firewall).

StackPath-Whitelist-IP

Etapa 6: Execute seu site no GTmetrix e a “rede de entrega de conteúdo” deve estar verde no YSlow.

CDN GTmetrix YSlow

3. Configurações diversas

Aqui estão as configurações diversas:

Otimização automática de várias configurações

Salvar script / css agregado como arquivos estáticos – se ativado, isso significa que os arquivos CSS e JS são salvos no cache e servidos por meio do servidor. Portanto, se sua hospedagem não lidar com eles, ative-o.

Minimize arquivos CSS e JS excluídos – se você estiver excluindo determinados arquivos CSS e JavaScript, é porque há um problema ao tentar otimizá-los e não os deseja minimizados.

Otimize também para editores / administradores conectados – desativar, você geralmente deseja desativar os recursos de desempenho no administrador do WordPress, incluindo os recursos de desempenho do Cloudflare.

4. Configurações de Imagens

A otimização automática também pode ajudar a tornar as imagens carregadas mais rapidamente.

Otimize automaticamente as configurações de imagens

Otimizar imagens – Os URLs do seu site serão alterados para apontar para CDN da ShortPixel. Isso não deve afetar a aparência, contanto que seja uma compactação sem perdas, mas eles serão carregados mais rapidamente.

Qualidade de otimização de imagem – encontre seu próprio equilíbrio único entre compactação e qualidade (eu uso o Glossy). Aqui estão as diferenças em cada nível de compactação do ShortPixel:

Níveis de compactação de imagem ShortPixel

  • Com perdas: mais compressão, mais perda de qualidade.
  • Lustroso: compressão média, pouca perda de qualidade.
  • Sem perdas: baixa compressão, menor perda de qualidade.

Carregar WebP em navegadores suportados – ativado se você usar imagens WebP e imagens de carregamento lento.

Imagens de carregamento lento – Pessoalmente, não carrego preguiçosamente minhas imagens, porque carregar imagens constantemente à medida que você rola pela página pode ser irritante para os usuários. Sim, resulta em menos solicitações e é recomendado pelo Google para tempos de carregamento mais rápidos, mas acho isso irritante. Isso depende totalmente de você.

5. CSS crítico

Isso se refere ao Otimização automática do plug-in de inicialização criticalcss.com.

Requer um prêmio plano pago de criticalcss.com (US $ 7 / mês).

O plug-in cria regras críticas de CSS para garantir que as páginas sejam renderizadas antes do carregamento completo do CSS, melhorando o “tempo de início da renderização”. Tudo o que você precisa é instalar o plug-in, inscrever-se em um plano, inserir sua chave crítica da API CSS na seção “Critical CSS” do Autoptimize, e o plug-in fará o resto. Verifique o plugin Página FAQ para obter detalhes sobre configurações personalizadas.

Pessoalmente, não o uso e prefiro US $ 7 / mês extras em um servidor mais poderoso.

Otimize automaticamente criticalcss com inicialização

Otimize automaticamente configurações críticas de CSS

6. Configurações extras

Otimização automática de configurações extras

Fontes do Google – habilite se estiver usando Fontes do Google que diminuem o tempo de carregamento à medida que são extraídos de recursos externos (a biblioteca de fontes do Google). Eu prefiro a opção “combinar e vincular na cabeça”, pois isso melhora o tempo de carregamento sem visibilidade ao ver as fontes serem carregadas (o que geralmente acontece ao carregar de forma assíncrona. Também teste a última opção de fonte do Google “combinar e carregar fontes de forma assíncrona com webfont.js“E veja quais produzem melhores resultados no GTmetrix.

Remover Emojis – enable (emojis são ruins para tempos de carregamento).

Remover seqüências de caracteres de consulta de recursos estáticos – as strings de consulta geralmente são geradas por plugins e não podem ser corrigidas (no GTmetrix / Pingdom) simplesmente ativando isso, mas você pode tentar. A melhor solução é verificar o seu site em busca de plug-ins com alta CPU e substituí-los por plug-ins leves. A maioria dos plug-ins de alta CPU inclui compartilhamento social, galeria, criadores de páginas, postagens relacionadas, estatísticas e plug-ins de bate-papo ao vivo. Você também deve excluir todos os plugins desnecessários e limpar o banco de dados (usando um plug-in como WP-Optimize) para limpar as tabelas deixadas pelos plug-ins desinstalados.

Pré-conectar a domínios de terceiros – ajuda os navegadores a antecipar solicitações de recursos externos (fontes do Google, Google Analytics, Mapas, Gerenciador de tags, loja da Amazon etc.). Geralmente, eles aparecem como “reduzir pesquisas de DNS” no seu relatório GTmetrix, mas abaixo estão exemplos comuns.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Solicitações específicas de pré-carregamento – você pode encontrar mais informações sobre pré-carregamento e dicas de recursos do navegador do WP Rocket, mas isso basicamente faz com que certos arquivos sejam baixados como alta prioridade.

Arquivos Javascript assíncronos – isso significa que algo está impedindo que o conteúdo acima da dobra seja carregado rapidamente. Este tutorial sobre tornar JavaScripts de bloqueio explica bem, mas se você encontrar erros de JavaScript no GTmetrix e Pingdom, o Plug-in JavaScipt assíncrono pode fazer o truque.

Otimizar vídeos do YouTube – se o seu site tiver vídeos, WP YouTube Lyte o preguiçoso os carrega para que eles sejam carregados apenas quando os usuários rolam para baixo e clicam no botão reproduzir, eliminando assim as solicitações iniciais aos servidores do YouTube. Isso pode reduzir vários segundos dos carregamentos no conteúdo dos vídeos, pois eles são um dos elementos mais pesados ​​em uma página. O WP Rocket e o Swift Performance possuem esse recurso incorporado nas configurações, portanto, você não precisa disso se usar um deles como seu plugin de cache.

7. Otimize mais

Se você deseja otimizar ainda mais seu site, aqui estão as ferramentas recomendadas:

WP Rocket – classificou o plug-in de cache nº 1 em várias pesquisas do Facebook e tem muitas opções não incluídas no Autoptimize (limpeza de banco de dados, controle de pulsação, hospedagem do Google Analytics localmente, substituição do iframe do YouTube por uma imagem de visualização, adição de cache do navegador ao pixel do Facebook etc.). O WP Rocket também lida com quase tudo que o Autoptimize faz, então você só precisa de 1 plugin para todas essas otimizações de velocidade. É por isso que é tão bom. Você também pode obter 10% de desconto aqui.

ShortPixel – plugin de otimização de imagem popular e o que eu uso.

StackPath – CDN com mais de 30 data centers. Muito fácil de configurar; basta se inscrever em um plano (US $ 10 / mês) e copiar / colar seu URL da CDN na opção Autoptimize URL da CDN.

SiteGround – geralmente classificado como o host número 1 nas pesquisas do Facebook e também usado por Yoast.

Yoast-no-Twitter-acabamos de mudar para o Siteground

Pesquisa de Hospedagem 2019

2017-WordPress-Hosting-FB-Enquete

Recomendações de hospedagem da Elementor

Recomendação de hospedagem para julho de 2019

Pesquisa-Hospedagem-WordPress-Ago-2018

Pesquisa-Hospedagem Compartilhada-2017

Pesquisa-2019-Hosting

Empresa Go-To-Hosting

Pesquisa-WordPress-Hospedagem-2017

Pesquisa de hospedagem gerenciada

WooCommerce-Hosting-FB-Enquete

Pesquisa de hospedagem na web 2016

Best-WordPress-Hosting-Provider-Poll

Best-Web-Hosting-2019-Pesquisa

Enquete WP Friendly Hosting

2016-WordPress-Hosting-FB-Enquete

Hospedagem Favorita Para Elementor

Recomendações de hospedagem para 2018

Managed-WordPress-Hosting-Poll-2017

2019-Hosts-Enquete-1

Pesquisa de hospedagem para velocidade

WordPress-Hospedagem-Enquete-Junho-1

Recomendação do SiteGround

2014-Managed-WordPress-Hosting-FB-Enquete

Melhor Provedor de Hospedagem na Web

Hospedagem-Enquete-Fev-2019

Hospedagem-Recomendações-Enquete

Bluehost vs SiteGround

Pesquisa de host da WordPress

As pessoas geralmente migram porque seus tecnologia de velocidade é muito mais rápido que EIG ou GoDaddy:

Mudando para SiteGround

Migração do SiteGround Load Time

Bluehost para SiteGround GTmetrix

HostGator para SiteGround

SiteGround Google PageSpeed ​​Insights

100 Pontuação Perfeita No SiteGround

SiteGround Genesis

Velocidade entregue pelo SiteGround

Tempos de carregamento reduzidos com SiteGround

Novos tempos de resposta do SiteGround

Migração de HostGator para SiteGround

Tempos de resposta do SiteGround no Joomla

Comutado para Hospedagem SiteGround

Combo SiteGround Rocket Imagify

SiteGround PageSpeed ​​Insights

SiteGround On Joomla

Tempos de carregamento reduzidos SiteGround

Hospedagem Rápida SiteGround

Novo Tempo de Resposta SiteGround

Melhoria no tempo de resposta do SiteGround

SiteGround também faz migrações gratuitas com GrowBig+.

Cloudways – mais rápido que o SiteGround (hospedagem na nuvem, não compartilhada) e também recebeu uma classificação alta nas pesquisas do Facebook. Começa a US $ 10 / mês com seus Plano DigitalOcean. Eles oferecem uma migração gratuita (na qual eu os aceitei) e aqui está o que aconteceu com o tempo de resposta do meu servidor:

SiteGround-vs-Cloudways-Cloud-Hospedagem

Recomendações de hospedagem no Facebook

VPS Cloud Hosting Pesquisa WooCommerce

Enquete de hospedagem em nuvem VPS

Sugestões de hospedagem WordPress

Tempos de resposta do Cloudways

Motor WP para Cloudways

Sem título

Tempos de carregamento do Cloudways Pingdom

Revisão de Cloudways-Facebook

Você pode obter 25% de desconto em seus primeiros 2 meses de Cloudways com o código promocional OMM25.

Kinsta – Hospedagem premium de US $ 30 / mês e, embora não os tenha experimentado, não ouvi nada além de ótimas coisas sobre velocidade, suporte, tempo de atividade e quase tudo sobre a hospedagem da Kinsta.

Perfmatters – plugin do Kinsta, que cuida do que eu gosto de chamar de “otimizações diversas”, como desativar seletivamente plugins, limitar revisões de post, desativar gravações automáticas, hospedar o Google Analytics localmente e muito mais. Ele cuida dos 10% finais de velocidade.

Alguns deles são recomendados pelo Autoptimize, outros não:

Otimização automática de complementos

8. Cloudflare

A otimização automática não tem configurações para adicionar CDN do Cloudflare, mas isso é fácil de configurar. E você definitivamente deveria, porque isso adiciona Mais 200 centros à sua rede de entrega de conteúdo (CDN).

Centros de dados Cloudflare

Passo 1. Inscreva-se no Cloudflare e você será solicitado a adicionar seu site e iniciar uma verificação.

cloudflare-begin-scan

Passo 2. Após a digitalização, selecione o plano gratuito e o Cloudflare o guiará por um conjunto de páginas. Você será direcionado para uma página na qual o Cloudflare atribui a você 2 servidores de nomes.

Painel Cloudflare-Name-Servers-Dashboard

etapa 3. Entre no registrador de seu domínio (por exemplo, Namecheap) e faça uma pesquisa no Google por “como alterar servidores de nome no Namecheap” (pesquise apenas seu registro de domínio) e siga as instruções. Você estará copiando os 2 servidores de nomes fornecidos pelo Cloudflare e colando-os em uma opção personalizada de servidores de nomes no seu registrador de domínio. Aguarde 72 horas para propagação.

Servidores de nomes Godaddy Cloudflare

É isso aí!

Qual é o próximo?

Assista ao meu vídeo – é um vídeo de 42 minutos, mas eu abro praticamente tudo (registros de data e hora na descrição do vídeo) e você deve aprender muitas informações excelentes sobre a velocidade do site WordPress:

Deseja saber como obtive 100% de pontuação no GTmetrix?
Veja meu guia completo de otimização de velocidade do WordPress, que possui mais de 38 dicas para corrigir itens do GTmetrix / Pingdom, incluindo a atualização para o PHP 7, veicular imagens em escala, especificar dimensões da imagem, limpeza de banco de dados, hospedar o Google Analytics localmente, WP Disable e outros.

perguntas frequentes

&# x1f680; Preciso de outros plugins de velocidade além da Otimização automática?

Sim, geralmente você também deseja usar um plug-in para armazenamento em cache, otimização de imagem, limpeza de banco de dados, controle de pulsação e desativação seletiva de plug-ins. Eu recomendo WP Rocket, ShortPixel e Perfmatters para aqueles.

&# x1f680; Como você configura uma CDN com a otimização automática?

Escolha sua CDN (eu uso o StackPath), copie sua URL da CDN e cole-a no campo CDN UR do Autoptimize.

&# x1f680; Como você otimiza as fontes do Google com a otimização automática?

Eu recomendo usar a opção Combinar e vincular na cabeça e pré-conectar suas fontes usando a Otimização automática.

&# x1f680; A otimização automática cuida do cache?

Não, você precisará usar um plug-in separado para armazenar em cache. Eu recomendo o WP Rocket ou o SG Optimizer se usar o SiteGround.

&# x1f680; Como você define as configurações de otimização automática?

Tudo está listado neste tutorial – fique de olho no relatório do GTmetrix e em quais itens específicos precisam ser corrigidos. Se a definição da otimização automática não for corrigida, considere usar outro plug-in para corrigir itens.

Questões? Me mande uma linha!
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