Preloader no WordPress funciona com plugins de cache?
Plugins de cache são essenciais para performance — mas podem interferir em preloaders se configurados de forma agressiva. Entenda o que pode dar errado e como garantir que os dois coexistam sem problemas.
Como cache de página funciona
Plugins de cache de página como WP Rocket, LiteSpeed Cache e WP Super Cache funcionam gerando arquivos HTML estáticos das suas páginas e servindo-os diretamente, sem processar o PHP do WordPress a cada visita.
Isso é excelente para performance — mas cria um detalhe importante para preloaders: o HTML da página em cache é gerado em um momento específico e pode não refletir alterações feitas posteriormente nas configurações do preloader.
Em termos práticos: se você altera a cor ou a animação do preloader mas o cache não é limpo, os visitantes continuam vendo o preloader antigo da página em cache.
O principal ponto de conflito: defer e delay de JavaScript
Esse é o cenário mais crítico. A maioria dos plugins de cache tem opções para adiar (defer) ou atrasar (delay) a execução de scripts JavaScript. O objetivo é melhorar métricas de performance carregando scripts menos críticos depois do conteúdo principal.
O problema com preloaders: o script que remove o preloader da tela precisa executar assim que a página termina de carregar. Se esse script é atrasado ou diferido para depois da interação do usuário (comportamento comum no "delay JS"), o preloader permanece na tela mesmo após o conteúdo estar pronto.
Como resolver
Adicione o script do preloader à lista de exclusões do defer/delay no plugin de cache. Cada plugin tem uma interface diferente para isso:
- WP Rocket: Configurações → Otimização de arquivos → Excluir scripts do delay
- LiteSpeed Cache: Page Optimization → JS Excludes
- W3 Total Cache: Performance → Minify → JS Minify Exclusions
O identificador do script a excluir varia por plugin de preloader. Consulte a documentação do plugin para encontrar o handle ou o nome do arquivo JS.
Minificação e concatenação de CSS/JS
Plugins de cache frequentemente minificam e concatenam arquivos CSS e JS — juntando vários arquivos em um único para reduzir requisições.
Isso geralmente não causa problemas para preloaders. A concatenação preserva a lógica do código — apenas remove espaços e comentários. No entanto, em casos raros, a concatenação pode criar conflitos de escopo de variáveis entre scripts que foram projetados para ser independentes.
Se após ativar a minificação o preloader parar de funcionar, tente excluir o arquivo do preloader da concatenação e veja se o problema persiste.
CDN e cache de assets
Quando um CDN como Cloudflare, BunnyCDN ou KeyCDN faz cache dos assets (CSS e JS), alterações nesses arquivos podem não refletir imediatamente para os visitantes. O CDN serve a versão antiga até o cache expirar ou ser limpo manualmente.
Após qualquer atualização do preloader — especialmente de versão do plugin — limpe o cache do CDN. A maioria dos painéis de CDN tem botão de "purge all cache".
Plugins de preloader bem implementados usam versionamento nos assets (query strings
como ?ver=1.2.0), o que força o navegador e o CDN a baixar a versão
nova após uma atualização.
Plugins mais comuns: o que observar
| Plugin de cache | Principal risco com preloader | O que verificar |
|---|---|---|
| WP Rocket | Delay JavaScript (delay) | Excluir script do preloader do delay |
| LiteSpeed Cache | Defer de JS, Critical CSS | JS Excludes; verificar se Critical CSS bloqueia exibição |
| W3 Total Cache | Minificação / concatenação | Excluir arquivo JS do preloader da concatenação se necessário |
| WP Super Cache | Cache de página | Limpar cache após alterações no preloader |
| Autoptimize | Concatenação de JS | Adicionar handle do preloader às exclusões |
| Cloudflare | Cache de assets (CSS/JS) | Purge após atualização do plugin |
Limpeza de cache após alterações
Sempre que você alterar qualquer configuração do preloader — cor, animação, páginas de exibição, tempo de fade-out — execute essa sequência:
- Limpe o cache do plugin de cache (WP Rocket, LiteSpeed, etc.)
- Limpe o cache do CDN (Cloudflare, BunnyCDN, etc.) se estiver usando
- Teste em aba anônima (para não usar o cache do seu navegador)
- Faça um hard reload (Ctrl+Shift+R) caso veja o comportamento antigo
Boas práticas gerais
Um preloader bem construído é naturalmente mais resistente a ambientes com cache agressivo:
- JavaScript vanilla — sem dependência de jQuery ou outras bibliotecas que podem ser afetadas pelo defer
- Script pequeno e sem efeitos colaterais — faz exatamente o que precisa e nada mais
- Assets versionados — garante que atualizações sejam refletidas mesmo com cache
- Sem requisições externas — nada a ser bloqueado por CSP ou CDN
- Safety timeout configurado — garante que o preloader some mesmo se o JS for atrasado
Compatível com plugins de cache por design
O Smart Preload DL usa JavaScript vanilla, sem jQuery, assets versionados e safety timeout — características que minimizam conflitos com qualquer plugin de cache.
Perguntas frequentes
?nocache=1) para forçar o servidor a gerar a página sem cache.