Nessuno vuole aspettare il caricamento di una pagina lenta, come nel caso di un blog ricco di immagini. Anche se sono bellissime, l’attesa per vederle può essere frustrante per i visitatori.
È qui che il lazy loading può essere d’aiuto. Si tratta di un trucco intelligente per cui le immagini vengono caricate solo quando sono necessarie. Invece di caricare tutte le immagini su una pagina in una sola volta, il sito web attende che il visitatore scorra verso il basso fino al punto in cui sta per apparire un’immagine.
Ciò significa tempi di caricamento delle pagine più rapidi, visitatori più felici e persino un aumento della SEO del sito web.
La cosa migliore è che aggiungere il lazy loading al vostro sito WordPress è più facile di quanto pensiate. In questo articolo vi guideremo attraverso il processo, in modo che possiate godere di un sito web più veloce ed efficiente.
Perché caricare pigramente le immagini in WordPress?
Il lazy loading delle immagini di WordPress può velocizzare il sito web e offrire una migliore esperienza all’utente.
A nessuno piacciono i siti web lenti. Infatti, uno studio sulle prestazioni dei siti web ha rilevato che un ritardo di 1 secondo nel tempo di caricamento della pagina porta a un calo del 7% delle conversioni, dell’11% delle pagine viste e a una diminuzione del 16% della soddisfazione dei clienti.
Anche i motori di ricerca come Google non amano i siti web che si caricano lentamente. Ecco perché i siti più veloci si posizionano più in alto nei risultati di ricerca.
Le immagini richiedono il maggior tempo di caricamento sul vostro sito WordPress rispetto ad altri elementi web. Se aggiungete molte immagini ai vostri articoli, ogni immagine aumenta il tempo di caricamento della pagina.
Un modo per gestire questa situazione è utilizzare un servizio CDN come BunnyCDN. Un CDN consente agli utenti di scaricare le immagini da un server Web più vicino a loro, riducendo la velocità di caricamento del sito.
Tuttavia, le immagini verranno comunque caricate e influenzeranno il tempo di caricamento complessivo della pagina. Per ovviare a questo problema, è possibile ritardare il caricamento delle immagini implementando il lazy load sul proprio sito web.
Come funziona il caricamento pigro delle immagini?
Invece di caricare tutte le immagini in una volta, il caricamento pigro scarica solo le immagini visibili sullo schermo dell’utente. Sostituisce tutte le altre immagini con un’immagine segnaposto o uno spazio vuoto.
Quando l’utente scorre la pagina, il sito web carica le immagini visibili nell’area di visualizzazione del browser.
Il caricamento pigro può essere molto utile per il vostro blog WordPress:
- Riduce il tempo di caricamento iniziale della pagina web, in modo che gli utenti vedano il vostro sito più velocemente.
- Conserva la larghezza di banda fornendo solo le immagini che vengono visualizzate, il che può farvi risparmiare sui costi di hosting di WordPress.
Il rilascio di WordPress 5.5 ha aggiunto il caricamento pigro come caratteristica predefinita.
Tuttavia, se si desidera personalizzare il caricamento pigro delle immagini e anche il caricamento pigro delle immagini di sfondo, è necessario utilizzare un plugin per WordPress.
Vediamo come caricare pigramente le immagini in WordPress utilizzando due diversi plugin. Potete utilizzare i collegamenti rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:
Metodo 1: Caricamento pigro delle immagini in WordPress con WP Rocket
Si consiglia di utilizzare il plugin WP Rocket per il caricamento pigro delle immagini in WordPress. È il miglior plugin per la cache di WordPress sul mercato che consente di attivare facilmente il caricamento pigro delle immagini.
A parte questo, è un plugin molto potente che aiuta a ottimizzare la velocità della pagina senza dover conoscere termini tecnici complessi o configurare impostazioni da esperti.
Tutte le impostazioni di cache consigliate di default accelerano notevolmente il vostro sito WordPress.
La prima cosa da fare è installare e attivare il plugin WP Rocket. Per maggiori dettagli, potete consultare la nostra guida su come installare un plugin di WordPress.
Per abilitare il caricamento pigro delle immagini, è sufficiente selezionare alcune caselle. È possibile attivare il caricamento pigro anche per i video, per migliorare ulteriormente la velocità del sito.
Tutto ciò che dovete fare è andare su Impostazioni ” WP Rocket nella vostra dashboard di WordPress e fare clic sulla scheda “Media”. Quindi, potete scorrere fino alla sezione “LazyLoad” e selezionare le caselle accanto a “Abilita per le immagini” e “Abilita per iframes e video”.
Per maggiori dettagli, consultate la nostra guida su come installare e configurare correttamente WP Rocket in WordPress.
Nota: se si utilizza Siteground come provider di hosting WordPress, è possibile utilizzare il plugin gratuito SiteGround Optimizer che offre funzioni simili di caricamento pigro.
Metodo 2: Caricamento pigro delle immagini in WordPress con Optimole
Questo metodo utilizza il plugin gratuito Optimole. È uno dei migliori plugin per la compressione delle immagini di WordPress che consente di abilitare facilmente il caricamento pigro delle immagini.
Se superate i 5.000 visitatori al mese, allora avrete bisogno della versione premium di Optimole. Per maggiori dettagli, consultate la nostra recensione completa di Optimole.
Per prima cosa, è necessario installare e attivare il plugin Optimole. Per maggiori dettagli, consultare la nostra guida passo-passo su come installare un plugin di WordPress.
Al momento dell’attivazione, verrà visualizzata una schermata che richiede la registrazione di una chiave API. È possibile trovare questa schermata anche navigando su Optimole nel menu di amministrazione.
Dovrete assicurarvi che l’indirizzo e-mail indicato sia corretto e poi fare clic sul pulsante “Crea e collega il tuo account”. In alternativa, se si è un utente esistente, è sufficiente fare clic sul pulsante “Ho già una chiave API”.
Potrebbe essere necessario attendere qualche secondo mentre il plugin si connette a Optimole. Dopodiché, il plugin inizierà automaticamente a ottimizzare le immagini, in modo che i visitatori vedano le immagini migliori per i loro dispositivi.
Mentre ciò avviene, è possibile fare clic sulla scheda “Impostazioni” per configurare il caricamento pigro.
In questo caso, è necessario assicurarsi che l’impostazione “Scala immagini e caricamento pigro” sia attivata. Questo genererà le immagini in base alle dimensioni dello schermo del visitatore e migliorerà la velocità di caricamento.
Quindi, fare clic sull’opzione di menu “Avanzate” e selezionare “Caricamento pigro”. In questa schermata sono presenti alcune impostazioni diverse che consentono di personalizzare il caricamento pigro delle immagini.
Innanzitutto, è possibile regolare l’impostazione “Escludi il primo numero di immagini dal caricamento pigro”. In questo modo le immagini nella parte superiore dei post o delle pagine non verranno caricate in modo pigro, in modo che le immagini sopra la piega vengano sempre visualizzate.
Si può impostare a 0 se si vuole che ogni immagine venga caricata in modo pigro.
In Optimole sono presenti alcune altre impostazioni avanzate per il caricamento pigro che è possibile controllare. Queste impostazioni sono abilitate per impostazione predefinita.
La prima è l’impostazione “Scala immagini”. In questo modo le immagini verranno adattate alle dimensioni dello schermo del visitatore e la pagina verrà caricata più velocemente.
Successivamente, verrà visualizzata l’impostazione “Abilita il caricamento pigro per le immagini di sfondo”. In questo modo le immagini di sfondo, che potrebbero essere le più grandi del sito, verranno caricate in modo pigro.
Un’altra impostazione riguarda il caricamento pigro dei video incorporati e degli iframe. Se si dispone di molti contenuti video incorporati, si consiglia di lasciare questa impostazione attiva. Verrà caricata un’immagine segnaposto al posto del video. Quando si fa clic sul segnaposto, viene caricato il video completo.
È possibile continuare a personalizzare queste impostazioni e vedere cosa funziona meglio per il proprio sito web e le proprie immagini.
Prima di uscire dalle impostazioni del plugin, assicurarsi di fare clic sul pulsante “Salva modifiche” in fondo alla pagina.
Suggerimenti per ottimizzare le immagini di WordPress
Sebbene il caricamento pigro contribuisca a migliorare la velocità di caricamento del sito web, esistono alcuni altri modi per ottimizzare le immagini di WordPress per ottenere le migliori prestazioni.
Ad esempio, si consiglia di comprimere le immagini prima di caricarle sul sito web utilizzando uno strumento come TinyPNG o JPEGmini. In alternativa, è possibile utilizzare un plugin per la compressione automatica delle immagini, come Optimole o EWWW Image Optimizer.
È anche importante scegliere le dimensioni e il formato di file WordPress più adatti alle immagini. I JPEG sono migliori per le foto o le immagini con molti colori, i PNG sono adatti per le immagini semplici o trasparenti e le GIF sono solo per le immagini animate.
Speriamo che questo articolo vi abbia aiutato a capire come caricare le immagini in WordPress in modo pigro. Potreste anche consultare il nostro tutorial su per ottimizzare facilmente le immagini per il web senza perdere qualità e la nostra scelta dei migliori plugin per l’uploader dei file su WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dick Sijtsma
Hi there,
during the process of lazyloading (I’m using WP Rocket) there is a short time a placeholder showing for the images. In my situation (Google Chrome) this placeholder has a purple color. Is there a way to influence this color? Or is this a browsersetting?
Thanks!
WPBeginner Support
You would want to check with WP Rocket for their up to date method for modifying their placeholder.
Admin
Dick Sijtsma
Thanks!
But it was Theme related. I found a setting for background color of the image (in Elementor). This color was shown during the lazy-load. So now i know how to change that color. Thanks.
Jiří Vaněk
Do you have experience with how Lazy Load affects user experience and other Google metrics? Not everyone recommends lazy loading precisely because it can appear unnatural on a website in the long run.
WPBeginner Support
It would depend on how it is implemented for how it affects the user experience and Google metrics.
Admin
Kunj Bihari
WordPress already provide “lazyload” so Why we have to use any lazyload plugin?
Suzanne
Well, this plugin is awesome. My site speed score just went from an embarrassing 42 to a respectable 72!
WPBeginner Support
Awesome! Glad the plugin could help your site
Admin
Piotr
Is that possible to creates a group of photos that will get lazy-loaded?
Example: I have 30 photos and I want to lazy load first 10, when user keeps scrolling- I download another 10 and so on..
daus
can i combine BJ Lazy Load and photon jetpack?
Naveen
My site was having many issues and I have learned a lot here which has helped me to grow my blog.
Many Thanks
Franklin
Thanks for sharing this. I didn’t even think of getting a plugin for lazy images, and I probably will be getting this later.
Alun Price
I’d love to implement a lazy loader on my website but I’ve heard that they can negatively impact on SEO – is this true????
Dr.Amrita Basu
Thank you for this. Helped me make a much-needed change quickly .Have downloaded and adjusted the plugin settings
Fahad Khan
i HAVE JETPACK AS WELL AS CLOUDFLARE APPLIED ON MY WEBSITE, DO I STILL NEED THIS PLUGIN ?
Nagarjun
Thanks for the advice! Bj Lazy Load works like a charm!
Luke Cavanagh
Rocket Lazy Load also works very well.