Como acelerar WordPress ao máximo com Cloudflare

Cloudflare é o nome de um serviço, prestado pela empresa homônima, de aceleração de páginas na Internet. A base de seu serviço é a CDN (saiba o que é CDN), que a cada dia torna-se mais sofisticada, aumentando o valor agregado entregue ao usuário — e aos visitantes dos sites acelerados por ela.

Caso não tenha familiaridade com a Cloudflare e seus serviços, nós já publicamos algum material sobre ela:

Utilizar a Cloudflare para acelerar um site em WordPress não é exatamente uma novidade. Nós mesmos já ensinamos uma opção de cache muito agressivo que mantém na Cloudflare inclusive as páginas, não só os arquivos estáticos do site: como tirar o máximo proveito da Cloudflare com seu WordPress. Esta abordagem implica criar regras de páginas que forcem o cache de todo o conteúdo (inclusive HTML), bem como algumas exceções (como o painel do WordPress), e um plugin para tornar as exceções compatíveis com as regras de página criadas.

O método funciona, mas caso o site precise de mais regras de página do que as três incluídas com o plano gratuito, talvez o custo seja um fator desanimador, além do fato que o WordPress fica menos confortável de se trabalhar — nada impossível de adaptação, mas as pessoas gostam de facilidade e conforto.

Uma das novidades recentes (pelo menos, mais recente que o cache) são os “Workers,” recurso que permite que se execute código arbitrário na própria Cloudflare (o que se chama de “Edge Cache”). Ou seja, o código não é executado no servidor, tampouco no navegador, mas sim na camada intermediária.

Para entender melhor como funcionam os Workers, antes vamos recapitular como funciona o cache propriamente dito.

De maneira simples, o gráfico acima mostra como funciona o cache:

O visitante solicita um recurso (uma página, um script, uma imagem).
Caso o recurso solicitado já exista no cache, ele é entregue ao visitante, pulando direto para a etapa 4; caso contrário o recurso é solicitado ao servidor.
A resposta que o servidor deu é salva no cache, para requisições vindouras.
O recurso solicitado é entregue ao visitante.

Há duas razões pelas quais o cache acelera o acesso ao site:

o cache só faz uma coisa (mais ou menos, já vamos voltar aos Workers): recebe requisições, e se já souber a resposta para elas entrega-a imediatamente, sem necessidade de processamento algum;
o Edge Cache fica espalhado e espelhado em dezenas (ou centenas) de datacenters ao redor do mundo, o que diminui a latência e acelera a entrega do conteúdo ao visitante, uma vez que o Edge Server geograficamente mais próximo sempre será o que vai entregar o resultado das requisições.

Os Workers operam nessa camada intermediária, no Edge Cache. Em alguns casos os Workers podem operar sites e aplicativos inteiros sem depender de servidor algum sob responsabilidade do dono do domínio (o servidor existe, é o Edge Server da Cloudflare, mas não funciona exatamente como um servidor para WordPress, por exemplo).

Seções desta página

Cache completo do WordPress usando Cloudflare Workers

Os Workers permitem um controle bem mais sofisticado e completo de como o Edge Cache vai se comportar. Enquanto que as Regras de Página nos permitem parcamente definir as exceções para o cache completo, com os Workers podemos contornar a limitação das três regras gratuitas, bem como fazer filtros mais avançados (como exceção baseada em cookie e em parâmetros de URL, por exemplo).

Com um único Worker podemos controlar o que entra ou não para o cache baseado em vários critérios; podemos definir a duração do Edge Cache e do cache de navegador; podemos adicionar cabeçalhos HTTP, remover, reescrever URLs, com um pouco de engenhosidade podemos até mesmo servir imagens WEBP condicionais.

Infelizmente, os Workers podem não ser gratuitos para todo mundo, mas certamente eles são bem acessíveis, muito mais baratos que CDNs convencionais que meramente replicam conteúdo. No momento da elaboração deste guia a Cloudflare oferece dois planos básicos de Workers:

gratuito, com suporte a até 100.000 requisições diárias;
5 Dólares mensais, com capacidade de 10 milhões de requisições mensais.

Se você não sabe qual é o plano mais adequado para você, o melhor é experimentar. Temos clientes para quem o plano gratuito é suficiente. O site da PortoFácil, por sua vez, requer um plano pago (usando cerca de 5 milhões de requisições mensais).

O plugin de apoio

Para fazer nosso site funcionar corretamente precisaremos de um plugins de apoio: WP Cloudflare Super Page Cache.

O plugin fará a configuração do Worker na Cloudflare, de maneira automatizada, bem como fará a limpeza regular do cache sempre que um post for publicado. O código do Worker, por sua vez, tratará das exceções, para que o acesso ao blog não seja prejudicado.

Para poder fazer seu trabalho, o plugin requere informação do e-mail de login na Cloudflare e da chave de API global.

Para obter sua chave de API global acesse o painel da Cloudflare → ícone do “homenzinho” no canto superior direito na tela → Meu perfil → Tokens de API → Global API Key. Clique no botão “Exibir” para ter acesso à chave.

Instale e ative o plugin no WordPress, como você sempre faz. Depois vá em suas configurações (configurações → WP Cloudflare Super Page Cache) para iniciar a configuração.

