Tutorial WP Rocket para Otimizar a Velocidade do Site

O que é o WP Rocket?

WP Rocket é um plugin que nasceu como solução para as diferentes otimizações de cache no WordPress. Hoje é muito mais, e podemos não apenas otimizar o cache, mas praticamente tudo relacionado à otimização do desempenho de carregamento do site.

Para demonstrar seu impacto, dê uma olhada no desempenho do nosso próprio site COM e SEM WP Rocket:

Por que usar o WP Rocket?

Embora tenhamos dito que existem outras alternativas para otimização de WPO, e cada um seja livre para usar a que considerar adequada, no nosso caso temos uma preferência especial pelo WP Rocket. Sua interface intuitiva que funciona com um clique de checkbox, as múltiplas opções que oferece para configuração de cache e carregamento de recursos, fazem do WP Rocket nosso favorito entre todas as opções.

Menu Principal do WP Rocket

Assumindo que não tivemos problemas para instalar o WP Rocket, vamos começar a explicar sua interface e as diferentes opções disponíveis para otimização. Quando você clica na aba do dashboard, aparece a seguinte tela:

Uma mensagem de boas-vindas e opções que podemos inicialmente deixar em paz, mas que vamos explicar aqui.

Minha Conta

Se você comprou o WP Rocket, a caixa "Visualizar minha conta" levará você à página de usuários do WP Rocket para que, uma vez lá, possa completar e verificar tudo relacionado ao seu perfil de usuário: Dados, faturamento, etc.

RocketCDN

RocketCDN é um serviço de CDN que o WP Rocket vem oferecendo relativamente recentemente. O objetivo é fornecer as ferramentas necessárias para alcançar o melhor desempenho sem ter que procurar soluções fora do plugin. Existem outros serviços de CDN muito populares e igualmente eficazes como Cloudflare ou Amazon CloudFront.

Meu Status

Dentro desta opção temos dois switches para habilitar:

• ›

  Rocket Tester: este é o programa de melhorias do WP Rocket para testar suas versões BETA. Você tem que entrar em contato com eles por e-mail.

• ›

  Rocket Analytics: Você concorda em compartilhar os dados de desempenho do seu WordPress anonimamente com a equipe de desenvolvimento para ajudar a melhorar o WP Rocket.

Há pouco a dizer aqui, esta é uma decisão pessoal que não deve afetar o desempenho.

Configuração de Cache no WP Rocket

É hora de entrar nas opções de configuração e vamos começar com o cache:

Na segunda aba do plugin, podemos ver quais opções de cache ele nos oferece. Vamos lembrar que no WP Rocket estamos otimizando o cache de página e, como veremos agora, também temos uma opção para usuários logados, mas temos que ser cuidadosos com esta opção.

Cache Mobile

Normalmente, quando falamos de mobile também incluímos tablets, mas desta vez estamos falando apenas de dispositivos móveis. O WP Rocket detecta através do user agent que estamos navegando a partir de smartphones.

Sempre vamos habilitar esta opção, já que como regra geral, os designs de desktop e mobile são diferentes, a menos que não tenhamos uma versão responsiva, esta opção sempre estará habilitada. Para deixar claro, por que iríamos querer receber 2 versões em cache se o design fosse o mesmo? Em outras palavras, se não tivéssemos uma versão mobile, não iríamos querer que este cache fosse tratado de forma diferente, certo?

É aqui que se adiciona uma exceção. Quando temos uma versão mobile com recursos ou elementos que só carregam nessa versão, salvaremos arquivos separadamente.

Exemplo:

• ›Temos um anúncio que no mobile carrega um JS que a versão desktop não tem.

Neste caso, salvaríamos sim arquivos separados para mobile.

Cache de Usuário

O cache de usuário é uma opção que o WP Rocket fornece para aqueles usuários que navegam enquanto estão logados.

Ativando esta opção, podemos oferecer uma versão de cache individualizada para cada usuário. O melhor é habilitá-la se os usuários fizerem login, mas você tem que ter especial cuidado com quais páginas são armazenadas em cache e quais não, porque se o usuário inserir dados pessoais (por exemplo, informações bancárias), armazená-los em cache poderia nos causar problemas legais.

Como excluir uma página de ser armazenada em cache?

Se você quer evitar problemas desse tipo, o melhor é ir diretamente à página que você quer excluir e nas opções do WP Rocket (barra lateral ou inferior) selecionar "nunca cachear esta página".

Tempo de Vida do Cache

