Come Aggiungere un Preloader in WordPress: Guida Passo Passo

Indice dei contenuti

Aggiornato maggio 2026.

TL;DR: Un’animazione preloader colma il vuoto mentre le risorse pesanti si caricano. Nel 2026 il plugin giusto è WP Smart Preloader o uno snippet personalizzato leggero — ma saltalo se il tuo sito è già veloce, perché un preloader mal configurato penalizza attivamente l’LCP.

Dovresti Davvero Aggiungere un Preloader nel 2026?

Prima di spiegare il come, lasciami darti la risposta onesta: la maggior parte dei siti non dovrebbe aggiungere un preloader.

I Core Web Vitals di Google misurano il Largest Contentful Paint (LCP) — quanto velocemente appare il contenuto più visibile. Un preloader ritarda letteralmente quel rendering coprendo lo schermo con un’animazione. Se il preloader dura anche solo 1,5 secondi, sono 1,5 secondi di penalità garantita sull’LCP a ogni caricamento pagina.

Quando un preloader ha senso:

• Il tuo sito è davvero pesante — grandi video hero, mappe interattive, animazioni basate su canvas — e lo stato grezzo vuoto sembra rotto senza di esso.
• Hai una barra di caricamento o un indicatore di progresso che fornisce feedback reale agli utenti, non solo uno spinner estetico.

Quando saltarlo del tutto:

• Hai un tipico blog, portfolio o negozio WooCommerce. Velocizza il sito — carica le immagini in lazy load, usa una CDN, passa a un host più veloce.
• Il tuo LCP è già sotto i 2,5 s. Aggiungere un preloader lo peggiorerà solo.

Se vuoi comunque procedere, ecco come farlo correttamente nell’era Gutenberg / Full Site Editing.

Cos’è un Preloader?

Un preloader è un elemento UI — di solito uno spinner animato, una barra di avanzamento o un’animazione del logo brandizzato — visualizzato mentre il browser scarica e renderizza le risorse della pagina. Testo e HTML si caricano velocemente; immagini e video incorporati richiedono più tempo. Il preloader colma quel divario in modo che gli utenti vedano qualcosa invece di un layout vuoto o parzialmente renderizzato.

Nei vecchi WordPress (i giorni dell’editor classico pre-5.0), i preloader venivano comunemente aggiunti modificando direttamente header.php. Nel 2026, con Gutenberg e i temi FSE, modificare direttamente i file del tema è fortemente sconsigliato — gli aggiornamenti del tema cancellano le modifiche. Usa invece un plugin o l’approccio Code Snippets.

Come Aggiungere un Preloader in WordPress (Metodi 2026)

Metodo 1 — Plugin WP Smart Preloader

WP Smart Preloader è un plugin gratuito nel repository WordPress.org che funziona con temi classici e temi a blocchi. Verifica che sia ancora attivamente mantenuto e compatibile con la tua versione attuale di WordPress prima di installarlo — lo stato di manutenzione del plugin può cambiare; controlla la data “Ultimo aggiornamento” sulla pagina del repository.

1. Nella dashboard di WordPress vai su Plugin → Aggiungi nuovo e cerca “WP Smart Preloader”.
2. Installa e attivalo.
3. Vai su Impostazioni → WP Smart Preloader.
4. Scegli uno stile di preloader dalle opzioni integrate, o incolla il tuo HTML/CSS personalizzato.
5. In “Mostra solo nella Home Page” — abilitalo se vuoi l’animazione solo nella homepage. Eseguire un preloader su ogni pagina moltiplica il costo LCP su tutto il sito.
6. Imposta la Durata di visualizzazione del loader. Il default è 1500 ms. Consiglio di abbassarlo — massimo 800–1000 ms. Più a lungo viene eseguito, peggiore è il punteggio LCP.
7. Clicca Salva modifiche e testa con PageSpeed Insights prima e dopo. Se l’LCP peggiora, rimuovi il plugin.

Metodo 2 — Codice Personalizzato tramite Plugin Code Snippets

Se vuoi il controllo completo senza un plugin preloader dedicato, usa il plugin Code Snippets (gratuito, ampiamente mantenuto) per iniettare il markup e gli stili senza toccare i file del tema.

Passaggio 1 — Aggiungi lo snippet HTML (PHP)

In Code Snippets, crea un nuovo snippet impostato per essere eseguito solo sul “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 si attiva solo su temi che chiamano wp_body_open() nel loro template. La maggior parte dei temi a blocchi moderni e dei temi classici mantenuti lo fa. Se il preloader non appare, verifica se il tuo tema supporta questo hook.

