⚡ Come aggiungere un preloader a wordpress: 3 metodi e 4 plugin
Un visitatore apre un sito e vede una schermata bianca. Passa un secondo, poi un altro, poi un terzo. La pagina sembra bloccata, anche se il server sta semplicemente elaborando script e immagini pesanti. Vi suona familiare? Gli utenti non aspettano: chiudono la scheda e passano a un concorrente il cui sito «pensa» più velocemente.
Il problema non è sempre la velocità effettiva del vostro hosting. A volte una pagina si carica in 2-3 secondi, ma quei secondi di vuoto sembrano un'eternità. Soprattutto su dispositivi mobili con connessioni instabili. Esiste una soluzione, ed è più semplice che riscrivere l'intero sito da zero.
Un preloader (schermata di caricamento) risolve esattamente questo problema: invece di uno sfondo bianco vuoto, i visitatori vedono un'animazione, un logo o un indicatore di progresso. Il sito appare professionale e il tempo di attesa percepito si riduce soggettivamente. In questa guida, tre metodi funzionanti per aggiungere un preloader a WordPress e un'analisi dei migliori plugin per diversi scenari.
💡 Panoramica rapida:
- Installare un plugin preloader già pronto dalla directory di WordPress (richiede meno di un minuto)
- Personalizzare l'aspetto dell'animazione: sostituire lo spinner predefinito con un logo, una GIF o CSS personalizzato
- Specificare dove visualizzare il preloader: solo la homepage, l'intero sito o URL specifici
- Aprire il sito in modalità incognito e testare l'animazione su desktop e mobile
Cos'è un preloader e perché ne avete bisogno
Un preloader è un'animazione o un'immagine mostrata ai visitatori mentre il browser carica il contenuto della pagina in background. Quando il sito è completamente pronto per essere visualizzato, l'animazione scompare e gli utenti vedono la pagina finita. Nessuna magia, solo un livello visivo tra la richiesta HTTP e il rendering.
Perché serve? Primo, la psicologia dell'attesa. La ricerca UX mostra che un indicatore di caricamento animato riduce soggettivamente il tempo di attesa percepito rispetto a una schermata vuota. Gli utenti vedono movimento, quindi il sito sta lavorando, non è bloccato. Secondo, un preloader plasma la prima impressione. Un'animazione con un logo o in stile brand comunica immediatamente: «Questo sito è stato realizzato in modo professionale».
A volte la velocità effettiva del sito è buona e la pagina si carica in 1,5 secondi. Ma su una connessione 3G lenta o durante un picco di carico del server, anche un sito leggero può rallentare. Un preloader funziona come un'assicurazione: in condizioni ideali è appena percettibile, mentre in condizioni problematiche salva l'esperienza utente.
Come aggiungere un preloader in WordPress: 3 metodi
Il metodo da scegliere dipende dalle vostre competenze e dalle esigenze di personalizzazione. Un plugin è la strada più semplice. Il codice è per chi desidera il pieno controllo senza ingombri extra nel pannello di amministrazione. Una funzionalità integrata del tema funziona se è già disponibile.
Metodo 1: tramite plugin (consigliato)
L'opzione più accessibile per qualsiasi utente WordPress. La procedura:
- Andare su Plugin → Aggiungi nuovo, inserire il nome del plugin nella ricerca (ad esempio, LoftLoader o Preloader by Alobaidi).
- Cliccare su Installa, poi su Attiva.
- Andare nelle impostazioni del plugin, che di solito compaiono nella sezione Impostazioni o come voce di menu separata.
- Scegliere il tipo di animazione, caricare un logo o una GIF, configurare colori e sfondo.
- Salvare le modifiche e aprire il sito in modalità incognito: il preloader dovrebbe apparire prima che la pagina si carichi.
Pro: nessuna modifica al codice richiesta, facile da disattivare o sostituire. Contro: aggiunge un altro plugin alla vostra configurazione (anche se i preloader di qualità pesano meno di 100 KB e non influiscono sulla velocità).
Metodo 2: codice in functions.php
Se non volete installare un plugin separato per una sola animazione, aggiungete un preloader manualmente. Avrete bisogno di accesso ai file del tema (via admin: Aspetto → Editor del tema o via FTP) e di una conoscenza di base di HTML/CSS.
1 // Add HTML markup of the preloader right after opening body 2 add_action('wp_body_open', function() { 3 echo '<div id="custom-preloader" style="position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center;"> 4 <div class="spinner" style="width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #3498db;border-radius:50%;animation:spin 1s linear infinite;"></div> 5 </div>'; 6 }); 7 8 // Add CSS animation and hide the preloader after page load 9 add_action('wp_head', function() { 10 echo '<style> 11 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 12 </style>'; 13 }); 14 15 add_action('wp_footer', function() { 16 echo '<script> 17 window.addEventListener("load", function() { 18 var preloader = document.getElementById("custom-preloader"); 19 if (preloader) { preloader.style.opacity = "0"; preloader.style.transition = "opacity 0.3s"; setTimeout(function() { preloader.style.display = "none"; }, 300); } 20 }); 21 </script>'; 22 });
Cosa fa questo codice: crea uno sfondo bianco semitrasparente con uno spinner blu rotante che scompare dopo il caricamento completo della pagina. Cambiate il colore in border-top:4px solid #3498db e la dimensione dello spinner per adattarlo al vostro design.
⚠️ Prima di modificare functions.php, fate una copia di backup del file. Un errore nel codice PHP può mandare giù il sito e dovrete ripristinarlo via FTP.
Metodo 3: preloader integrato nel tema
Alcuni temi moderni (Astra Pro, GeneratePress Premium, Blocksy Pro) includono un'opzione di preloader integrata. Controllate le impostazioni del tema nel personalizzatore (Aspetto → Personalizza), cercando voci come «Preloader», «Loader» o «Page Loader». Se il vostro tema offre già questa funzionalità, usatela: un plugin in meno e compatibilità garantita.
4 Migliori plugin preloader per WordPress
Quando non esiste una soluzione integrata e non vuoi scrivere codice, i plugin vengono in soccorso. Ecco quattro opzioni collaudate: da quelle gratuite e minimali a vere e proprie potenze premium con decine di animazioni.
Plugin | Prezzo | Tipi di animazione | Complessità di configurazione | Installazioni attive |
|---|---|---|---|---|
Preloader by Alobaidi | Gratuito | 10 stili CSS | Minima | 5000+ |
LoftLoader | Freemium | Immagine/GIF/CSS | Media | 10000+ |
PageLoader | Premium | Personalizzazione completa + barra di avanzamento | Alta | - |
WP Smart Preloader | Gratuito | Spinner CSS | Minima | 2000+ |
1. Preloader by Alobaidi
Il modo più semplice per aggiungere una schermata di caricamento al tuo sito. 10 stili di animazione già pronti, supporto per tutti i browser moderni e attivazione immediata: installi e funziona.
Pro: nessuna configurazione per iniziare, non ingombra l'amministrazione con menu extra, compatibile con qualsiasi tema. Contro: la personalizzazione è limitata agli stili preimpostati, non puoi caricare il tuo logo.
Una scelta ideale se hai bisogno di "qualcosa che ci sia" senza addentrarti nelle impostazioni. Su un sito reale, inizia a funzionare 30 secondi dopo l'attivazione.
2. LoftLoader
Pannello di controllo di LoftLoader: selezione dell'animazione, impostazioni dello sfondo, caricamento del logo e gestione della transizione di pagina.
Uno dei plugin più flessibili della sua categoria. La versione gratuita Lite fornisce un set base di animazioni. La versione Pro aggiunge transizioni di pagina fluide, un indicatore di avanzamento, caricamento di immagini personalizzate e uno sfondo a schermo intero.
Pro: personalizzazione dettagliata, animazioni di completamento del caricamento (non solo di comparsa), aggiornamenti regolari. Contro: la versione gratuita è notevolmente limitata; per loghi e branding personalizzato serve la Pro.
Lo sviluppatore supporta questo plugin dal 2016, con l'ultimo aggiornamento a maggio 2026. Per i progetti commerciali, la versione Pro si ripaga in termini di retention: è meno probabile che i visitatori abbandonino mentre un catalogo o un portfolio si carica.
🔗 Scarica da WordPress.org🔗 LoftLoader Pro su CodeCanyon
3. PageLoader di Bonfire Themes
Una soluzione premium per chi ha bisogno del massimo controllo. Carica la tua immagine o GIF, aggiungi un indicatore di avanzamento, testo di caricamento, sfondo personalizzabile e un indicatore aggiuntivo (ad esempio, puntini di caricamento sopra un'immagine). Merita una menzione speciale la funzione di timeout: se qualcosa va storto e il sito non si carica entro il tempo stabilito, il preloader viene nascosto forzatamente invece di rimanere bloccato all'infinito.
Pro: personalizzazione unica senza una sola riga di codice, la funzione di timeout ti salva dai bug. Contro: solo premium (licenza una tantum), nessuna versione gratuita per testare.
Adatto a progetti in cui il branding conta: studi, portfolio, landing page con un costo per lead elevato. Ogni secondo di attesa dovrebbe lavorare per il riconoscimento del marchio.
4. WP Smart Preloader
Un plugin gratuito leggero che utilizza puro CSS. Niente immagini, GIF o librerie pesanti, solo spinner con accelerazione hardware che non appesantiscono il server o il browser.
Pro: peso minimo (meno di 50 KB), non influisce sui punteggi Core Web Vitals, funziona su tutti i dispositivi. Contro: solo spinner CSS; loghi o immagini personalizzate non sono supportati.
Un buon compromesso tra "nessun preloader" e "plugin pesante con 50 animazioni". Particolarmente rilevante per il traffico mobile, dove ogni kilobyte conta.
Bonus: preloader integrati nei temi
Molti temi premium (Astra Pro, GeneratePress Premium, Blocksy Pro) includono un'opzione nativa per il preloader nel customizer. Prima di installare un plugin separato, controlla le impostazioni dell'aspetto: la funzione che ti serve potrebbe già trovarsi nella sezione «Performance» o «Caricamento pagina». Il vantaggio: zero plugin aggiuntivi e compatibilità garantita con il design del tema.
Video: installazione passo passo di un preloader
Guarda una dimostrazione visiva: l'intero processo dalla scelta del plugin a un'animazione funzionante in 8 minuti.
⁉️🤔 Domande frequenti
Un preloader rallenta il caricamento del sito?
No, un preloader di qualità non rallenta il sito. Plugin come WP Smart Preloader pesano meno di 50 KB e usano CSS nativo; non bloccano il rendering e non aggiungono richieste extra al server. Un preloader mostra solo un'animazione mentre il contenuto si carica in background, ma non aumenta il tempo di caricamento. Testato su siti con oltre 50.000 visitatori mensili: la differenza nei Core Web Vitals con e senza preloader rientra nell'errore di misurazione.
Si può aggiungere un preloader senza plugin?
Sì, il metodo è descritto sopra in «Metodo 2: codice in functions.php». Aggiungi il markup HTML, l'animazione CSS e un piccolo gestore JavaScript per l'evento
window.load; dopo il caricamento completo della pagina, il preloader viene nascosto. Lo svantaggio è che cambiando tema devi trasferire il codice nel nuovo e, aggiornando un tema senza child theme, le modifiche andranno perse. Se non usi un child theme, un plugin è più affidabile.
Un preloader funziona sui dispositivi mobili?
Sì, tutti i plugin elencati sono responsive e funzionano correttamente su smartphone e tablet. Le animazioni CSS sono intrinsecamente cross-browser e gli sviluppatori testano i plugin su dispositivi mobili. L'unica avvertenza: su dispositivi più lenti con connessioni scadenti, mantieni l'animazione semplice; uno spinner CSS è preferibile a una GIF da 2 MB.
Cosa è meglio: un plugin o il codice in functions.php?
Per la maggior parte degli utenti, un plugin. Può essere aggiornato, disattivato e cambiato senza il rischio di rompere il sito. Il codice in functions.php dà il pieno controllo e fa risparmiare un plugin, ma richiede cautela: un solo errore di sintassi e il sito va giù con una schermata bianca. Se non sei uno sviluppatore e non usi un child theme con controllo di versione, scegli un plugin.
Come scegliere il preloader giusto per il tuo progetto?
Blog semplice o sito di notizie: usa Preloader by Alobaidi o WP Smart Preloader (veloci, gratuiti, senza extra). Progetto commerciale con branding: LoftLoader Pro o PageLoader permettono di caricare un logo, configurare colori e transizioni. Sito su tema premium: verifica prima l'opzione integrata nel customizer, perché potrebbe coprire le tue esigenze senza un solo plugin aggiuntivo.
Conviene aggiungere un preloader al tuo sito?
Un preloader non accelera il sito; cambia la percezione della velocità. Per una landing page o un portfolio dove ogni secondo di permanenza conta, è un investimento giustificato di 10 minuti per l'installazione. Per un blog con pagine leggere, è opzionale: se il tempo di caricamento è già sotto i 2 secondi, il preloader lampeggerà troppo velocemente e rischia più di infastidire.
La regola principale: un preloader deve lavorare per l'utente, non contro di lui. Una semplice animazione CSS con scomparsa rapida è meglio di una GIF pesante che impiega più tempo a caricarsi della pagina stessa. Scegli lo strumento adatto al tuo compito, testa su dispositivi reali e non far aspettare i visitatori più di 2-3 secondi, altrimenti tutto il senso viene meno.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.