Nesta seção só precisamos indicar a duração que queremos para os arquivos de cache que são gerados. Ou seja, o WP Rocket gera um arquivo salvando a versão da sua página, e este arquivo será o entregue ao usuário ao acessar o site.

Através de um gerenciador de processos (CRON), os arquivos gerados que excedem a duração indicada serão excluídos e novos serão criados.

Coisas a ter em mente

O WP Rocket já leva em consideração certos processos para excluir e gerar novos arquivos de cache, que são os seguintes:

• ›

  Geração de novas entradas, páginas, categorias, taxonomias ou edições

• ›

  Geração e edição de novos módulos, widgets ou qualquer elemento do site

• ›

  Quando as configurações do WP Rocket que afetam o frontend são alteradas.

Caso contrário, você deve ter em mente que armazenar arquivos de cache ocupa espaço no seu servidor e este espaço é limitado. Também é aconselhável limpar o cache do WP Rocket para que seja atualizado e nenhum arquivo permaneça que não seja mais necessário.

Quanto ao tempo, você pode deixar o valor padrão.

Otimização de Arquivos no WP Rocket

Após passar brevemente pela configuração de cache, é hora de trabalhar na otimização de arquivos. A otimização de arquivos é feita para aliviar o carregamento e a renderização do HTML. Como podemos trabalhar nesta otimização?

De várias maneiras:

• ›

  Reduzindo o peso dos arquivos

• ›

  Removendo arquivos desnecessários, e

• ›

  Executando arquivos progressivamente conforme são necessários.

Arquivos CSS

Os arquivos CSS são responsáveis pela parte visual do site. As folhas de estilo que dão forma, cor e estilo ao nosso WordPress. Neste aspecto, um design atraente pode não ser um design otimizado, porque o designer, ao construir o CSS, pode não ter seguido uma série de regras básicas de otimização.

Entre os problemas mais comuns que costumamos encontrar com folhas de estilo estão:

• ›

  Arquivos CSS pesados

• ›

  Arquivos CSS que carregam em páginas que não usam esses estilos

• ›

  Arquivos CSS mal construídos

• ›

  Carregar muitos CSS externos

• ›

  Usar @import para trazer folhas de estilo externas

Em resumo, há um mundo de práticas que muitas vezes são usadas que não são aconselháveis para a otimização de um bom design, mas vamos ao que o WP Rocket nos oferece.

Minificar arquivos CSS

Esta opção visa reduzir o peso dos arquivos CSS removendo espaços e quebras de linha. O WP Rocket implementa-a ativando o checkbox.

Dica SEO Alive: Sempre que realizarmos uma ação, é uma boa ideia tentar carregar o site para ver se está tudo correto, faça isso no modo anônimo do navegador.

O processo é representado na seguinte imagem retirada da ferramenta minifier.org.

Combinar arquivos CSS

Esta funcionalidade realiza uma espécie de "copiar e colar" do código de um CSS em outro para evitar carregar múltiplos arquivos CSS e ter apenas um.

É aconselhável continuar testando porque depende muito de como o tema foi desenvolvido, porque se eu tenho um arquivo CSS que só carrega em um tipo específico de página, o que eu não quero é que esse código seja carregado em um único arquivo em todas as páginas.

O ideal é carregar o código usado pela URL. Marque a caixa e teste com alguma ferramenta como GTMETRIX para ver se você melhorou a velocidade de carregamento.

O benefício de combinar arquivos CSS é reduzir as solicitações ao servidor.

Otimizar carregamento de CSS

O WP Rocket foi atualizado levando em consideração as recomendações fornecidas por várias ferramentas do Google para otimização da velocidade de carregamento. Se já temos experiência com essas ferramentas, certamente encontramos o aviso "Eliminar recursos que bloqueiam a renderização". Ao ativar este check, evitamos que o CSS bloqueie o carregamento fazendo com que ele carregue de forma assíncrona.

Ou seja, a renderização do HTML não para quando precisa baixar o arquivo CSS; este arquivo carrega em segundo plano, evitando que o processo de carregamento seja interrompido. Então vale a pena habilitar.

Arquivos JS (JavaScript)

JavaScript tem sido um dos grandes problemas que o Google encontrou ao processar HTML. Sem entrar muito profundamente neste tipo de linguagem, o WP Rocket projetou 5 ações básicas para otimizar este tipo de arquivo. Vamos dar uma olhada!

Remover jQuery Migrate

jQuery Migrate é uma biblioteca JavaScript que permite compatibilidade com código jQuery desenvolvido para versões do jQuery anteriores à 1.9. Esta biblioteca vem nativamente no WordPress mas praticamente não tem uso (alguns plugins podem precisar dela).