Note que a página é dividida em duas áreas principais: um “assistente” na parte de cima, mostrando em que parte da configuração você está, e as opções propriamente ditas na parte de baixo. É tudo meio confuso no começo, pois o autor do plugin não seguiu a identidade visual do painel do WP a que estamos todos acostumados, mas nada que com um pouco de esforço não se dome.

Configurações do plugin

A primeira coisa a fazer é configurar o acesso à Cloudflare. Configure o plugin para usar o modo API Key, informe o email de acesso à sua conta Cloudflare e a chave global, que acima explicamos como obter.

A não ser que você saiba exatamente o que fazer com os logs (registros de atividade) do plugin, você já pode desativá-los neste momento, conforme a imagem mostra.

Assim que você salve as credenciais de acesso à Cloudflare (“Update Settings”), será possível escolher (ou confirmar) o domínio para o qual o plugin vai criar o Worker. Vai aparecer um campo a mais, depois do registro de logs, para você escolher o domínio de seu blog. Normalmente o plugin consegue reconhecer o domínio corretamente, e você precisa confirmar o domínio correto, de qualquer maneira.

Agora vem a etapa mais maçante da configuração do plugin. São muitas opções embora a maioria possa ser mantida em sua configuração padrão. Vamos mostrar exatamente o que você deve alterar, até ter seu blog e sua Cloudflare completamente configurados.

Observe que depois de configurar o domínio no passo acima descrito, o plugin agora apresenta algumas abas onde há configurações agrupadas.

A aba Cache

Na aba Cache do plugin, vá à seção Cache Behavior Settings.

A primeira opção a modificar é a que diz ao plugin para limpar todo o cache quando o blog for modificado.

Embora o plugin recomende limpar só as páginas relacionadas, os testes de campo mostraram que em muitos casos (como blogs com tema tipo “magazine”) é mais seguro limpar o cache todo, e por isso sugerimos esta configuração.

Agora role a tela até a seção Cloudflare Workers e habilite a opção do Worker, e de remoção do “cache buster”.

Role a página até o final e salve as configurações (“Update Settings”).

Por fim, clique no botão “Enable Page Caching Now” para que o plugin crie e configure o Worker na Cloudflare.

Configuração da Cloudflare

A parte difícil da configuração da Cloudflare o plugin já fez. Porém, nós vamos fazer pequenos ajustes que serão úteis para quem tenha dois ou mais domínios na mesma conta.

Acesse as configurações do domínio na Cloudflare, clique em Workers, e você verá um Worker chamado swcfpc_worker já completamente configurado para você (mas vamos melhorar esse bichinho).

Primeiro, vamos garantir que o site continue funcionando, mesmo sem cache ou aceleração, caso o limite de requisições seja excedido. Clique no “editar” à direita do nome do Worker e garanta que o modo de falha da rota esteja marcado com “Falha ao abrir (continuar).”

Esta opção de modo de falha só estará disponível no modo gratuito dos Workers da Cloudflare. Se você estiver usando o plano pago essas opções somem, pois ao exceder o limite mensal a conta será automaticamente cobrada, aos poucos, conforme mais recursos sejam necessários.

Em seguida vamos clicar no nome do Worker e renomeá-lo, para que seja possível configurar um outro Worker para um outro domínio na mesma conta.

Por exemplo, no caso do blog da PortoFácil este Worker foi renomeado para pf_swcfpc_worker.

Salve tudo e pronto, seu blog está acelerado ao máximo com o cache da Cloudflare.

Observações importantes

Antes de optar por acelerar seu site usando os Workers da Cloudflare faça as contas para ver se o plano gratuito vai ser suficiente. Caso você consuma todas as requisições do dia seu site ficará offline até “virar” meia-noite nos servidores da Cloudflare.

Ao considerar as requisições diárias de seu site, lembre-se que essa métrica é muito maior que a quantidade de visitantes únicos, pois cada imagem, cada script, conta como uma requisição. Além disso, requisições automatizadas (legítimas, como as feitas pelo Googlebot; ou maliciosas, como tentativas de invasão ou roubo de conteúdo) também são contabilizadas pela Cloudflare, embora não afetem as estatísticas de visitação do site.

Caso você tenha mais de um domínio na mesma conta, a quantidade de requisições disponível (diária ou mensalmente, no caso de planos pagos) é compartilhada entre todos os seus domínios.

Não é necessário utilizar nenhuma “Page Rule” para forçar cache de nada, já que o Worker cuida disso sozinho. Porém, caso você decida por usar o plugin sem o suporte aos Workers, aí será necessário ter disponibilidade de duas Page Rules que serão automaticamente criadas pelo plugin.

Ao limpar o cache, lembre-se de que a Cloudflare precisa de aproximadamente 30s para concluir a operação. Além disso, todas as páginas ficarão no cache do navegador por um minuto após o último acesso.

Ou seja: ao limpar o cache, aguarde 90s para acessar a página novamente e ver suas mudanças na aba anônima— certamente um incômodo, mas é um pequeno preço a pagar pelo ganho expressivo de desempenho.

Por fim, estamos ao dispor dos nossos clientes para esclarecimentos adicionais, ou para tirar dúvidas acerca deste assunto. É só abrir um chamado no suporte e será um prazer conversar com você.

Janio Sarmento em 10/10/2020 (atualização: 21/01/2021)

WordPress acelerado ao máximo com Cloudflare Workers