Como adicionar um preloader no WordPress: Um guia passo a passo

Índice

Atualizado maio de 2026.

TL;DR: Uma animação de preloader preenche a lacuna enquanto os recursos pesados carregam. Em 2026, o plugin adequado é o WP Smart Preloader ou um snippet personalizado leve — mas ignore-o se o seu site já for rápido, pois um preloader mal ajustado prejudica ativamente o LCP.

Deve mesmo adicionar um preloader em 2026?

Antes de explicar o processo, deixe-me dar-lhe a resposta honesta: a maioria dos sites não deve adicionar um preloader.

As Core Web Vitals do Google medem o Largest Contentful Paint (LCP) — a rapidez com que o seu conteúdo mais visível aparece. Um preloader adia literalmente esse momento ao cobrir o ecrã com uma animação. Se o seu preloader correr apenas 1,5 segundos, isso são 1,5 segundos de penalização garantida no LCP em cada carregamento de página.

Quando um preloader faz sentido:

• O seu site é genuinamente pesado — grandes vídeos hero, mapas interativos, animações baseadas em canvas — e o estado em branco parece estragado sem um preloader.
• Tem uma barra de carregamento ou indicador de progresso que dá feedback real aos utilizadores, não apenas um spinner estético.

Quando ignorá-lo por completo:

• Tem um blog típico, portfólio ou loja WooCommerce. Acelere o site em vez disso — carregamento lazy de imagens, use uma CDN, mude para um alojamento mais rápido.
• O seu LCP já é inferior a 2,5 s. Adicionar um preloader só vai piorá-lo.

Se ainda assim quiser avançar, aqui está como fazê-lo corretamente na era Gutenberg / Full Site Editing.

O que é um preloader?

Um preloader é um elemento de interface — habitualmente um spinner animado, barra de progresso ou animação do logótipo da marca — exibido enquanto o navegador descarrega e renderiza os recursos da página. Texto e HTML carregam rapidamente; imagens e vídeo incorporado demoram mais. O preloader preenche essa lacuna para que os utilizadores vejam algo em vez de um layout em branco ou parcialmente renderizado.

No WordPress antigo (a era do editor clássico anterior à versão 5.0), os preloaders eram habitualmente adicionados editando header.php diretamente. Em 2026, com o Gutenberg e os temas FSE, editar os ficheiros do tema diretamente é fortemente desaconselhado — as atualizações do tema apagam as suas alterações. Use um plugin ou a abordagem Code Snippets.

Como adicionar um preloader no WordPress (métodos de 2026)

Método 1 — Plugin WP Smart Preloader

O WP Smart Preloader é um plugin gratuito no repositório WordPress.org que funciona com temas clássicos e temas de blocos. Verifique se ainda está a ser mantido ativamente e se é compatível com a sua versão atual do WordPress antes de o instalar — o estado de manutenção dos plugins pode mudar; consulte a data «Última atualização» na sua página do repositório.

1. No seu painel do WordPress, vá a Plugins → Adicionar novo e pesquise «WP Smart Preloader».
2. Instale-o e ative-o.
3. Vá a Definições → WP Smart Preloader.
4. Escolha um estilo de preloader entre as opções integradas, ou cole o seu próprio HTML/CSS personalizado.
5. Em «Show only on Home Page» — ative isto se quiser a animação apenas na página inicial. Executar um preloader em cada página multiplica o custo no LCP em todo o seu site.
6. Defina a Duração de exibição do loader. O padrão é 1500 ms. Recomendo reduzir — 800–1000 ms no máximo. Quanto mais tempo correr, pior será a sua pontuação LCP.
7. Clique em Guardar alterações e teste com o PageSpeed Insights antes e depois. Se o LCP piorar, remova o plugin.

Método 2 — Código personalizado via plugin Code Snippets

Se quiser controlo total sem um plugin dedicado ao preloader, use o plugin Code Snippets (gratuito, amplamente mantido) para injetar o markup e os estilos sem tocar nos ficheiros do tema.

Passo 1 — Adicionar o snippet HTML (PHP)

No Code Snippets, crie um novo snippet configurado para correr apenas no «Front-end»:

function ar_add_preloader() {
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Nota: wp_body_open só é acionado em temas que chamam wp_body_open() no seu template. A maioria dos temas de blocos modernos e dos temas clássicos mantidos faz isso. Se o seu preloader não aparecer, verifique se o seu tema suporta este hook.

Passo 2 — Adicionar o CSS

Crie um segundo snippet configurado em «Front-end only → CSS»:

#ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}
#ar-preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.ar-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top-color: #333;
    border-radius: 50%;
    animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin {
    to { transform: rotate(360deg); }
}

Passo 3 — Adicionar o JavaScript de dispensa

Crie um terceiro snippet configurado em «Front-end only → JavaScript»:

(function () {
    var el = document.getElementById('ar-preloader');
    if (!el) return;
    window.addEventListener('load', function () {
        el.classList.add('hidden');
        setTimeout(function () { el.remove(); }, 350);
    });
})();

Isto remove o preloader no evento window.load — após o carregamento das imagens e dos subframes — em vez de no DOMContentLoaded, que dispara cedo demais.

Método 3 — Tema de blocos / FSE: Use um bloco de sobreposição de carregamento ou um plugin

Se usar um tema Full Site Editing (Twenty Twenty-Four, Kadence, GeneratePress em modo de blocos, etc.), alguns plugins de construtores de páginas (Elementor, Kadence Blocks, Spectra) têm opções de preloader ou ecrã de carregamento integradas nas suas definições. Consulte primeiro a documentação do seu tema ou construtor — duplicar um preloader com um plugin separado por cima de um já integrado vai causar uma sobreposição dupla.

Lista de verificação de desempenho antes de publicar

Antes de publicar um preloader, verifique tudo o seguinte:

1. Execute um teste PageSpeed Insights numa página sem o preloader. Anote o seu LCP.
2. Ative o preloader e execute o mesmo teste. Se o LCP piorar mais de ~100 ms, reconsidere.
3. Mantenha a duração do preloader em 1000 ms ou menos. Qualquer coisa mais longa é um passivo de UX e de posicionamento.
4. Teste numa ligação móvel 4G throttled (Chrome DevTools → Rede → 4G rápido). Os preloaders parecem muito mais longos em ligações mais lentas.
5. Certifique-se de que o preloader está oculto para os leitores de ecrã (aria-hidden="true") e não prende o foco do teclado.

FAQ sobre preloaders no WordPress — 2026

Um preloader prejudica o SEO?

Sim, pode. As Core Web Vitals do Google — especificamente o LCP — são um sinal de classificação confirmado. Um preloader que fica à frente do seu conteúdo atrasa o LCP. Para a maioria dos sites WordPress padrão, eu ignorá-lo-ia por completo e investiria o tempo em otimização de imagens e cache. Se o seu site for suficientemente pesado para genuinamente precisar de um, mantenha a duração curta e monitorize as CWV na Google Search Console.

Os plugins de preloader funcionam com temas Full Site Editing (Gutenberg)?

A maioria sim, desde que o tema chame wp_body_open(). O editor de blocos do WordPress em si não muda como os eventos de carregamento de página funcionam no navegador. Verifique a versão «Testado até» do plugin no repositório WordPress.org para confirmar a compatibilidade com a sua versão do WordPress instalada — verifique isto no momento da instalação, pois o estado de compatibilidade muda.

Posso adicionar um preloader sem plugin em 2026?

Sim — o método Code Snippets descrito acima é a abordagem mais limpa sem plugin. Sobrevive às atualizações do tema, é fácil de desativar e dá-lhe controlo total sobre o markup e o tempo. Evite editar header.php diretamente no seu tema ativo ou filho; acrescenta dívida de manutenção e quebra se mudar de tema.

O meu preloader aparece em todas as páginas. Como o limito à página inicial?

No WP Smart Preloader, ative «Show only on Home Page» nas definições. Para a abordagem de código personalizado, envolva a chamada add_action com uma condicional:

function ar_add_preloader() {
    if ( ! is_front_page() ) return;
    echo '<div id="ar-preloader" aria-hidden="true"><div class="ar-spinner"></div></div>';
}
add_action( 'wp_body_open', 'ar_add_preloader' );

Leitura relacionada:

• Como acelerar o seu site WordPress
• Melhores plugins WordPress
• WordPress.com vs. WordPress.org

Este guia é parte de alejandrorioja.com — escrito por Alejandro Rioja, que agora desenvolve sistemas de agentes de IA para fundadores. Incluindo o agente que mantém este site atualizado. Como funciona →

Atualizado para maio de 2026

Uma breve nota de maio de 2026: o fluxo de trabalho descrito neste artigo foi verificado em relação ao estado atual das ferramentas e plataformas subjacentes. Onde ferramentas, interfaces ou funcionalidades específicas evoluíram, o conselho estrutural continua válido — a implementação terá um aspeto ligeiramente diferente em 2026. Se encontrar um passo que não corresponde ao que vê no ecrã, isso é provavelmente uma atualização de interface, não uma mudança fundamental de abordagem. Deixe uma nota através do formulário de contacto e eu corrijo-o explicitamente.