Com esta ação, queremos evitar uma solicitação desnecessária e o carregamento de um JS que não será usado. Desabilite-a e navegue pelo seu site para ver se tudo está funcionando corretamente!

Minificar Arquivos JavaScript

Assim como o que foi explicado com os arquivos CSS, esta ação seria aplicada aos arquivos JS, reduzindo ligeiramente o tamanho dos arquivos JS.

Combinar arquivos JavaScript

Outra ação semelhante ao módulo de otimização CSS. Lembre-se que quando ativamos esses checkboxes devemos verificar se tudo está funcionando como antes.

Carregar arquivos JavaScript de forma diferida

O check nesta ação faz duas melhorias no desempenho:

• ›

  Adiciona o atributo "defer" ao JS para evitar que a renderização do HTML pare devido ao carregamento de um JS. Com esta ação, ele baixa em paralelo e executa no final do processamento do HTML.

• ›

  Move o JS que bloqueia a renderização inicial.

O WP Rocket nos avisa que este tipo de ativação pode causar problemas, e é por isso que introduz um modo seguro para evitar problemas de carregamento de elementos essenciais para a correta visualização da página.

Atrasar a execução do JavaScript

Outra opção para atrasar a execução do JavaScript que não é essencial até que o usuário interaja com a página. Esta ação não parece muito importante, mas nos permite ganhar tempo para que o carregamento aconteça mais rapidamente. A interação pode ser um clique, scroll, movimento do mouse...

Otimização de Mídia

Nesta aba, abordaremos a otimização de elementos-chave nos primeiros passos da otimização WPO. Estamos falando de imagens, vídeos, iframes e elementos integrados no WordPress cuja funcionalidade é, no mínimo, questionável.

Lazyload

Uma ação essencial em qualquer otimização de velocidade de carregamento. A função Lazyload faz com que elementos como imagens, vídeos e iframes não carreguem até que sejam essenciais para exibição.

Deixe-me dar um exemplo. Conforme rolamos, as imagens carregam. Imagine como seria carregar esta página se 30 imagens carregassem todas de uma vez, especialmente se o usuário nem as estiver visualizando no início.

Emoji

Os navegadores já incluem seus próprios emojis, então podemos economizar essa solicitação que é feita se não ativarmos este check. Minha recomendação é que você o ative.

Conteúdo Incorporado

Impede que outras pessoas incorporem conteúdo do seu site e também impede que você incorpore conteúdo de outros sites não autorizados. As solicitações feitas com este JS são reduzidas.

Compatibilidade WebP

WebP é um formato relativamente novo que o Google introduziu por volta de 2010, para compressão com perdas de gráficos de 24 bits na web, melhorando o fornecimento desses recursos para acelerar seu carregamento.

Atualmente nem todos os navegadores o suportam, então você terá que tomar cuidado e saber qual navegador seus usuários usam ao trabalhar com este formato. Habilite esta opção se você trabalha com imagens WebP.

Configuração de Pré-carregamento de Cache

Precisamos entender bem como os arquivos de cache do WP Rocket são gerados para entender a função Preload.

Quando um usuário visita uma página do nosso site pela primeira vez, é quando a página é cacheada e um arquivo cacheado é gerado que será entregue aos usuários subsequentes. A mesma coisa acontece quando o cache expira (o tempo que determinamos) e a versão cacheada é eliminada, ou quando nós mesmos limpamos o cache de todas as nossas URLs.

Preload Cache

Ao ativar a opção Preload, o que faremos é carregar uma versão previamente cacheada para que mesmo o primeiro usuário tenha uma versão mais rápida do nosso site. Esta ação é realizada através dos links do sitemap, então precisaremos de um sitemap.

O sitemap é um arquivo gerado onde as URLs do nosso site são mostradas. Com plugins como "Rank Math" ou "Yoast" podemos gerá-lo facilmente. Se você quiser ver como criar um sitemap com Rank Math, aqui mostramos.

Preload Links

Esta é uma função que o WP Rocket incorporou em suas últimas versões. O objetivo é antecipar o carregamento das "próximas páginas que o usuário vai visitar". Ao passar o cursor sobre, o pré-carregamento da página acontece caso o usuário clique no link.

O WP Rocket adotou esta função que plugins específicos como "Flying Pages" já implementavam para melhorar a fluidez de navegação dentro do site (experiência do usuário). Dito isto, este não é um fator que melhora o tempo de carregamento, e você não verá a melhoria nas métricas das ferramentas de auditoria WPO.

Pré-carregamento de Solicitações DNS

