Come caricare facilmente immagini in modalità lazy in WordPress (2 modi)

A nessuno piace un sito web lento. Se le tue pagine impiegano troppo tempo a caricarsi, i visitatori se ne andranno prima ancora di vedere i tuoi contenuti.

Le immagini sono spesso la causa principale della lentezza di caricamento. Occupano la maggior parte della larghezza di banda, compromettendo le tue prestazioni e il posizionamento nei motori di ricerca.

Abbiamo ottimizzato centinaia di siti per la velocità e il lazy loading è uno dei "quick win" più efficaci che raccomandiamo. Impedisce il caricamento delle immagini finché l'utente non scorre effettivamente verso il basso per vederle.

In questa guida, ti mostreremo come implementare facilmente il lazy loading delle immagini in WordPress per aumentare istantaneamente la velocità del tuo sito.

Perché caricare lazy le immagini in WordPress?

Il caricamento lazy delle immagini di WordPress pu ilde{A } accelerare il tuo sito web e offrire una migliore esperienza 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 al 7% in meno di conversioni, all'11% in meno di visualizzazioni di pagina e a una diminuzione del 16% della soddisfazione del cliente.

Anche i motori di ricerca come Google non amano i siti web a caricamento lento. Ecco perché i siti più veloci si posizionano più in alto nei risultati di ricerca.

Le immagini richiedono più tempo per essere caricate sul tuo sito WordPress rispetto ad altri elementi web. Se aggiungi molte immagini ai tuoi articoli, ogni immagine aumenta il tempo di caricamento della tua pagina.

Un modo per gestire questa situazione ilde{A } utilizzare un servizio CDN come BunnyCDN, o un'opzione pi ilde{A } semplice come Envira CDN. Una CDN consentir ilde{A } agli utenti di scaricare immagini da un server web a loro pi ilde{A } vicino e ridurre i tempi di caricamento del sito web.

Tuttavia, le tue immagini verranno comunque caricate e influenzeranno il tempo di caricamento complessivo della pagina. Per superare questo problema, puoi ritardare il caricamento delle immagini implementando il lazy load sul tuo sito web.

Come funziona il Lazy Loading delle Immagini?

Invece di caricare tutte le tue immagini contemporaneamente, il lazy loading scarica solo le immagini visibili sullo schermo dell'utente. Sostituisce tutte le altre immagini con un'immagine segnaposto o uno spazio vuoto.

Man mano che un utente scorre la pagina, il tuo sito web carica le immagini visibili nell'area di visualizzazione del browser.

Il caricamento lazy pu ilde{A } essere molto vantaggioso per il tuo blog WordPress:

• Riduce il tempo di caricamento iniziale della pagina web in modo che gli utenti vedano il tuo sito più velocemente.
• Conserva la larghezza di banda fornendo solo le immagini visualizzate, il che pu ilde{A } farti risparmiare denaro sui costi di hosting di WordPress.

Cos'è il Lazy Loading Nativo in WordPress?

Dalla versione 5.5 di WordPress, la piattaforma include il "lazy loading nativo" per impostazione predefinita. Ciò significa che WordPress aggiunge automaticamente l'attributo HTML loading="lazy" ai tuoi tag img.

Questo indica ai browser moderni (come Chrome, Firefox e Safari) di ritardare il caricamento dell'immagine finché l'utente non scorre vicino ad essa.

Se WordPress lo fa automaticamente, perché ho bisogno di un plugin?

Sebbene il caricamento lazy nativo sia un ottimo inizio, non ilde{A } perfetto. Si basa interamente sul browser del visitatore per decidere quando caricare un'immagine. Plugin dedicati come WP Rocket offrono prestazioni migliori perch ilde{A }:

• Caricano in lazy loading le immagini di sfondo (cosa che WordPress nativo non può fare).
• Caricano in lazy loading specificamente iframe e video.
• Utilizzano script avanzati che caricano le immagini più velocemente del comportamento predefinito del browser.

Diamo un'occhiata a come caricare le immagini in modo differito (lazy load) in WordPress utilizzando due plugin diversi. Puoi usare i collegamenti rapidi qui sotto per saltare direttamente al metodo che desideri utilizzare:

Metodo 1: Carica immagini in modo differito in WordPress con WP Rocket

Consigliamo di utilizzare il plugin WP Rocket per il caricamento lazy delle immagini in WordPress. ilde{A } il miglior plugin di caching per WordPress sul mercato che ti consente di attivare facilmente il caricamento lazy delle immagini.

Oltre a ciò, è un plugin molto potente che ti aiuta a ottimizzare la velocità della tua pagina senza conoscere termini tecnici complessi o configurare impostazioni da esperti.

