Acelerar e otimizar o WordPress e o WooCommerce passo a passo

A velocidade de um site influencia as suas vendas e o seu posicionamento na Google. O WordPress e o WooCommerce costumam ficar lentos por configurações erradas, excesso de plugins ou temas pesados. Neste guia vamos do mais básico ao mais avançado, com as definições concretas que recomendamos.

Aplique as alterações uma a uma e, depois de cada uma, reveja o site (menus, formulários, carrinho e pagamento). Assim saberá o que melhorou e o que estragou algo, se acontecer.

Para medir o antes e o depois, use o PageSpeed Insights sempre com as mesmas páginas: página inicial, um artigo ou categoria e, em lojas, uma ficha de produto.

WordPress e plugins atualizados

Mantenha o WordPress, o tema e todos os plugins atualizados. Além da segurança, cada versão traz melhorias de desempenho.

Quanto mais tempo passa sem atualizar, mais provável é que o salto dê problemas. Atualizar todas as semanas ou todos os meses, pouco a pouco, mantém a instalação saudável. Se uma atualização falhar, tem as nossas cópias de segurança diárias para voltar atrás e pode pedir-nos ajuda para o resolver. Numa loja, tenha em conta que restaurar a base de dados apaga as encomendas posteriores à cópia.

Versão de PHP e OPcache

Cada nova versão de PHP é mais rápida do que a anterior. Use a mais recente que o seu tema e os seus plugins suportem (se estiverem atualizados, o normal é suportarem as últimas).

Altere-a no seletor de PHP do cPanel ou com o assistente de PHP da área de cliente, que verifica se o site continua a responder depois da alteração. Se algo falhar, volte à versão anterior com um clique.

No mesmo seletor, verifique se a extensão opcache está ativada: guarda o código PHP já compilado e evita repetir esse trabalho em cada visita.

Substituir o cron do WordPress

O WordPress executa as suas tarefas agendadas aproveitando as visitas: quando alguém entra, verifica se há tarefas pendentes e lança-as. Isso torna mais lenta a visita a quem calha e, em sites com pouco tráfego, atrasa as tarefas.

O melhor é desativá-lo e lançar as tarefas com um cron real do servidor, como explicamos em desativar o WP-Cron para melhorar o desempenho. Configure primeiro o cron do servidor e verifique se funciona antes de desativar o do WordPress.

LiteSpeed Cache, a peça-chave

Cada visita ao WordPress executa muito código PHP e dezenas de consultas à base de dados. A cache guarda a página já gerada e entrega-a diretamente ao visitante seguinte, sem repetir esse trabalho. Por exemplo, a página «Quem somos» é gerada uma vez e as visitas seguintes recebem-na de imediato e quase sem consumo.

O LiteSpeed Cache é o plugin que recomendamos: é desenvolvido pela mesma equipa do LiteSpeed Web Server, o servidor web que usamos, e a cache é feita diretamente pelo servidor. Inclui ainda ferramentas para otimizar CSS, JavaScript, imagens e base de dados.

Use um único plugin de cache de página: se tiver o WP Rocket, o W3 Total Cache, o WP Super Cache ou semelhante, desative-o antes.

Instalação

Tem duas formas:

A partir do cPanel, com o LiteSpeed Web Cache Manager, que o instala e ativa num ou em vários sites de uma vez.
A partir do WordPress, em Plugins > Adicionar novo, procurando LiteSpeed Cache (autor: LiteSpeed Technologies).

Configuração inicial e predefinições

Para usar a otimização de imagens, o CSS crítico e o VPI, o LiteSpeed precisa dos serviços online gratuitos da QUIC.cloud. Ative-os em LiteSpeed Cache > General com o botão Enable QUIC.cloud services. Não é preciso usar a sua CDN. (Em versões antigas, este passo chamava-se Request Domain Key.)
Vá a LiteSpeed Cache > Presets e aplique Basic. Ativa a cache e algumas otimizações seguras de uma só vez.

As predefinições (presets) configuram muitas opções de uma vez:

Essentials e Basic: as mais seguras, raramente dão problemas.
Advanced (Recommended): um ponto intermédio que funciona bem na maioria dos sites.
Aggressive e Extreme: otimizam ao máximo, mas podem entrar em conflito com alguns temas ou plugins (carregamento diferido de imagens, combinação de JavaScript, JavaScript diferido).

O mais simples é ir subindo de nível, revendo o site em cada um, e ficar com o mais alto que funcione bem. O LiteSpeed guarda uma cópia da sua configuração antes de aplicar uma predefinição e permite restaurá-la a partir da mesma página.

Se preferir ajustar manualmente (ou partir de Basic e afinar), estes são os valores que recomendamos. Indicamos as opções com o nome que têm no plugin em inglês.

Painel

O Dashboard do LiteSpeed resume o estado da cache e das otimizações. Inclui o Page Load Time (tempo de carregamento da página) e a PageSpeed Score (pontuação do PageSpeed), medidos a partir do exterior, para acompanhar a evolução sem sair do WordPress.