O pré-carregamento de solicitações DNS é muito útil quando usamos recursos de terceiros como YouTube, Facebook, fontes ou iframes que solicitamos com frequência.

Quando fazemos qualquer conexão na Internet, uma solicitação DNS é feita que deve ser resolvida e enviada ao servidor. Isso tem uma duração que podemos melhorar se adicionarmos as URLs dos recursos necessários nesta caixa que o WP Rocket nos fornece.

Como podemos ver no exemplo, é apenas necessário usar o nome do domínio //youtube.com //facebook.com

A resolução DNS leva aproximadamente 20 a 120 milissegundos, como o GTMETRIX indica, o navegador não baixará nada do host até que este processo seja concluído.

Preload de Fontes

O pré-carregamento de fontes requer uma etapa anterior, que é baixar as fontes e tê-las em nosso servidor. Uma vez lá, podemos fazer a mesma ação que fizemos com o pré-carregamento de cache, fazendo uma versão muito mais rápida do arquivo de fontes e fornecendo-o ao usuário quando ele se conecta à nossa página.

Uma vez que as fontes estão hospedadas, indicaremos ao WP Rocket o caminho exato das fontes utilizadas. É recomendável não abusar de fontes diferentes em nossas páginas porque elas exigem downloads diferentes. Note também que solicitações ao servidor são feitas com as diferentes variações da fonte, deixe-me explicar:

• ›

  Fonte em negrito --> 1 solicitação

• ›

  Fonte sublinhada --> 1 solicitação

• ›

  Fonte em maiúsculas --> 1 solicitação

Configurando as Regras Avançadas do WP Rocket

Nunca cachear estas URLs

Existem certas URLs que, devido à sua singularidade, não queremos uma versão cacheada salva. Desta aba, o WP Rocket nos permite inserir uma lista de URLs que nunca queremos que sejam cacheadas.

Nunca cachear estes cookies

O WP Rocket nos dá outra ferramenta de controle além de fazer isso por URLs. Muitos plugins funcionam com seus próprios cookies ou podemos até instalar os nossos para identificar certos usuários; existem muitas maneiras de usar esses pequenos arquivos.

Com o WP Rocket podemos parar de cachear URLs identificadas pelo ID do cookie, uma vez baixado no navegador do usuário, personalizando ainda mais o tipo de URLs que queremos que sejam cacheadas.

Nunca cachear estes user agents

O user agent é um campo descritivo dentro do protocolo HTTP, usado para fornecer informações sobre o dispositivo que faz uma solicitação. Conhecendo esta informação, podemos impedir que páginas em cache sejam entregues a esses user agents.

Por exemplo, um dos user agents do Google é o Googlebot, então ao indicá-lo nesta parte da web, toda vez que ele acessar nosso site, ofereceremos as páginas sem cache.

Sempre purgar estas URLs

Esta opção é muito interessante para um tipo de URL que, por exemplo, você está interessado em sempre ter seu arquivo de cache excluído quando atualizado.

Por exemplo, tenho URLs com resultados esportivos e o que não quero é entregar uma versão em cache ao usuário, já que os resultados são atualizados com muita frequência.

Cachear estas query strings

Query strings são dados que são enviados ao fazer uma solicitação a uma página da web através da URL.

Geralmente são identificados pelo símbolo de interrogação "?" e como regra geral o WP Rocket não cacheia este tipo de URL. Nesta opção podemos forçá-lo a fazer isso.

Configuração de Banco de Dados com WP Rocket

Como dissemos repetidamente ao longo do artigo, o WP Rocket deixou de ser apenas um plugin de cache para se tornar um plugin para otimizar a velocidade de carregamento do nosso site. Nesta seção de configuração, podemos nos aprofundar na otimização do banco de dados.

À medida que trabalhamos em nosso conteúdo dentro do WordPress, geramos outros tipos de informações que não são úteis e prejudicam o desempenho do nosso site. Para isso, o WP Rocket nos fornece esta ferramenta para fazer uma limpeza mais ou menos completa.

Limpeza de posts

Como podemos ver na imagem, há 3 elementos que podem estar ocupando espaço no banco de dados sem que tenhamos interesse neles. Quando atualizamos conteúdo, uma versão anterior é salva, um auto-rascunho do que estamos editando também é gerado e entradas descartadas.

Se removermos esses elementos, liberaremos espaço no nosso banco de dados.

Limpeza de comentários

Esta parte é importante porque às vezes nosso banco de dados se enche de comentários "spam", e é por isso que o WP Rocket introduziu esta opção para limpar este tipo de elemento.

