Arquivos Estáticos

A funcionalidade de CDN para Arquivos Estáticos permite que você envie automaticamente arquivos como JavaScript (JS), CSS, SVG e fontes para o Cloudflare R2 e altere suas URLs para serem servidos a partir do CDN. Isso melhora significativamente o desempenho do seu site e reduz a carga no seu servidor.

Visão Geral

Arquivos estáticos como JavaScript e CSS são parte fundamental do seu site, mas também podem consumir largura de banda e recursos do servidor. Ao servir esses arquivos a partir do Cloudflare R2, você aproveita a rede global da Cloudflare para entregar seu conteúdo estático mais rapidamente aos seus visitantes, independentemente da localização deles.

O plugin automatiza todo o processo de envio desses arquivos para o R2 e modifica as URLs no HTML do seu site para apontar para o CDN. Esse processo é transparente para seus visitantes e não requer nenhuma modificação manual do código.

Página de Arquivos Estáticos

A página de Arquivos Estáticos no painel administrativo do plugin oferece uma visão completa do status do CDN para arquivos estáticos e ferramentas para gerenciá-lo:

Status do CDN de Arquivos Estáticos

No topo da página, você encontrará um resumo do status atual:

  • Status atual: Indica se o CDN para arquivos estáticos está ativo ou inativo.
  • Arquivos Enviados: Mostra o número total de arquivos enviados para o R2, divididos por tipo.

Nota: O plugin precisa escanear seu site e enviar os arquivos para o R2 antes que o CDN possa ser ativado. Se você ainda não fez isso, verá um aviso indicando que precisa executar o upload inicial.

Configurações de Arquivos Estáticos

A seção de configurações permite personalizar o comportamento do CDN para arquivos estáticos:

  • Status do CDN: Ativa ou desativa o redirecionamento de URLs para arquivos estáticos. Mesmo que desativado, os arquivos permanecerão no R2.
  • Tamanho do Lote: Define o número de arquivos a serem processados em cada lote durante o upload (recomendado: 50). Reduza esse valor se estiver enfrentando problemas de timeout ou memória.
  • Upload Automático: Se ativado, o plugin verifica periodicamente se há novos arquivos estáticos ou se arquivos existentes foram modificados e os envia automaticamente para o R2.
  • Frequência de Verificação: Define com que frequência o plugin verificará por novos arquivos ou modificações (diariamente, a cada 3 dias, semanalmente).
  • Upload na Atualização: Se ativado, o plugin enviará novos arquivos estáticos quando um tema ou plugin for atualizado.
  • Versionamento de Arquivos: Adiciona um parâmetro de versão às URLs para garantir que os visitantes sempre recebam a versão mais recente dos arquivos.

Depois de ajustar as configurações, clique em Salvar Configurações para aplicar as alterações.

Upload de Arquivos Estáticos para R2

Antes de ativar o CDN, você precisa enviar seus arquivos estáticos para o Cloudflare R2. O plugin automatiza esse processo:

Processo de Upload Inicial

  1. Clique no botão Iniciar Upload de Arquivos Estáticos na página de Arquivos Estáticos.
  2. O plugin primeiro escaneará seu site para identificar todos os arquivos estáticos. Este processo pode levar alguns minutos, dependendo do tamanho do seu site.
  3. Após o escaneamento, você verá uma lista dos arquivos encontrados e o plugin começará a enviá-los para o R2 em lotes.
  4. O progresso do upload será exibido, mostrando:
    • Número de arquivos processados
    • Número de arquivos restantes
    • Lotes processados
  5. Você pode pausar o processo a qualquer momento clicando em Parar Upload.
  6. Para continuar um upload pausado, clique em Continuar Upload.

Dica: Para sites grandes com muitos arquivos estáticos, o processo de upload pode levar algum tempo. Se você estiver enfrentando timeouts ou problemas de memória, tente reduzir o tamanho do lote nas configurações.

Locais Escaneados

O plugin escaneia os seguintes locais em busca de arquivos estáticos:

  • Diretório de temas: /wp-content/themes/
  • Diretório de plugins: /wp-content/plugins/
  • Outros diretórios dentro de /wp-content/ (exceto cache e uploads)

