O que é CDN: significado, por que usar e como conectar ao WordPress
Uma CDN (Content Delivery Network) é uma rede de distribuição de conteúdo que guarda os arquivos do servidor de origem em servidores de borda de várias regiões e responde a partir do servidor mais próximo do visitante. Para ver se os servidores de borda respondem a partir do cache, verificamos os cabeçalhos de resposta de um serviço público de distribuição de bibliotecas como o jsDelivr, e o arquivo do jQuery estava sendo entregue a partir de uma cópia em cache. As duas formas de conectar o WordPress, a troca de URLs de arquivos e o proxy de DNS, foram comparadas com base na documentação oficial.
1️⃣ Significado de CDN: servidores de borda e servidor de origem
Um POP (Point of Presence) é o data center onde ficam os servidores de borda, e a solicitação do visitante é enviada ao POP mais próximo.
O servidor de borda que recebe a solicitação responde na hora se tiver o arquivo guardado; se não tiver, busca o arquivo no servidor de origem, responde e o guarda no servidor de borda. O CloudFront, a CDN da AWS, começa a entregar ao visitante assim que o primeiro byte chega do servidor de origem (segundo a documentação oficial da AWS).

Os servidores de borda guardam apenas os arquivos que os visitantes pediram, então, mesmo para o mesmo arquivo, a primeira solicitação em cada servidor de borda vai até o servidor de origem.
Buscar os arquivos quando a solicitação chega, como aqui, é o método pull, e também existe o método push, em que você envia os arquivos para a CDN com antecedência.
2️⃣ Por que usar uma CDN: distância e carga do servidor de origem
Quanto maior a distância entre o visitante e o servidor, maior o tempo de ida e volta (RTT) de cada solicitação. Ao abrir uma página, além do HTML, surgem solicitações de imagens, CSS e JavaScript, então, quando um servidor de borda próximo responde, o tempo de ida e volta diminui em cada solicitação.
As solicitações respondidas por um servidor de borda não chegam ao servidor de origem, o que também reduz o uso de CPU e a transferência (largura de banda) do servidor de origem. Ao conectar o DNS pelo proxy da Cloudflare, o IP do servidor de origem não fica exposto, e os ataques DDoS são barrados primeiro na CDN (segundo a documentação oficial da Cloudflare).
Em um site cujos visitantes estão na mesma região do servidor de origem, o ganho com a distância é pequeno. Nesses sites, a maior vantagem da CDN não é encurtar o tempo de resposta, e sim reduzir a carga do servidor de origem e economizar transferência.
3️⃣ Arquivos que vão para o cache: arquivos estáticos e HTML
Na configuração padrão, a Cloudflare guarda em cache apenas arquivos estáticos como imagens, CSS e JavaScript, definidos pela extensão do arquivo (segundo a documentação oficial da Cloudflare). O HTML das páginas e o JSON ficam fora do cache padrão, então o servidor de origem continua respondendo a eles mesmo depois de conectar a Cloudflare.
Para guardar também o HTML em cache, você precisa criar uma regra de cache separada na CDN. Nesse caso, exclua da regra as páginas cujo conteúdo muda de pessoa para pessoa, como as de usuários logados ou o carrinho de compras, para que a tela de outro visitante não se misture.
4️⃣ Conexão com o WordPress: troca de URLs de arquivos e proxy de DNS
Para conectar uma CDN ao WordPress, você troca apenas os URLs dos arquivos estáticos pelos da CDN ou configura o DNS do domínio no proxy da CDN para que todas as solicitações passem pela CDN.
| Modelo | Onde se conecta | Solicitações que passam pela CDN | IP do servidor de origem |
|---|---|---|---|
| Troca de URLs de arquivos | Inserir o endereço da CDN (CNAME) nas configurações de CDN do plugin de cache | Arquivos estáticos como imagens, CSS e JavaScript | Fica público |
| Proxy de DNS | Conectar os registros DNS do domínio ao proxy da CDN | Todas as solicitações HTTP e HTTPS do site | Fica oculto atrás da CDN |
No método de troca de URLs de arquivos, você insere nas configurações de CDN de um plugin de cache como o WP Rocket o endereço (CNAME) fornecido pelo provedor da CDN. Depois disso, os URLs de imagens, CSS e JavaScript no HTML da página passam a ser os da CDN (segundo a documentação oficial do WP Rocket). O HTML continua sendo entregue pelo servidor de origem.

No método de proxy de DNS, o DNS do domínio passa a ser gerenciado pelo provedor da CDN. A Cloudflare também oferece uma forma de conectar o proxy sem mudar os servidores de nomes, adicionando apenas registros CNAME no seu provedor de DNS atual. Esse método só está disponível nos planos Business ou superiores (segundo a documentação oficial da Cloudflare).
5️⃣ Verificar acertos de cache: os cabeçalhos cf-cache-status e age
Você confere se a CDN respondeu um arquivo a partir do cache pelos cabeçalhos de resposta. Abaixo estão o comando que usamos para verificar os cabeçalhos de resposta do arquivo do jQuery distribuído pelo jsDelivr e o resultado.
curl -sI https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js | grep -iE "^(cache-control|cf-cache-status|age|server):"cache-control: public, max-age=31536000, s-maxage=31536000, immutable
age: 45920
cf-cache-status: HIT
server: cloudflare[server: cloudflare] indica que essa resposta foi enviada por um servidor de borda da Cloudflare, e [cf-cache-status: HIT], adicionado pela Cloudflare, significa que a resposta veio do cache. [age: 45920] indica que esse arquivo está no cache há cerca de 12 horas e 45 minutos. [max-age=31536000] é a instrução do servidor de origem de que o arquivo pode ser guardado por 1 ano.
Para ver até onde a solicitação vai quando o valor é [MISS], [DYNAMIC] ou [BYPASS] em vez de [HIT], clique nos botões de valor no diagrama abaixo.
cf-cache-status: HITcf-cache-status: MISScf-cache-status: DYNAMICcf-cache-status: BYPASSCache-Control: no-store ou private🔢 FAQ & conteúdo recomendado
Cache
Cache: definição e todos os campos em que o cache é usado
Organiza as áreas em que o cache é usado, do navegador até o interior do servidor, incluindo o cache dos servidores de borda de uma CDN.
Varnish
Instalar e configurar o Varnish Cache no Apache e no Nginx
Mostra como instalar e configurar o cache de proxy reverso Varnish à frente do Apache e do Nginx.
Cloudflare
Configurar o CDN da Cloudflare: plano Pro
Conecta a Cloudflare ao WordPress pelo método de proxy de DNS e depois trata da diferença de velocidade e das configurações entre os planos Free e Pro.
ℹ️ Aviso de afiliados
O conteúdo deste site contém links de afiliados. Quando um visitante compra um produto ou serviço por meio de um desses links, o site recebe uma comissão do vendedor. O valor que o comprador paga (em promoções, ele diminui ↓) não aumenta por causa disso. Preços, descontos e informações de estoque valem para o momento em que o texto foi escrito e podem ter mudado, por isso confirme com o vendedor antes de comprar. Os produtos são escolhidos e avaliados por critérios próprios, e o recebimento de comissão não influencia a ordem de apresentação nem o conteúdo das avaliações.