Instruções e dicas para configurar o plugin WP Rocket , que pode acelerar visivelmente o seu site WordPress.
Obsah
O que é uma cache
Cache é uma palavra usada com tanta frequência ultimamente que até minha avó está falando lentamente sobre isso. Cache é o nome para temporário ou cache do computador e do servidor.
Em vez de toda a página da Web ter que ser recarregada (baixada tão efetivamente do servidor), certas partes que não mudam são carregadas dessa memória.
Assim, há uma diminuição do fluxo de dados entre o cliente e o servidor, o que está associado a uma menor quantidade de dados transferidos e, principalmente, a uma maior velocidade de carregamento das páginas.
Cache do lado do servidor
Cada servidor médio tem seu próprio sistema de cache. O servidor geralmente lembra imagens salvas, arquivos CSS e JS que são comuns a toda a página.
Ao invés de sempre enviar o logotipo salvo para o cliente, ele apenas envia a informação de que o cliente já possui o logotipo salvo e, portanto, pode utilizá-lo.
Isso se aplica à maioria das imagens na página. Você pode ter enfrentado o problema de ainda ver a imagem antiga mesmo depois de substituí-la por uma nova. Então o cache é o culpado.
Durante o desenvolvimento do site, é claro, precisamos desabilitar o cache, pois precisamos ver as alterações feitas imediatamente. Isso pode ser feito no lado do servidor, no painel de controle da sua hospedagem.
Cache do lado da página
Também podemos definir o cache no lado do WordPress. Embora seja chamado de cache, na realidade é apenas otimização dos códigos usados e outros arquivos.
Podemos usar vários plugins para esta finalidade. Alguns deles são gratuitos e geralmente cobrem apenas funcionalidades básicas. Muitos têm versões pagas ou são pagos desde o início.
Neste artigo, vamos nos concentrar no plugin WP Rocket, que é pago, mas posso definitivamente classificá-lo entre os melhores plugins de otimização de velocidade com a consciência tranquila.
Como obter o WP Rocket? qual é o preço dele?
Obtemos WP Rocket exclusivamente de seu site oficial . Em termos de preço, temos três planos para escolher – SINGLE por $ 49 por ano, vamos usá-lo para um site. Usaremos o plano $99 PLUS para três sites e o plano INFINITE de $249/ano para um número infinito de sites (ótimo para desenvolvedores que fazem muitos sites).
Após preencher as informações de cobrança e pagamento, receberemos um arquivo .zip para download, que contém nosso plugin e licença. Nós carregamos o plugin para o nosso site via wp-admin (Plugins-> add new-> upload plugin). Após a instalação bem-sucedida, não se esqueça de ativar o plugin.
Instruções para configurar o plugin WP Rocket
Na prática, já me deparei várias vezes que uma pessoa instalou um plugin de cache e não notou nenhuma alteração. É claro. TER um plugin de cache é bom, mas é como ter uma carteira de motorista (mas não dirigir). Para melhorar o desempenho e otimizar a velocidade, precisaremos configurar o WP Rocket.
As configurações do WP Rocket podem ser acessadas no wp-admin através da coluna principal esquerda na seção Configurações –> WP Rocket . Nós clicamos. Será mostrado um quadro de avisos e muitas opções diferentes, à primeira vista assustadoras. Vamos passar por eles um por um.
Painel
Quadro de avisos. Informações básicas sobre sua conta, licenças, etc. são exibidas aqui. Temos a opção de ativar o “Rocket Analytics” aqui, o que significa que alguns dados serão enviados para o WP Rocket HQ. Isso pode ajudar os desenvolvedores de plugins.
Cache
Configurações básicas para cache.
Podemos ativar/desativar o cache móvel , recomendo deixá-lo ativado. Também podemos separar os arquivos de cache separadamente para PCs grandes e separadamente para celulares. Eu pessoalmente nunca faço isso porque não vejo razão para isso.
Habilitar cache para usuários logados do WordPress ativa o cache para usuários logados. Desnecessário para páginas mais simples e de apresentação, mas se você tiver uma página onde os usuários fazem login (por exemplo, e-shop), essa função pode ser útil. Basicamente, o usuário logado não usa o cache (supõe-se que o usuário logado seja um administrador do site, que deve ver a página sem cache para poder verificar as alterações imediatamente). Ao marcar esta caixa, o cache também será usado por usuários logados.
Cache Lifespan – aqui definimos o período de tempo após o qual o cache deve ser limpo automaticamente. Depois de clicar em “Minutos” basta selecionar a hora e o dia. Eu sempre deixo o valor padrão definido, mas é claro que depende de você. Portanto, se você fizer uma alteração, ela não começará a aparecer imediatamente, você precisará “limpar” manualmente o cache, ou seja, redefini-lo. Se você esquecer, ele será redefinido automaticamente após o tempo especificado aqui.
O cache pode ser limpo manualmente através do painel Admin (a faixa preta na parte superior), encontre o item WP Rocket nele e clique em Limpar cache para liberar todo o cache. Isso começará a mostrar as alterações em todos os lugares, mesmo para usuários não logados.
Otimização de arquivo
Provavelmente a parte mais interessante. Aqui definimos como o WP Rocket deve processar os arquivos que compõem o site.
Configurações básicas
Minimizar HTML – minimiza o código-fonte HTML da página removendo quebras de linha ou espaços desnecessários. Pouco eficaz, mas praticamente não há nada de errado aqui. Eu sempre ligo.
Otimize o Google Fonts – definitivamente deixe isso ativado, isso melhorará o carregamento do Google Fonts, que você quase certamente usa.
Nota: Nas versões mais recentes do WP Rocket, as configurações básicas não estão mais disponíveis (não são mais relevantes).
Arquivos CSS
CSS é a linguagem com a qual, em termos simples, a aparência da página é definida. Em um universo ideal, cada página contém um único arquivo .css onde todo o material visual é configurado. Mas isso certamente não é verdade no WordPress. Como o WordPress é uma plataforma complexa e consiste em temas e plugins, quase todos os plugins têm seus próprios arquivos CSS (e raramente apenas um). Como resultado, você carrega várias dezenas de arquivos CSS toda vez que a página é carregada.
Minimizar arquivos CSS – minimiza arquivos .css removendo recuos e espaços. Semelhante à minificação HTML. Como existem mais arquivos CSS, essa configuração é quase obrigatória.
Combinar arquivos CSS – o que essa configuração fará é passar por todos os arquivos .css que a página usa e criar um arquivo grande (apenas um). Então vamos nos aproximar do estado do universo ideal – você carrega apenas um arquivo .css, embora um maior. É definitivamente necessário habilitar esta opção.
Otimizar a entrega de CSS – eu ativo essa configuração também. Isso fará com que o CSS seja carregado “de forma assíncrona”, ou seja, independentemente do restante do conteúdo da página da web.
Claro que, para não ficar tão fácil, configurar a combinação de arquivos CSS pode causar erros visuais na página (os chamados bugs). Nesse caso, é necessário descobrir o que está causando o problema e incluir o arquivo .css específico em “Arquivos CSS Excluídos”.
Arquivos Javascript
Como no caso do CSS, também podemos otimizar arquivos Javascript.
Minify e Combine se comportam da mesma maneira que CSS
Remover jQuery Migrate – jQuery Migrate é uma função auxiliar do jQuery que alerta sobre incompatibilidades entre versões do jQuery e plugins ou temas de terceiros. Desde o WordPress 5.5, ele não é mais usado, então você pode desativá-lo.
Carregar JavaScript adiado – basicamente fará o mesmo que Otimizar entrega de CSS – o javascript será carregado independentemente do restante dos arquivos na página.
Nota: Se você usa o protocolo http2, não há necessidade de combinar arquivos CSS ou JS.
A mídia
Nesta seção vamos configurar imagens, vídeos e outros conteúdos multimídia.
Carga preguiçosa
Lazy Load é uma funcionalidade que retarda o carregamento desnecessário de imagens que não são imediatamente visíveis na página. Isso causará um aumento significativo de velocidade, pois as imagens só começarão a carregar quando você chegar perto de sua localização. Entro em www.wp.sk e na parte inferior do rodapé está o logotipo wp.sk, que na verdade é uma imagem.
O carregamento lento fará com que a página seja carregada sem esta imagem. Somente quando nos aproximamos do rodapé girando a roda do mouse, a imagem é carregada em segundo plano e exibida. Até então, não é necessário. Sem carregamento lento, a página inteira é carregada logo no início.
Habilitar para imagens – habilita o carregamento lento para imagens.
Habilite para iframes/vídeos – habilita o carregamento lento para vídeos e iframes. Iframe é frequentemente usado, por exemplo. no caso de um feed do Facebook ou ao inserir um vídeo do YouTube ou conteúdo de outro site.
Substituir iframe do YouTube por imagem de visualização – substitui um vídeo descarregado por uma imagem de visualização (por exemplo, se rolarmos rapidamente para o local onde o vídeo deveria estar e ele não teve tempo de carregar em segundo plano).
Emoji
Os emojis são uma parte bastante inútil do WordPress, mas podem encontrar sua aplicação em alguns blogs. Na verdade, são smileys (emoticons) que o WordPress converte automaticamente em forma gráfica. Se você não precisar dele, poderá desativá-los facilmente.
Incorporações
Desativar incorporações do WordPress – impede que outras pessoas “puxem” parte do seu site para sites externos. Eu recomendo deixá-lo ligado.
Compatibilidade WebP
Define o cache para imagens WebP. WebP é um formato de imagem relativamente novo projetado principalmente para exibição na Internet. A imagem é menor em tamanho, mas comparável em qualidade ao jpg. Cada jpg e png pode ser convertido para WebP, através de algum conversor, e carregado na página. No entanto, se você não estiver usando o WebP, não é necessário habilitar essa configuração.
Pré-carregar
Como mencionei acima, o WP Rocket funciona no estilo de criar arquivos personalizados (principalmente .css e .js) que são usados na operação ao vivo do site, em vez dos originais. Pré-carregamento é a função que aciona essa geração de arquivo. O mesmo vale para a regeneração de arquivos já criados se houver uma alteração na página (por exemplo, adicionar um novo artigo etc.).
Aqui eu recomendo deixar “Ativar pré-carregamento” ativado, bem como “Ativar pré-carregamento de cache baseado em mapa do site”, “Mapa do site Yoast SEO XML” (se você usar o plug-in Yoast SEO) e também “Ativar pré-carregamento de link”. Isso é suficiente para 99% dos sites.
Regras avançadas
Aqui vamos definir regras avançadas para o WP Rocket. Por exemplo, podemos especificar subpáginas, arquivos, etc. aqui. que nunca deve ser armazenado em cache. Podemos definir uma exceção ao armazenar cookies em cache ou com base no navegador usado.
Dentro do WP Rocket, é possível usar o chamado curingas, ou seja, o curinga asterisco *. Se precisarmos, por exemplo para remover todo o plugin do cache, digamos Contact form 7, não faz sentido listar 10 arquivos .css um embaixo do outro, que estão localizados na pasta contact-form-7. Em vez disso, usaremos um curinga, algo assim:
Wp-content/plugins/contact-form-7/* que garante que toda a pasta (e, portanto, todo o plugin) permaneça sem cache.
Base de dados
Nesta seção, podemos acelerar o site bem em alguns casos, mas isso cobra seu preço. Aqui podemos realizar o chamado limpar o banco de dados de dados aparentemente desnecessários. O WP Rocket recomenda fazer um backup do banco de dados antes de executar essas operações de banco de dados.
Aqui podemos excluir revisões, rascunhos automáticos, postagens da lixeira, comentários não aprovados, transientes, otimizar tabelas e definir a limpeza automática.
Ao criar cada subpágina ou artigo no WordPress, quantas revisões são salvas quantas vezes clicamos no botão ATUALIZAR. Para sites grandes que contêm principalmente artigos, isso pode ser um grande problema, considerando que pode haver vários milhões de revisões. Ao excluir essas revisões, facilitaremos muito a vida do banco de dados, mas perderemos a possibilidade de retornar às versões anteriores do artigo ou subpágina.
CDN
CDN significa Rede de Entrega de Conteúdo. Você está usando e pode nem saber. No nível de código de uma página da Web, existem várias bibliotecas que geralmente são usadas para criar uma página da Web.
Um exemplo típico pode ser as fontes jQuery ou Google. A vantagem é que o visitante do seu site provavelmente já terá o jQuery baixado de outra página em seu PC, então seu navegador não precisa puxar o arquivo jQuery novamente do servidor, mas sim do cache dele, ao renderizar a página.
Isso afetará a velocidade do site. No entanto, na realidade, são apenas alguns arquivos de kilobytes, que não terão um impacto extremo na velocidade quando se trata de um site clássico.
Batimento cardiaco
Heartbeat é uma funcionalidade interna do wordpress. Isso é algum tipo de “impulso” regular, com base no qual solicitações ajax são enviadas ao servidor em intervalos regulares (uma vez por minuto).
Ele é usado para notificações que são exibidas no ambiente do administrador, para salvamento automático de artigos e subpáginas, para bloqueio de conteúdo quando editado por outro usuário (aparece a tabela proverbial “Usuário #nome edita este artigo”).
Eu, pessoalmente, nunca tive problemas com isso, nem nunca lidei com isso. Você pode, teoricamente, desligar o Heartbeat aqui, mas eu certamente não recomendo, pois interfere na funcionalidade interna do WordPress, sem falar nos plugins usados, que podem se tornar inutilizáveis. Portanto, limitar essa configuração é relevante apenas para alguns plugins fracos.
Complementos
Opção para instalar outros plugins que funcionam com o WP Rocket e garantem velocidade ainda melhor.
Otimização de imagem
Você deve pensar em otimização de imagem já ao criar um site, ou ao fazer upload de conteúdo. A decência manda não colocar uma imagem maior que 300kB na página. O tamanho FullHD (ou seja, 1920×1080) é totalmente suficiente para a maioria dos sites. Eu definitivamente não recomendo o upload de imagens SLR gigantes (por exemplo, 6000×4000) para a web.
Embora o WordPress ainda os corte para o tamanho 4K, o tamanho dos dados da imagem é mais importante do que as dimensões. Existem realmente apenas algumas exceções quando é necessário usar uma imagem de dados grandes.
Para tais imagens, no entanto, sempre usamos sua miniatura e a imagem completa apenas ao clicar nela (por exemplo, abrindo-a no Lightbox). De qualquer forma, o WP Rocket não inclui a opção de otimização de imagem, mas funciona muito bem com o plugin Imagify .
Outro plugin conhecido para otimizar imagens é o EWWWW Image Optimizer (recomendo desinstalá-lo após o uso).
Ferramentas
Ferramentas de plug-in. Importe, exporte, reverta para uma versão mais antiga. Coisas que sabemos.
Tutoriais
E, finalmente, na seção Tutoriais do plugin WP Rocket , você encontrará tutoriais em vídeo para uso em inglês.
Dica final: confira este tutorial sobre como acelerar seu site WordPress .
Was this article helpful for you? Support me by sharing, please. 👍