Cache

Em LiteSpeed Cache > Cache:

Separador Cache

Enable Cache: ON.
Cache Logged-in Users: ON. Guarda uma cache privada para cada utilizador ligado.
Cache Commenters: ON.
Cache REST API: ON.
Cache Login Page: ON.
Cache Mobile: OFF, salvo se o seu tema ou algum plugin mostrar um HTML diferente no telemóvel (não basta que o design seja adaptável). Nesse caso, ON.

Separador TTL

É o tempo máximo que uma página permanece em cache antes de ser regenerada. O LiteSpeed limpa automaticamente o que muda (ao editar um artigo, alterar um produto, instalar um plugin), por isso os valores predefinidos, altos, estão corretos. Por exemplo, Default Public Cache TTL é de 604800 segundos, uma semana.

Separador Purge

Ative Purge All On Upgrade e deixe as regras de limpeza automática ao publicar como vêm.

Separador Excludes

Se alguma página não deve ser guardada em cache (porque mostra dados que mudam em cada visita ou dá problemas), adicione o seu endereço em Do Not Cache URIs. Também pode excluir por cookies, categorias, etiquetas ou funções de utilizador. O carrinho, o pagamento e A minha conta do WooCommerce já são excluídos pelo próprio LiteSpeed.

Separador ESI

O ESI permite colocar a página em cache e deixar de fora apenas um fragmento personalizado (por exemplo, o minicarrinho ou o nome do utilizador). É potente mas exige conhecimentos de programação: deixe-o desativado se não precisar dele.

Separador Object

É a cache de objetos com Redis; vemo-la mais abaixo, na sua própria secção.

Separador Browser

Ative Browser Cache com Browser Cache TTL em 31557600 segundos (um ano). O navegador do visitante guardará os CSS, JavaScript e imagens e não os voltará a descarregar em cada página.

Otimização de imagens

O LiteSpeed envia as imagens para a QUIC.cloud, que as comprime e gera versões WebP, e devolve-as sem que tenha de fazer nada.

Em LiteSpeed Cache > Image Optimization, separador Image Optimization Settings:

Auto Request Cron: ON.
Optimize Original Images: ON.
Remove Original Backups: OFF. Assim conserva as originais caso queira reverter.
Optimize Losslessly: ON. Reduz um pouco menos o peso, mas a imagem não perde qualidade.
Preserve EXIF/XMP data: OFF.
Next-Gen Image Format: WebP (o AVIF é pago).
WebP/AVIF For Extra srcset: ON.

Consoante o número de imagens que tiver, o processo demora horas ou dias. Acompanhe o progresso no separador de resumo dessa mesma secção.

Otimização de página

Em LiteSpeed Cache > Page Optimization:

CSS Settings

CSS Minify: ON.
CSS Combine: ON, verificando que o site se vê bem.
CSS Combine External and Inline: ON.
Generate UCSS: OFF.
UCSS Inline: OFF.
Load CSS Asynchronously: OFF. Se o quiser experimentar, ative-o e verifique que o site não aparece por um instante sem estilos.
CCSS Per URL: OFF.
Inline CSS Async Lib: ON.
Font Display Optimization: Default.

JS Settings

JS Minify: ON.
JS Combine: ON, verificando que não estraga nenhum plugin nem o tema.
JS Combine External and Inline: ON.
Load JS Deferred: comece em OFF e experimente Deferred. É o que mais melhora a pontuação, mas também o que mais falhas dá (menus, sliders, avisos de cookies). Se algo falhar, adicione o ficheiro em JS Excludes do separador Tuning ou volte a OFF.

HTML Settings

HTML Minify: ON.
Load Google Fonts Asynchronously: ON se o seu tema carregar tipos de letra do Google Fonts a partir dos servidores da Google.

Media Settings

Lazy Load Images: ON. As imagens que ficam mais abaixo carregam ao fazer scroll.
Responsive Placeholder: ON. Reserva o espaço da imagem enquanto carrega.

VPI

Viewport Images (VPI) analisa cada página e deteta que imagens se veem sem fazer scroll no computador (1300×900 px) e no telemóvel (480×800 px). Essas são excluídas do carregamento diferido e mostram-se de imediato; as restantes continuam à espera do scroll. Melhora o LCP do PageSpeed Insights.

Ative Viewport Images e Viewport Images Cron apenas se tiver ativado Lazy Load Images.

Media Excludes

Aqui adiciona imagens concretas que não quer que sejam carregadas de forma diferida, por exemplo o logótipo ou a imagem principal da página inicial.

Localization

Se o seu site tiver muitos comentários ou um fórum, ative Gravatar Cache: guarda os avatares no seu servidor em vez de os pedir ao Gravatar em cada visita. Em Localize Resources pode fazer o mesmo com scripts externos como o do Google Analytics.

Tuning

