Probabilmente sei consapevole di quanto sia importante la velocità di caricamento delle pagine di un sito web. Basti dire che ogni secondo conta quando sei in competizione per i primi posti nei risultati di ricerca. Ti starai chiedendo, tuttavia, cosa puoi fare per migliorare le prestazioni del tuo sito.
Fortunatamente, ci sono diverse opzioni quando si tratta di migliorare il caricamento delle tue pagine. Attraverso un processo chiamato ‘lazy loading’, ad esempio, puoi velocizzare le cose controllando quando compaiono gli elementi più gravosi delle tue pagine (come immagini e video).
In questo articolo, vedremo cos’è esattamente il lazy loading e come funziona. Vedremo anche come implementare il lazy load, sia manualmente che con un plugin.
Iniziamo!
Cos’è il lazy loading in WordPress? Lazy Load Pro e contro
Il lazy loading delle immagini è un modo per ridurre il numero di chiamate che il browser di un visitatore deve effettuare al server del tuo sito web. In sostanza, il caricamento del tuo sito web può intasarsi quando vengono effettuate molte chiamate al tuo server contemporaneamente. Ad esempio, se tutte le tue immagini tentano di caricarsi contemporaneamente, ciò può causare problemi.
Quando si utilizza l’approccio del lazy loading, è possibile creare segnaposto per le immagini e quindi caricare completamente le immagini reali solo quando sono necessarie. Quando un visitatore scorre una pagina verso il basso, ad esempio, immagini e video potrebbero caricarsi come e quando devono apparire.
Questo approccio ha diversi pro e contro, che ti consigliamo di considerare prima di implementarlo sul tuo sito web. I vantaggi includono:
- I visitatori del sito non dovranno utilizzare la stessa larghezza di banda per visualizzare le tue pagine.
- Puoi aumentare le tue classifiche di ricerca.
- Sarai in grado di fornire una migliore esperienza mobile.
Per quanto riguarda gli svantaggi, alcuni tipi di lazy loading possono causare problemi di indicizzazione dei motori di ricerca. Inoltre, per le persone che scorrono rapidamente i contenuti, le immagini caricate in modo “Lazy” possono creare una user experience peggiore.
Ad ogni modo, può essere una tecnica da considerare se il tuo sito si carica lentamente.
Aggiunta di Lazy Load al tuo sito WordPress
Ora che abbiamo risposto alla domanda “Cos’è il lazy loading in WordPress?”, È ora di imparare come aggiungerlo al tuo sito. Se sei preoccupato per le prestazioni, il primo passo è scoprire quanto sono veloci o lente le pagine del tuo sito. Un modo per valutare le prestazioni del tuo sito è con uno strumento di test della velocità.
Questi strumenti ti consente di sapere come sta andando il tuo sito. Inoltre, offrono suggerimenti per apportare miglioramenti, così saprai esattamente dove concentrare i tuoi sforzi.
Se uno dei passaggi che decidi di eseguire è l’aggiunta del lazy loading al tuo sito web WordPress, hai diverse opzioni di lazy load. Puoi fare affidamento sulla funzionalità predefinita di WordPress o utilizzare un plugin per personalizzare il modo in cui il lazy loading funziona sul tuo sito.
Aggiunta di Lazy Load con un plugin – WP Rocket Lazy Loading
Fortunatamente, sono disponibili molti plugin di lazy loading. Lazy Load di WP Rocket, ad esempio, è un’ottima soluzione. Questo plugin è semplice, ma può ridurre in modo significativo il peso delle tue pagine (in modo da accelerarle). Nei due passaggi seguenti, ti mostreremo come usarlo.
Passaggio 1: scarica il plugin
Per iniziare, devi scaricare e attivare il plugin Lazy Load:
È uno strumento gratuito, quindi puoi installarlo direttamente dalla directory dei plugin di WordPress. Dopo averlo fatto, avrai solo alcune impostazioni rapide da configurare.
Passaggio 2: configurare le impostazioni del plugin
Successivamente, puoi accedere a Impostazioni > Lazy Load nella dashboard di WordPress per configurare le opzioni del plugin:
Qui sceglierai quali aspetti delle pagine del tuo sito desideri gestire con il lazy loading:
Seleziona semplicemente le caselle delle voci che desideri includere. Puoi fare in modo che il plugin gestisca immagini, iframe e video. Lazy Load di WP Rocket può anche sostituire i video di YouTube con le miniature fino a quando gli utenti del tuo sito non vedono quel contenuto.
Aggiunta manuale del Lazy Load
Fino ad oggi, se volevi implementare manualmente il lazy loading sul tuo sito, dovevi modificare manualmente i file core e aggiungere ad essi script personalizzati. Tuttavia, con il rilascio di WordPress 5.5 , il lazy loading fa ora parte del core.
WordPress ora implementa il lazy loading per impostazione predefinita per tutte le immagini sul tuo sito che hanno attributi di larghezza e altezza . Per fare ciò, WordPress utilizza la seguente coppia di attributi:
loading=“lazy”
Se stai utilizzando l’ultima versione di WordPress, dovresti vedere questo attributo nei tag img per qualsiasi immagine che hai caricato sul tuo sito. In pratica, dovrebbe assomigliare a questo:
<img src = “your-image-file.png” loading = “lazy” alt = “Questa è un’immagine lazy loaded!” />
Sebbene l’implementazione nativa del lazy loading renda le cose molto più semplici in WordPress, non tutti i browser supportano l’ attributo loading che utilizza. L’utilizzo di un plugin come LazyLoad di WP Rocket garantisce un supporto migliore nella maggior parte dei browser e consente inoltre di utilizzare il lazy loading per altri tipi di elementi.
Lazy loading di video in WordPress
A differenza delle immagini, il tuo browser non carica i video su una pagina nella loro interezza quando la visiti, almeno per impostazione predefinita. Invece, controlla un attributo chiamato preload , che dice al tuo browser se precaricare un video o semplicemente caricare i suoi metadati. Se precarichi i video, la riproduzione dovrebbe iniziare immediatamente dopo che gli utenti fanno clic su di essi.
Lo svantaggio del precaricamento dei video è che spesso influisce sui tempi di caricamento. Implementando le opzioni di lazy load per i video, dici ai browser dei visitatori di non precaricare alcun video finché non è necessario. Nella maggior parte dei casi, ciò non dovrebbe influire sulla user experience e può persino aumentare le prestazioni se includi più video nelle tue pagine.
Come accennato in precedenza, il plugin LazyLoad supporta il lazy loading per vari tipi di media. Ciò lo rende uno dei migliori plugin di lazy load per gli utenti di WordPress che incorporano video. Se hai caricato video che desideri condividere su WordPress, ti consigliamo di abilitare l’ impostazione IFrame e video illustrata in precedenza.
Lazy loading in WordPress e SEO
Come forse saprai, i motori di ricerca eseguono la scansione del tuo sito web per indicizzarne le pagine e altri elementi, comprese le immagini. Sebbene il lazy loading possa aumentare drasticamente le prestazioni del sito, in alcuni casi può anche impedire ai motori di ricerca di indicizzare le immagini. Ciò significa che quei file non verranno visualizzati nei risultati di ricerca di immagini, il che può ridurre il tuo traffico organico complessivo.
Per evitare questo problema, ti consigliamo di utilizzare un plugin di lazy loading che sia SEO friendly (come LazyLoad). Se utilizzi le opzioni di lazy load integrate di WordPress, assicurati che il tuo sito carichi correttamente le immagini quando sono visibili nel viewport .
Inoltre, non dimenticare di utilizzare i tag alt per tutte le immagini sul tuo sito web. Anche se utilizzi il lazy load in WordPress, i tag alt forniscono un contesto che i motori di ricerca possono utilizzare per determinare il contenuto delle tue immagini.
Conclusione
L’aggiunta di elementi come una funzione di lazy loading può aiutare a portare il tuo sito web al livello successivo. Questo non solo può migliorare le tue classifiche di ricerca, ma può anche offrire agli utenti del tuo sito un’esperienza migliore.
Buon lavoro!