Passaggio 2 — Aggiungi il CSS

Crea un secondo snippet impostato su “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); }
}

Passaggio 3 — Aggiungi il JavaScript di chiusura

Crea un terzo snippet impostato su “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);
    });
})();

Questo rimuove il preloader all’evento window.load — dopo che le immagini e i subframe si sono caricati — piuttosto che su DOMContentLoaded, che si attiva troppo presto.

Metodo 3 — Tema a Blocchi / FSE: Usa un Blocco Loading Overlay o un Plugin

Se stai usando un tema Full Site Editing (Twenty Twenty-Four, Kadence, GeneratePress in modalità blocchi, ecc.), alcuni plugin page builder (Elementor, Kadence Blocks, Spectra) hanno opzioni preloader o schermata di caricamento integrate nelle loro impostazioni. Controlla prima la documentazione del tuo tema o builder — duplicare un preloader con un plugin separato sopra uno integrato causerà un doppio overlay.

Checklist delle Prestazioni Prima di Andare Live

Prima di pubblicare un preloader, verifica tutto quanto segue:

1. Esegui un test PageSpeed Insights su una pagina senza il preloader. Annota il tuo LCP.
2. Abilita il preloader e ripeti il test. Se l’LCP peggiora di più di ~100 ms, riconsideralo.
3. Mantieni la durata del preloader a 1000 ms o meno. Qualsiasi valore superiore è una responsabilità per UX e ranking.
4. Testa su una connessione mobile 4G throttled (Chrome DevTools → Rete → 4G veloce). I preloader sembrano molto più lunghi su connessioni più lente.
5. Assicurati che il preloader sia nascosto ai lettori di schermo (aria-hidden="true") e non intrappoli il focus della tastiera.

FAQ sul Preloader WordPress — 2026

Un preloader danneggia la SEO?

Sì, può farlo. I Core Web Vitals di Google — in particolare l’LCP — sono un segnale di ranking confermato. Un preloader che si trova davanti al tuo contenuto ritarda l’LCP. Per la maggior parte dei siti WordPress standard lo salterei del tutto e investirei il tempo nell’ottimizzazione delle immagini e nel caching. Se il tuo sito è abbastanza pesante da averne davvero bisogno, mantieni la durata breve e monitora i CWV in Google Search Console.

I plugin preloader funzionano con i temi Full Site Editing (Gutenberg)?

La maggior parte sì, purché il tema chiami wp_body_open(). L’editor a blocchi di WordPress stesso non cambia il modo in cui funzionano gli eventi di caricamento pagina nel browser. Controlla la versione “Testato fino a” del plugin nel repository WordPress.org per confermare la compatibilità con la tua versione di WordPress installata — verifica questo al momento dell’installazione, poiché lo stato di compatibilità cambia.

Posso aggiungere un preloader senza un plugin nel 2026?

Sì — il metodo Code Snippets descritto sopra è l’approccio più pulito senza plugin. Sopravvive agli aggiornamenti del tema, è facile da disabilitare e ti dà il controllo completo sul markup e sui tempi. Evita di modificare header.php direttamente nel tuo tema attivo o child theme; aggiunge debito di manutenzione e si rompe se cambi tema.

Il mio preloader appare su ogni pagina. Come lo limito solo alla homepage?

In WP Smart Preloader, seleziona “Mostra solo nella Home Page” nelle impostazioni. Per l’approccio con codice personalizzato, racchiudi la chiamata add_action con una condizionale:

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' );

Letture correlate:

• Come Velocizzare il Tuo Sito WordPress
• I Migliori Plugin WordPress
• WordPress.com vs. WordPress.org

Questa guida fa parte di alejandrorioja.com — scritta da Alejandro Rioja, che ora costruisce sistemi di agenti AI per fondatori. Incluso l’agente che mantiene questo sito aggiornato. Come funziona →

Aggiornato per maggio 2026

Una breve nota da maggio 2026: il flusso di lavoro descritto in questo post è stato verificato rispetto allo stato attuale degli strumenti e delle piattaforme sottostanti. Dove specifici strumenti, UI o funzionalità si sono evoluti, il consiglio strutturale è ancora valido — l’implementazione sembrerà leggermente diversa nel 2026. Se arrivi a un passaggio che non corrisponde a quello che vedi sullo schermo, è probabilmente un aggiornamento dell’interfaccia, non un cambiamento fondamentale nell’approccio. Lascia un messaggio tramite il modulo di contatto e lo aggiornerò esplicitamente.