Limpeza de Transients

Quando estamos trabalhando no WordPress, certos elementos transitórios são gerados que podemos excluir sem problemas, já que serão regenerados.

Limpeza do Banco de Dados

Tanto este ponto quanto o próximo, recomendo fazer um backup do banco de dados porque, embora nada deva acontecer, aprofundar-se em ações dentro do banco de dados sempre tem seus riscos, então não é uma má ideia fazer um backup.

Ativar este check realizará uma limpeza das tabelas do banco de dados. Este processo pode ser automatizado.

Configurando CDN com WP Rocket

Antes de aprofundarmos como configurar CDNs com WP Rocket, quero explicar o que é um CDN e por que é usado.

O que é um CDN?

Um CDN (Content Delivery Network) é um serviço cujo objetivo é melhorar a velocidade de transferência de conteúdo ao usuário. Para fazer isso, ele cria uma rede de distribuição de conteúdo em diferentes servidores ao redor do mundo para encurtar os tempos na solicitação de recursos do usuário. Ou seja, se o usuário está no Brasil, um CDN oferece o conteúdo hospedado em um servidor mais próximo dele do que o servidor real de hospedagem da web.

Imagens retiradas da página do WP Rocket

Como funciona um CDN?

Ele opera através desses outros servidores que armazenam uma cópia em cache do site, e quando o usuário solicita este conteúdo/recursos, um servidor mais próximo realiza a transferência.

Esses tipos de serviços são muito úteis quando você tem conteúdo pesado como imagens, áudios, vídeos e/ou muitas visitas. Se inicialmente você tem um site com poucas visitas, não deve se preocupar com este aspecto.

RocketCDN

O WP Rocket nos oferece a possibilidade de contratar seu CDN ao preço de 7,99 dólares por mês, menos de 7 euros.

CDN

Quando contratamos um CDN, somos fornecidos com informações para usá-lo. Um desses elementos fornecidos é o CNAME, embora se não for fornecido podemos obtê-lo.

O CNAME é um tipo de registro DNS que mapeia um nome de domínio de origem para um nome de domínio de destino

Para usar esta função teremos apenas que indicar esse CNAME e dizer para quais arquivos queremos.

Excluir arquivos do CDN

A próxima opção, como esperado, é excluir aqueles arquivos que não queremos que passem pelo CDN.

Otimização da Função Heartbeat do WordPress

WordPress heartbeat é uma transferência de dados de controle para estabelecer comunicação entre o backend e frontend do WordPress e o servidor. Esse tipo de processo pode ser uma das razões pelas quais você pode experimentar lentidão no seu WordPress.

Entre as ações que podem ser limitadas estão:

• ›

  Auto-save e revisões no editor de posts.

• ›

  Notificações no painel de administração do WordPress.

• ›

  Informações sobre quem está editando.

• ›

  Dados em tempo real.

Se nosso WordPress está funcionando corretamente, não recomendo fazer nada neste ponto, mas se notarmos lentidão, podemos tentar limitar a atividade nas diferentes opções.

Configurando os Add-ons do WP Rocket

Existem certos elementos como os scripts do Google Analytics e do Facebook, que simplesmente ativando-os nesta parte da configuração podemos obter uma versão em cache e melhorar o desempenho. Esta ação responde diretamente a uma das solicitações geralmente indicadas em auditorias de velocidade de carregamento como o Pagespeed "Aproveitar o cache do navegador".

Otimização de Imagens

A otimização de imagens é um processo que devido à sua complexidade poderia ter seu próprio guia. O WP Rocket oferece um plugin independente para trabalhar com esses recursos. A partir do WP Rocket podemos acessar o download de sua versão "Free".

Ferramentas do WP Rocket

As configurações do WP Rocket podem ser salvas e importadas para evitar ter que gastar tempo neste processo novamente. Também nos dá a opção de realizar um "Rollback", ou seja, voltar atrás em termos da versão instalada.

Tutoriais do WP Rocket

Para finalizar este guia do WP Rocket, o próprio plugin fornece uma série de vídeos dando informações sobre as diferentes ações que são realizadas e como executá-las.

Conclusões

Como você viu, WP Rocket é mais que um plugin de cache; temos à nossa disposição uma suite completa para otimizar a velocidade e o desempenho do nosso site, então agora só nos resta experimentar as diferentes opções. O que você está esperando para fazer seu WordPress voar?

Você conhecia o WP Rocket? Conseguiu melhorar seu desempenho com este guia? Tem alguma dúvida? Estamos esperando você nos comentários!