La velocità di caricamento della pagine ha un ruolo fondamentale nelle prestazioni del tuo sito web. Se il caricamento completo di una pagina richiede più di un secondo o due, può frustrare gli utenti abbastanza da fargli abbandonare il tuo sito web. Può essere utile che il visitatore visualizzi qualcosa di interessante mentre la pagina termina il caricamento.
Un’animazione di caricamento della pagina, o “animazione preloader”, aiuta a informare i visitatori che una pagina si sta caricando (non è bloccata) e aumenta la probabilità che gli stessi rimangano sul sito senza abbandonarlo, migliorando l’esperienza utente (UX) e si riducendo la frequenza di rimbalzo .
In questo post, vedremo i vantaggi delle animazioni preloader e quando utilizzarne una. Quindi ti guideremo attraverso le diverse opzioni per aggiungere un’animazione preloader su WordPress.
Iniziamo subito!
Che cos’è un’animazione Preloader?
Un’animazione preloader segnala gli utenti che una pagina si sta caricando attivamente. È una semplice animazione che può essere utilizzata come indicatore di avanzamento per le pagine che caricano solo determinati contenuti alla volta.
I preloader di WordPress offrono ai visitatori qualcosa di più divertente e interessante da guardare in pochi secondi mentre attendono il completamento del caricamento dell’intera pagina. In alcuni casi, possono persino offrire una stima di quanto tempo rimane per caricare la pagina stessa.
Quando dovrei usare un preloader?
Un preloader è una scelta intelligente quando si dispone di un sito WordPress con video o immagini che impiega un pò più tempo a caricarsi rispetto al normale. In questo modo, i visitatori saranno rassicurati sul fatto che il tuo sito funziona come previsto ed è attivo.
Tuttavia, se il tuo sito è principalmente basato su testo, potrebbe non essere necessaria un’animazione preloader e potrebbe avere più senso concentrarsi sul miglioramento della velocità di caricamento della pagina .
2 Opzioni per aggiungere preloader su WordPress
Esistono due metodi principali che è possibile utilizzare per aggiungere un’animazione preloader al sito WordPress. È possibile utilizzare un plugin, l’opzione più semplice, oppure eseguire l’attività manualmente tramite codice. Diamo un’occhiata a come operare in entrambi i casi.
Opzione 1: aggiungere un’animazione preloader utilizzando un plugin
L’aggiunta di un preloader tramite un plugin è l’opzione più rapida e semplice per la maggior parte degli utenti. Ci sono diversi plugin che è possibile utilizzare, ma consigliamo WP Smart Preloader :
WP Smart Preloader è un plugin gratuito e altamente personalizzabile. Utilizza CSS e markup HTML essenziale per aiutare a ridurre il rischio che gli utenti lascino il tuo sito web durante il caricamento dei contenuti. Nei seguenti passaggi, ti mostreremo come funziona.
Passaggio 1: Scarica WP Smart Preloader
Puoi scaricare il plugin WP Smart Preloader tramite la directory dei plugin di WordPress. Quindi puoi caricare il file .zip sul tuo sito WordPress, andando su Plugin> Aggiungi nuovo> Carica plugin nella dashboard di amministrazione:
Oppure puoi cercare il plugin tramite la barra di ricerca nella schermata Plugin> Aggiungi nuovo :
In entrambi i casi, una volta installato il plugin, fare clic sul pulsante Attiva . È quindi possibile individuare le sue opzioni in Impostazioni> WP Smart Preloader .
Passaggio 2: seleziona il tuo stile
Nella pagina Impostazioni di WP Smart Preloader , la prima cosa da fare è selezionare uno stile per il preloader. Nel menu Seleziona Preloader , troverai un menu a discesa che ti permetterà di scegliere tra sei opzioni di stile, oltre a un’opzione per l’animazione personalizzata:
Dopo aver selezionato uno stile, puoi visualizzarne l’anteprima nella finestra in basso. Se vuoi aggiungere la tua animazione personalizzata, puoi includere il tuo codice HTML nella sezione Animazione personalizzata :
Alla fine di questa schermata, puoi impostare la durata del loader stesso e l’effetto ‘dissolvenza’:
Se si lasciano vuoti questi campi, i valori predefiniti verranno impostati rispettivamente a 1500 millisecondi (1,5 secondi) e 2500 millisecondi (2,5 secondi). Al termine, fai clic sul pulsante Salva modifiche .
Passaggio 3: visualizza in anteprima l’animazione del tuo preloader
Una volta terminata la configurazione delle impostazioni, visita il tuo sito WordPress in una nuova scheda del browser per visualizzare l’anteprima dell’animazione preloader. Puoi tornare indietro per apportare eventuali modifiche stilistiche, se necessario. Una volta che sei soddisfatto del preloader, sarà configurato e pronto per l’uso.
Opzione 2: aggiungi manualmente un’animazione del preloader
Se non sei interessato all’utilizzo di un plugin, puoi comunque aggiungere manualmente questa funzione al tuo sito web. Il vantaggio principale della creazione di un preloader personalizzato è la maggiore flessibilità nel modo in cui è progettato.
Certo, è anche un processo più difficile. Vediamo quindi come creare, caricare e formattare un’animazione preloader personalizzata per il tuo sito WordPress.
Step 1: decidi il tipo di animazione
Il primo passo è decidere quale tipo di animazione utilizzerai. Potresti cercare altri strumenti di animazione preloader per avere un’idea dello stile che ti piace. Ci sono alcune animazioni gratuite che puoi usare ed esplorare su Codepen , che può essere un ottimo modo per ottenere alcune idee.
Passaggio 2: sviluppa o scarica l’animazione
Per sviluppare la tua animazione, puoi utilizzare uno strumento come Photoshop per creare una GIF o un’animazione di preloader rotante.
Consigliamo quest’ultimo approccio, poiché l’aggiunta di un preloader GIF al tuo sito WordPress viene eseguita al meglio con un plugin. Oltre a Codepen (menzionato sopra), puoi anche scaricare un’animazione da siti come Spinkit e LoadLab .
Per questo tutorial, useremo un’animazione del preloader di Spinkit. Indipendentemente da dove ottieni l’animazione, avrai bisogno del suo codice sorgente CSS per aggiungerla manualmente al tuo sito WordPress:
La maggior parte delle animazioni di preloader gratuite includerà un link dei sorgenti, dove puoi trovare sia il suo HTML che il CSS:
Tieni presente che puoi anche utilizzare il codice sorgente CSS da un’animazione preloader e successivamente personalizzarlo a tuo piacimento.
Passaggio 3: crea un tema child
Una volta che hai l’animazione, puoi aggiungerla al tuo sito WordPress. Il modo più sicuro per farlo è impostare un tema child. Se non sei sicuro di come farlo, puoi consultare il nostro tutorial su come creare un tema child di WordPress .
Passaggio 4: aggiungi il codice HTML al file header.php del tuo tema
Il prossimo passo è individuare il file header.php del tuo tema WordPress ed andarlo a modificare utilizzando un client FTP come FileZilla. Il file si trova nella cartella wp-content> themes nella directory principale del tuo sito.
Dopo aver individuato e aperto il file, insesci il seguente codice HTML sotto il tag body:
<!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>
Modifica o aggiungi il codice HTML necessario per la tua particolare animazione del preloader di WordPress e salva il file.
Passaggio 5: aggiungi il codice CSS al tuo foglio di stile
Ora è il momento di aggiungere il codice CSS per dare uno stile alla tua animazione. Individua il foglio di stile CSS ( style.css ) del tuo tema WordPress, quindi copia e incolla il codice sorgente CSS per l’animazione. Nel nostro caso, aggiungeremo quanto segue:
.spinner {
margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
Prima di salvare le modifiche, rimuovi questa parte: “margin: 100px auto;”. Al suo posto, copia e incolla quanto segue:
position: absolute; top: 48%; left: 48%;
Quindi è possibile salvare il file.
Passaggio 6: aggiungi il codice jQuey per far funzionare l’animazione
Per far funzionare l’animazione del tuo spinner preloader, devi aggiungere codicei jQuery. Per fare ciò, puoi tornare al file header.php e inserire quanto segue prima del tag body di chiusura:
<script>
$(document).ready(function() {
//Preloader
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
Quindi salva il tuo file e visualizza l’anteprima del tuo sito per essere sicuro che l’animazione del preloader di WordPress funzioni come previsto.
Buon lavoro!