Fin da subito, tutte le loro impostazioni di caching consigliate di default accelereranno notevolmente il tuo sito web WordPress.

La prima cosa che dovrai fare ilde{A } installare e attivare il plugin WP Rocket. Per maggiori dettagli, puoi consultare la nostra guida su come installare un plugin di WordPress.

Per abilitare il caricamento pigro delle immagini, tutto ciò che devi fare è selezionare alcune caselle. Puoi persino abilitare il caricamento pigro per i video, il che migliorerà ulteriormente la velocità del tuo sito.

Tutto ciò che devi fare è andare su Impostazioni » WP Rocket nella tua bacheca WordPress e fare clic sulla scheda 'Media'. Quindi, puoi scorrere fino alla sezione 'LazyLoad' e selezionare le caselle accanto a 'Abilita per le immagini' e 'Abilita per iframe e video'.

Per maggiori dettagli, consulta la nostra guida su come installare e configurare correttamente WP Rocket in WordPress.

Metodo 2: Caricamento pigro delle immagini in WordPress con Optimole

Questo metodo utilizza il plugin gratuito Optimole. ilde{A } uno dei migliori plugin di compressione delle immagini per WordPress che ti consente di abilitare facilmente il caricamento lazy delle immagini.

Se il tuo traffico supera i limiti del piano gratuito, allora avrai bisogno della versione premium di Optimole. Per maggiori dettagli, consulta la nostra recensione completa di Optimole.

Innanzitutto, devi installare e attivare il plugin Optimole. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, vedrai una schermata che ti chiederà di registrarti per una chiave API. Puoi anche trovare questa schermata navigando su Optimole nel menu di amministrazione.

Dovrai assicurarti che l'indirizzo email indicato sia corretto e quindi fare clic sul pulsante 'Crea e collega il tuo account'. In alternativa, se sei un utente esistente, fai semplicemente 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 tue immagini in modo che i tuoi visitatori vedano ora le migliori immagini per i loro dispositivi.

Mentre ciò accade, puoi fare clic sulla scheda 'Impostazioni' per configurare il caricamento pigro.

Qui, devi assicurarti che l'impostazione ‘Scala immagini e & Lazy load’ sia abilitata. Questo genererà immagini in base alle dimensioni dello schermo del tuo visitatore e migliorerà la velocità di caricamento.

Successivamente, fai clic sull'opzione di menu ‘Avanzate’ e seleziona ‘Lazyload’. In questa schermata, ci sono alcune impostazioni diverse che ti consentono di personalizzare come le tue immagini verranno caricate in modo pigro.

Innanzitutto, puoi regolare l'impostazione 'Escludi il primo numero di immagini dal lazyload'.

Ci ilde{A } impedir ilde{A } che le immagini nella parte superiore dei tuoi post o pagine vengano caricate lazy. Ci ilde{A } garantisce che le immagini sopra la piega vengano caricate istantaneamente, migliorando il tuo punteggio Largest Contentful Paint (LCP) per una migliore SEO.

Puoi impostarlo su 0 se vuoi che ogni immagine venga caricata in modo pigro.

Ci sono alcune altre impostazioni avanzate di lazy load in Optimole che puoi controllare. Queste impostazioni sono abilitate per impostazione predefinita.

La prima è l'impostazione ‘Scala immagini’. Questa ridimensionerà le immagini alle dimensioni dello schermo del visitatore e renderà il caricamento della tua pagina più veloce.

Successivamente, vedrai l'impostazione 'Abilita lazyload per le immagini di sfondo'. Questo caricher ilde{A } lazy le tue immagini di sfondo, che potrebbero essere le immagini pi ilde{A } grandi sul tuo sito web.

Un'altra impostazione ilde{A } il caricamento lazy di video incorporati e iframe. Se hai molti contenuti video incorporati, allora vorrai lasciare questa impostazione attiva. Caricher ilde{A } un'immagine segnaposto al posto del video. Quando si fa clic sul segnaposto, verr ilde{A } caricato il video completo.

Puoi continuare a personalizzare queste impostazioni e vedere cosa funziona meglio per il tuo sito web e le tue immagini.

Prima di uscire dalle impostazioni del plugin, assicurati di fare clic sul pulsante 'Salva modifiche' in fondo alla pagina.

Risoluzione dei problemi comuni di Lazy Load

A volte, l'attivazione del lazy load può causare la scomparsa o la sfocatura delle immagini.

Ecco le soluzioni comuni:

1. Le immagini non vengono visualizzate