Por padrão, o plugin exclui arquivos com referências a PHP ou AJAX para evitar problemas de compatibilidade.

Ativando o CDN para Arquivos Estáticos

Após concluir o upload inicial dos arquivos, você pode ativar o CDN para começar a servir os arquivos estáticos a partir do Cloudflare R2:

  1. Na seção de configurações, defina Status do CDN como Ativo.
  2. Clique em Salvar Configurações.
  3. Limpe o cache do seu site, caso esteja usando um plugin de cache.

Após ativar o CDN, todas as URLs dos arquivos estáticos em seu site serão automaticamente modificadas para apontar para o CDN. Por exemplo:

# URL original:
https://seusite.com/wp-content/themes/seu-tema/style.css

# URL com CDN:
https://seu-bucket.r2.cloudflarestorage.com/wp-content/themes/seu-tema/style.css

Se você configurou um domínio personalizado para o CDN, a URL será modificada para usar esse domínio:

# URL com domínio personalizado:
https://cdn.seusite.com/wp-content/themes/seu-tema/style.css

Gerenciando Arquivos Estáticos

Depois que os arquivos forem enviados para o R2, você verá uma lista detalhada de todos os arquivos na seção "Arquivos Enviados". Esta seção oferece as seguintes funcionalidades:

  • Filtrar arquivos: Pesquise rapidamente arquivos específicos por nome, tipo ou caminho.
  • Visualizar detalhes: Veja informações detalhadas sobre cada arquivo, incluindo caminho e data de última atualização.
  • Reenviar arquivos: Atualize arquivos individuais no R2 com um único clique.
  • Limpar lista: Opção para limpar a lista de arquivos enviados (sem excluir os arquivos do R2).

A interface mostra um resumo prático dividido por tipos de arquivo (JavaScript, CSS, Fontes e SVG), permitindo que você tenha uma visão clara de todos os arquivos enviados.

Verificando o Funcionamento do CDN

Após ativar o CDN, é importante verificar se os arquivos estáticos estão sendo corretamente servidos a partir do Cloudflare R2:

  1. Visite seu site em uma janela anônima do navegador (para evitar interferência do cache do navegador).
  2. Abra as ferramentas de desenvolvimento do navegador (F12 ou botão direito > Inspecionar).
  3. Vá para a aba "Rede" (Network) e recarregue a página.
  4. Filtre por tipos de arquivo como "js" ou "css".
  5. Verifique se as URLs desses arquivos estão apontando para seu bucket R2 ou domínio personalizado do CDN.

Solução de problemas: Se os arquivos não estiverem sendo servidos pelo CDN, verifique:

  • Se o cache do site foi limpo após ativar o CDN.
  • Se há algum conflito com outros plugins de CDN (desative-os temporariamente para testar).
  • Se as URLs estão sendo corretamente modificadas no HTML da página.

Atualização Automática de Arquivos

O plugin oferece funcionalidades para manter seus arquivos estáticos sempre atualizados no R2:

Upload Automático

Com o upload automático ativado, o plugin verifica periodicamente seu site em busca de novos arquivos estáticos ou arquivos modificados:

  • A verificação ocorre de acordo com a frequência configurada (diária, a cada 3 dias ou semanal).
  • Apenas arquivos novos ou modificados são enviados para o R2.
  • O processo ocorre em segundo plano sem interferir na performance do seu site.

Upload na Atualização

Quando você atualiza temas ou plugins, novos arquivos estáticos podem ser adicionados ou modificados. Com a opção "Upload na Atualização" ativada, o plugin detecta automaticamente essas alterações e:

  • Inicia uma verificação logo após a conclusão de atualizações de temas ou plugins.
  • Envia apenas os arquivos novos ou modificados durante a atualização.
  • Mantém o versionamento correto para garantir que os visitantes recebam as versões mais recentes.

Versionamento de Arquivos

A funcionalidade de versionamento adiciona um parâmetro de versão às URLs dos arquivos servidos pelo CDN. Isso garante que:

  • Os visitantes sempre recebam a versão mais recente de cada arquivo.
  • As atualizações sejam imediatamente visíveis, sem problemas de cache do navegador.
  • O parâmetro de versão é baseado no timestamp de upload do arquivo.