Preloader travado no WordPress: causas e como resolver
O preloader aparece mas não desaparece — a tela fica bloqueada e o conteúdo nunca carrega. Esse é um dos problemas mais frustrantes com preloaders. Aqui estão as causas mais comuns e como diagnosticar cada uma.
Diagnóstico rápido: onde começar
Antes de investigar causa por causa, faça esses três passos:
- Abra o DevTools do navegador (F12) → aba Console. Se houver erros em vermelho relacionados a JavaScript, você encontrou a causa.
- Aba Network → recarregue a página e verifique se algum recurso aparece com status vermelho (falha) ou fica "pending" indefinidamente.
- Teste em aba anônima sem extensões do navegador — algumas extensões interferem no carregamento.
Erro de JavaScript na página
Essa é a causa mais comum de preloader travado. Se qualquer script da página
lançar um erro não tratado antes do evento window.load, o
comportamento pode variar: o evento pode não disparar, ou o script do preloader
pode não executar corretamente.
Como verificar: abra o Console do DevTools e procure erros em vermelho. Observe o arquivo e a linha indicados — frequentemente não é o script do preloader em si, mas outro script na página.
Como resolver: corrija o erro JavaScript reportado. Se for em um plugin de terceiro, tente desativá-lo temporariamente para confirmar se é a causa.
Problema com o evento window.load
O evento window.load só dispara quando todos os recursos da página
foram carregados — incluindo imagens, iframes, scripts externos e fontes.
Se qualquer um desses recursos nunca terminar de carregar, o evento nunca dispara.
Esse é o motivo pelo qual o safety timeout é essencial. Um preloader sem timeout máximo fica travado sempre que um recurso falha ou demora além do esperado.
Recursos externos lentos ou com falha
Fontes externas, iframes de mapas (Google Maps), vídeos do YouTube embeddados,
scripts de analytics de terceiros — qualquer um pode demorar ou falhar e impedir
o disparo do window.load.
Como identificar: na aba Network do DevTools, filtre por "Other" ou "Fetch/XHR"
e observe o que está demorando. Recursos de terceiros com pending
por mais de 5 segundos são suspeitos.
Como resolver:
- Configure um safety timeout no preloader para cobrir esse cenário
- Carregue iframes e scripts externos de forma lazy (com
loading="lazy"ou intersection observer) - Se o recurso lento for dispensável, remova-o
Imagens sem resposta
Imagens quebradas (404) ou imagens de servidores lentos também impedem o
window.load. No WordPress, isso é comum quando:
- Uma imagem foi removida da biblioteca de mídia mas ainda referenciada no HTML
- O URL de uma imagem aponta para um servidor externo que está lento ou fora do ar
- Imagens de alta resolução não otimizadas demoram muito em conexões lentas
Como verificar: na aba Network, filtre por "Images" e observe quais têm status 404 ou ficam carregando por muito tempo. Para 404, corrija ou remova a referência no HTML.
Cache e CDN
Depois de alterar as configurações do preloader, o cache pode estar servindo uma versão antiga da página onde o preloader funcionava de forma diferente — ou pior, onde o script novo não estava incluído.
Regra: sempre limpe todos os caches após alterar o preloader. Isso inclui:
- Cache do plugin de cache (WP Rocket, LiteSpeed, W3 Total Cache, etc.)
- Cache do CDN (Cloudflare, BunnyCDN, etc.)
- Cache do navegador (Ctrl+Shift+R para forçar reload sem cache)
- Cache do servidor (se aplicável)
Para uma análise completa da compatibilidade com plugins de cache, veja: Preloader no WordPress funciona com plugins de cache?
Conflitos com outros plugins
Conflitos entre plugins JavaScript são raros mas acontecem. O sintoma é o preloader funcionando corretamente em um ambiente limpo e travando em produção com todos os outros plugins ativos.
Método de diagnóstico (bisseção):
- Desative metade dos plugins ativos
- Verifique se o problema persiste
- Se persistiu, desative a outra metade dos plugins restantes
- Se resolveu, reative um por um até encontrar o conflitante
Plugins que frequentemente causam conflitos com preloaders: otimizadores de JavaScript (defer/delay), alguns builders de página em modo específico de otimização.
Ausência de safety timeout — o problema mais sério
Se o preloader do seu site não tem safety timeout configurado, qualquer recurso lento ou com falha vai travar a tela indefinidamente. Para o usuário, o site simplesmente "não carrega".
O safety timeout é uma proteção simples: após N segundos, o preloader desaparece independentemente do estado do carregamento. Isso garante que pelo menos o usuário consiga ver o conteúdo, mesmo que com alguns recursos ainda carregando.
Plugins de otimização (defer/delay de JavaScript)
Plugins como WP Rocket, LiteSpeed Cache e Autoptimize têm opções de defer e delay para scripts JavaScript. Essas opções podem atrasar ou impedir a execução do script do preloader, fazendo com que o preloader apareça mas o script que o remove nunca execute.
Como resolver: na maioria dos plugins de otimização, é possível criar exceções (whitelist) para scripts específicos. Adicione o script do preloader à lista de exceções para que ele não seja afetado pelo defer/delay.
O handle (nome) do script varia por plugin. Em plugins de preloader bem documentados, esse identificador é informado na documentação.
Smart Preload DL tem safety timeout configurável
Defina o tempo máximo de exibição e garanta que seus visitantes nunca fiquem com a tela travada — mesmo que algum recurso falhe no carregamento.