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

Implementare il caricamento lazy per le immagini in WordPress è un piccolo passo che può fare una grande differenza per il tuo sito web. È una pratica fondamentale per qualsiasi sito ad alte prestazioni oggi.

Questa singola tecnica aiuta direttamente due cose che ogni proprietario di sito desidera. Un'esperienza migliore per i visitatori e un bel aumento nei ranking dei motori di ricerca.

Per i tuoi visitatori, significa che le tue pagine risultano eccezionalmente veloci e reattive. Vedono i tuoi contenuti quasi istantaneamente, il che li mantiene coinvolti.

Anche i motori di ricerca come Google notano questa velocità. Tendono a favorire i siti web più veloci, il che può aiutare i tuoi contenuti a essere scoperti da più persone.

Vogliamo aiutarti a ottenere subito questi vantaggi. Ecco due metodi semplici per far funzionare il caricamento lazy sul tuo sito oggi stesso.

Perché caricare lazy le immagini in WordPress?

Il caricamento lazy delle immagini di WordPress può velocizzare 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 è utilizzare un servizio CDN come BunnyCDN, o un'opzione più semplice come Envira CDN, che è progettato specificamente per le immagini. Un CDN consentirà agli utenti di scaricare immagini da un server web a loro più vicino e ridurrà 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 lazy loading può 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ò farti risparmiare denaro sui costi di hosting WordPress.

Il rilascio di WordPress 5.5 ha aggiunto il lazy loading come funzionalità predefinita.

Tuttavia, se desideri personalizzare il modo in cui le tue immagini vengono caricate in lazy load e anche caricare in lazy load le immagini di sfondo, dovrai utilizzare un plugin WordPress.

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:

1. Carica immagini in modo differito in WordPress con WP Rocket (Consigliato)
2. Carica immagini in modo differito in WordPress con Optimole (Gratuito)
3. Domande frequenti sul caricamento differito delle immagini
4. Suggerimenti bonus per ottimizzare le tue immagini WordPress

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

Ti consigliamo di utilizzare il plugin WP Rocket per caricare le immagini in modo differito in WordPress. È il miglior plugin di caching per WordPress sul mercato che ti permette di attivare facilmente il caricamento differito 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 impostazioni di caching consigliate di default velocizzeranno notevolmente il tuo sito WordPress.

La prima cosa che dovrai fare è installare e attivare il plugin WP Rocket. Per maggiori dettagli, puoi consultare la nostra guida su come installare un plugin 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. È uno dei migliori plugin di compressione immagini per WordPress che ti consente di abilitare facilmente il caricamento pigro delle immagini.

Se ricevi oltre 5.000 visitatori al mese, 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 per 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’. Questo impedirà alle immagini nella parte superiore dei tuoi post o pagine di caricarsi in modo pigro, in modo che le immagini sopra la piega appaiano sempre.

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.

Dopodiché, vedrai l'impostazione 'Abilita lazyload per le immagini di sfondo'. Questo caricherà in modo differito le tue immagini di sfondo, che potrebbero essere le immagini più grandi del tuo sito web.

Un'altra impostazione è il lazy loading di video incorporati e iframe. Se hai molti contenuti video incorporati, vorrai lasciare questa impostazione attiva. Caricherà un'immagine segnaposto al posto del video. Quando si fa clic sul segnaposto, verrà 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.

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ì, dalla versione 5.5 di WordPress, il lazy loading di base per le immagini è una funzionalità predefinita. Tuttavia, questa funzione nativa non si applica a elementi come immagini di sfondo o video. Per un maggiore controllo e per garantire che tutti i tuoi media vengano caricati in modo differito, 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 per le prestazioni sul mercato e include una funzionalità di lazy load potente e semplice 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.

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 automatizzato come Optimole o EWWW Image Optimizer.

È anche importante scegliere la giusta dimensione dell'immagine WordPress e il formato del file per le tue immagini. I JPEG sono migliori per le foto o le immagini con molti colori, i PNG sono adatti per immagini semplici o trasparenti e i GIF sono solo per immagini animate.

Speriamo che questo articolo ti abbia aiutato a imparare come caricare le immagini in modo pigro (lazy load) 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 di esperti dei migliori plugin per il caricamento di file per WordPress.

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