Questo accade spesso se hai due plugin di lazy load attivi contemporaneamente (ad esempio, WP Rocket e il lazy load integrato del tuo tema). Assicurati di utilizzare un solo metodo per evitare conflitti.

2. Le immagini sopra la piega appaiono in ritardo

Se il tuo logo o l'immagine dell'intestazione appaiono dopo il resto della pagina, ciò può influire negativamente sull'esperienza utente. Come menzionato nei metodi sopra, dovresti escludere le prime 2-3 immagini della tua pagina dal lazy loading per risolvere questo problema.

3. Spostamento del layout (CLS)

Se il tuo contenuto 'salta' quando un'immagine viene caricata, ciò danneggia il tuo punteggio SEO. Per evitarlo, assicurati che tutte le tue immagini abbiano attributi width e height definiti. WordPress lo fa automaticamente, ma alcuni temi potrebbero sovrascriverlo.

Domande frequenti sul caricamento differito delle immagini

Sappiamo che potresti avere ancora alcune domande sul lazy loading in WordPress. Ecco le risposte ad alcune delle più comuni che riceviamo.

1. WordPress carica automaticamente le immagini in modo differito?

Sì, dal rilascio di WordPress 5.5, il lazy loading di base per le immagini è una funzionalità predefinita. Tuttavia, questa funzione nativa è limitata e non si applica alle immagini di sfondo, agli iframe o ai video. Per garantire che tutti i tuoi media siano ottimizzati, ti consigliamo di utilizzare un plugin dedicato come WP Rocket o Optimole.

2. Il caricamento lazy fa bene alla SEO?

Assolutamente. Il lazy loading migliora significativamente la velocità di caricamento della pagina, che è un fattore chiave per l'esperienza utente. I motori di ricerca come Google favoriscono i siti web più veloci, quindi migliorare la tua velocità con il lazy loading può dare al tuo sito una bella spinta nei ranking di ricerca.

3. Qual è il miglior plugin per il lazy load per WordPress?

Per prestazioni complete e facilità d'uso, consigliamo WP Rocket. È il miglior plugin di performance sul mercato e include una potente e semplice funzionalità di lazy load con pochi clic. Se stai cercando un'ottima alternativa gratuita, Optimole è una scelta eccellente che offre anche robuste opzioni di lazy loading.

4. È possibile caricare video in modo differito (lazy load) su WordPress?

Sì, puoi e dovresti! Questo è un modo fantastico per migliorare la velocità delle pagine che presentano molti contenuti video incorporati. Sia WP Rocket che Optimole ti consentono di abilitare facilmente il lazy loading per i tuoi video, che li sostituisce con un'immagine segnaposto finché un utente non fa clic per riprodurli.

5. Dovresti caricare in modo differito (lazy load) le immagini sopra la piega (above the fold)?

È generalmente buona norma escludere le immagini nella parte superiore della pagina (sopra la piega) dal lazy loading. Ciò garantisce che la prima cosa che i tuoi visitatori vedono venga caricata istantaneamente, creando un'ottima prima impressione. Plugin come Optimole ti consentono di escludere facilmente le prime immagini dal caricamento differito per questo motivo.

6. Come disabilito il lazy loading nativo in WordPress?

Se preferisci utilizzare un plugin specifico e vuoi assicurarti che il lazy loading nativo di WordPress non interferisca, puoi disattivarlo aggiungendo un semplice snippet di codice al file functions.php del tuo tema o utilizzando un plugin per snippet di codice come WPCode.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Suggerimenti bonus per ottimizzare le tue immagini WordPress

Sebbene il lazy loading aiuti a migliorare la velocità di caricamento del sito web, ci sono altri modi per ottimizzare le tue immagini WordPress per le migliori prestazioni.

Ad esempio, consigliamo di comprimere le tue immagini prima di caricarle sul tuo sito web utilizzando uno strumento come TinyPNG o JPEGmini. In alternativa, puoi utilizzare un plugin di compressione immagini automatizzata come Optimole o EWWW Image Optimizer.

È anche importante scegliere il formato di file corretto. Sebbene JPEG e PNG siano comuni, consigliamo vivamente di utilizzare formati di nuova generazione come WebP. Questi tipi di file offrono una compressione e una qualità superiori, il che aiuta il tuo sito a caricarsi in modo significativamente più veloce.

Speriamo che questo articolo ti abbia aiutato a imparare come fare il lazy load delle immagini in WordPress. Potresti anche voler consultare il nostro tutorial su come ottimizzare facilmente le immagini per il web senza perdere qualità e le nostre scelte esperte dei migliori plugin per l'upload di file per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.