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.
• Tamanho Total: O espaço total ocupado pelos arquivos estáticos no R2.
• Último Upload: Data e hora do último processamento de arquivos estáticos.

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.
• Tipos de Arquivo: Permite selecionar quais tipos de arquivo serão enviados para o R2:
  • JavaScript (.js): Arquivos de script.
  • CSS (.css): Folhas de estilo.
  • SVG (.svg): Imagens vetoriais.
  • Fontes (.woff, .woff2, .ttf, .eot): Arquivos de fonte.
• 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.
• Intervalo entre Lotes: Tempo de espera (em segundos) entre o processamento de cada lote, para evitar sobrecarregar o servidor.
• Ignorar Arquivos Minificados: Se ativado, ignora arquivos já minificados (geralmente indicados por .min.js ou .min.css).
• Comprimir Arquivos: Se ativado, aplica compressão adicional nos arquivos antes de enviá-los para o R2.

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
   • Tempo estimado para conclusão
   • Status atual do lote em processamento
5. Você pode pausar o processo a qualquer momento clicando em Parar Upload.
6. Para continuar um upload pausado, clique em Continuar Upload.

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/
• Diretório de uploads: /wp-content/uploads/
• Diretório raiz do WordPress: Arquivos JS e CSS na raiz do site.

Por padrão, o plugin exclui arquivos em diretórios de desenvolvimento comuns (como node_modules, .git, etc.) e arquivos temporários.

Upload Automático

Além do upload manual inicial, o plugin pode detectar e enviar automaticamente novos arquivos estáticos ou arquivos modificados:

• 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 tentará enviar novos arquivos estáticos quando um tema ou plugin for atualizado.

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

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.

Atualizando Arquivos Estáticos

Quando você atualiza temas, plugins ou outros componentes do seu site, os arquivos estáticos podem mudar. O plugin oferece várias maneiras de manter seus arquivos no R2 atualizados:

Escaneamento Manual

Para verificar manualmente se há novos arquivos ou arquivos modificados:

1. Vá para a página de Arquivos Estáticos no painel do plugin.
2. Clique no botão Escanear Novos Arquivos.
3. O plugin identificará os novos arquivos ou arquivos modificados que precisam ser enviados para o R2.
4. Clique em Enviar Novos Arquivos para iniciar o upload.

Indicador de Atualização

O plugin mantém um registro da última vez que cada arquivo foi modificado e enviado para o R2. Se detectar que um arquivo foi modificado após o último upload, ele será marcado para reenvio durante o próximo escaneamento.