Volete imparare a caricare pigramente le immagini in WordPress?
Il caricamento pigro consente al sito web di caricare le immagini solo quando l’utente scorre verso il basso fino a un’immagine specifica, riducendo il tempo di caricamento del sito web e migliorandone le prestazioni. Molti siti popolari ad alto contenuto di immagini utilizzano il caricamento pigro per aumentare la velocità e le prestazioni del sito.
In questo articolo vi mostreremo come caricare facilmente le immagini in WordPress, passo dopo passo.
Perché caricare pigramente le immagini in WordPress?
Il caricamento pigro delle immagini di WordPress può velocizzare il vostro 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.
Ci auguriamo che questo articolo vi abbia aiutato a capire come caricare pigramente le immagini in WordPress. Potreste anche voler consultare il nostro tutorial su su come ottimizzare facilmente le immagini per il web senza perdere qualità e la nostra scelta dei migliori software di web design.
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 says
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 says
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 says
You would want to check with WP Rocket for their up to date method for modifying their placeholder.
Admin
Dick Sijtsma says
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 says
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 says
It would depend on how it is implemented for how it affects the user experience and Google metrics.
Admin
Kunj Bihari says
WordPress already provide “lazyload” so Why we have to use any lazyload plugin?
Suzanne says
Well, this plugin is awesome. My site speed score just went from an embarrassing 42 to a respectable 72!
WPBeginner Support says
Awesome! Glad the plugin could help your site
Admin
Piotr says
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 says
can i combine BJ Lazy Load and photon jetpack?
Naveen says
My site was having many issues and I have learned a lot here which has helped me to grow my blog.
Many Thanks
Franklin says
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 says
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 says
Thank you for this. Helped me make a much-needed change quickly .Have downloaded and adjusted the plugin settings
Fahad Khan says
i HAVE JETPACK AS WELL AS CLOUDFLARE APPLIED ON MY WEBSITE, DO I STILL NEED THIS PLUGIN ?
Nagarjun says
Thanks for the advice! Bj Lazy Load works like a charm!
Luke Cavanagh says
Rocket Lazy Load also works very well.