Se uma otimização estragar algo, é aqui que exclui os ficheiros CSS ou JS concretos para que o LiteSpeed não lhes toque, sem desativar a otimização para o resto.

Ferramentas

Em LiteSpeed Cache > Toolbox:

Purge: esvazia a cache de uma página, dos CSS/JS ou de tudo. Se fizer uma alteração e não a vir, limpe primeiro o que foi afetado e, se não bastar, Purge All.
Import / Export: se tiver vários sites, exporte a configuração de um e importe-a noutro para não repetir as definições. Reveja depois as exclusões, que dependem de cada site.

Otimizar a base de dados

A base de dados guarda tudo: artigos, páginas, comentários, configuração dos plugins e do tema. Com o tempo acumula revisões, rascunhos, spam e dados temporários que a tornam mais pesada.

Em LiteSpeed Cache > Database tem tudo à mão:

Limpar revisões, rascunhos automáticos, lixo, comentários de spam e transientes expirados.
Otimizar tabelas.
Converter para InnoDB as tabelas que continuem em MyISAM.

Faça antes uma cópia da base de dados. Se não quiser perder todas as revisões, no separador de definições dessa secção pode limitar quantas se conservam por artigo.

Para limpezas mais profundas, tem consultas SQL para purgar dados órfãos.

Cache de objetos com Redis

É o ponto extra que faz a diferença em lojas, sites com utilizadores registados ou páginas que não se podem colocar em cache: guarda em memória os resultados das consultas que o WordPress repete e evita voltar a pedi-los à base de dados.

Todos os planos incluem Redis. Ativa-se em poucos minutos seguindo o que é a cache de objetos e como ativá-la com Redis.

Otimizar as imagens

As imagens costumam ser o que mais pesa numa página.

Dimensões

São a largura e a altura em píxeis. Se carregar uma fotografia de 2000×2000 px e a mostrar a 400×400 px, o navegador do visitante descarrega na mesma a de 2000×2000 px. Carregue as imagens no tamanho em que vão ser mostradas, redimensionando-as antes com qualquer editor (Photoshop, GIMP ou o do seu sistema).

Para as que já estão carregadas, plugins como o Smush ou o Imsanity redimensionam-nas em bloco para um tamanho máximo.

Peso

É o espaço que o ficheiro ocupa. Comprimir sem perda de qualidade reduz muito o peso sem que se note. Tem três opções (use apenas uma sobre as mesmas imagens):

A otimização de imagens do LiteSpeed Cache que configurámos acima, que além disso gera WebP.
O otimizador de imagens da área de cliente, que comprime os JPG e PNG da conta, de um domínio ou de uma pasta.
Programas de computador como o ImageOptim (Mac) ou o FileOptimizer (Windows): descarrega a pasta wp-content/uploads, processa-a e volta a carregá-la.

CDN para o conteúdo estático

Uma CDN é uma rede de servidores distribuídos pelo mundo que guarda cópias das imagens, CSS e JavaScript do seu site e as entrega a partir do mais próximo do visitante. É útil sobretudo se tiver visitas de vários países.

Recomendamos duas:

QUIC.cloud, a CDN da LiteSpeed, integrada com o LiteSpeed Cache: configurar a QUIC.cloud no WordPress.
Cloudflare, muito fácil de pôr em funcionamento alterando os DNS do domínio: Cloudflare para aumentar o desempenho e a segurança. Antes de alterar os DNS, copie todos os seus registos, incluindo os do correio.

Rever a tabela wp_options

A tabela wp_options e os seus dados autoload são um dos estrangulamentos mais habituais e passam despercebidos mesmo a administradores com experiência. Tem as consultas para a rever em otimizar a tabela wp_options e os dados autoload.

Encontrar o plugin que torna o site lento

Se, depois de tudo isto, o site continuar lento, quase sempre há por trás um plugin mal programado ou com uma falha. Encontrá-lo manualmente entre dezenas de plugins é difícil.

Para isso tem o PHP X-Ray: analisa uma página e indica quanto tempo consome cada plugin, cada consulta SQL e cada chamada externa. Assim sabe exatamente qual é o culpado.

Aumentar o limite de memória

O WordPress define um limite de memória baixo. Aumentá-lo não acelera o site, mas evita erros com plugins exigentes ou com o WooCommerce: aumentar o memory_limit no WordPress.

Menos plugins, e cuidado com os de segurança

O enorme catálogo de plugins é a grande vantagem do WordPress e também o seu pior inimigo em desempenho: vemos com frequência instalações com mais de 50 plugins, cada um a somar a sua parte de lentidão.

Reveja cada plugin e pergunte-se se precisa mesmo dele. Se não trouxer nada aos seus visitantes ou ao seu trabalho, apague-o.

Os plugins de segurança que analisam ficheiros em cada visita ou em segundo plano estão entre os que mais recursos consomem, e os nossos servidores já fazem esse trabalho. Explicamo-lo em plugins de segurança e WordPress: a nossa opinião. A autenticação em dois passos, pelo contrário, vale a pena manter.