Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
WordPress

WP Rocket: LazyLoad Immagini, Video e iFrame — Guida Completa

Gianluca Gentile
Gianluca Gentile
· 9 min di lettura

WP Rocket: LazyLoad Immagini, Video e iFrame — Guida Completa

Il lazy loading e una tecnica di ottimizzazione che permette di caricare immagini, video e iframe solo quando stanno per diventare visibili nella finestra del browser, anziche caricarli tutti insieme al primo accesso alla pagina. WP Rocket implementa questa funzionalita in modo semplice ed efficace, permettendoti di ridurre drasticamente i tempi di caricamento iniziale e il consumo di banda. In questa guida completa analizziamo tutte le opzioni di lazy loading disponibili in WP Rocket e come configurarle per ottenere il massimo beneficio senza compromettere la esperienza utente.

Cosa e il Lazy Loading e Perche e Importante

Immagina una pagina del tuo sito che contiene 30 immagini, 2 video YouTube incorporati e un iframe di Google Maps. Senza lazy loading, il browser del visitatore scarica tutti questi elementi contemporaneamente, anche se il visitatore vede solo i primi 2-3 contenuti visibili nella parte superiore della pagina (above the fold). Questo comporta:

Con il lazy loading attivo, il browser carica inizialmente solo le immagini e i video visibili nella parte superiore della pagina. Man mano che il visitatore scorre verso il basso, gli elementi successivi vengono caricati progressivamente, appena prima di entrare nella area visibile. Il risultato e una pagina che si carica molto piu velocemente e che consuma meno risorse.

Le Opzioni di Lazy Loading in WP Rocket

Accedendo a Impostazioni, poi WP Rocket e poi Media, troverai tutte le opzioni relative al lazy loading e alla ottimizzazione dei contenuti multimediali.

Sezione Media di WP Rocket con le opzioni di lazy loading per immagini, iframe, video e la sostituzione degli iframe YouTube

LazyLoad per le Immagini

Questa opzione attiva il lazy loading per tutte le immagini del tuo sito, incluse le immagini nei contenuti dei post, nelle pagine, nei widget e negli elementi del tema. WP Rocket utilizza la Intersection Observer API per rilevare quando una immagine sta per entrare nella area visibile e la carica di conseguenza.

Ti consigliamo di attivare sempre questa opzione. Il lazy loading delle immagini e supportato nativamente dai browser moderni attraverso la attributo loading=”lazy”, ma WP Rocket offre una implementazione piu avanzata con maggiore controllo sulle soglie di caricamento e sulla gestione dei placeholder.

LazyLoad per iFrame e Video

Questa opzione applica il lazy loading anche agli iframe (come i video YouTube incorporati, le mappe di Google Maps e i widget di terze parti) e ai tag video HTML5. Gli iframe sono particolarmente pesanti perche caricano una intera pagina web esterna, con tutti i suoi file CSS, JavaScript e multimediali.

Un singolo iframe di YouTube, per esempio, carica oltre 500 KB di dati e effettua decine di richieste HTTP aggiuntive. Se la tua pagina contiene 3-4 video YouTube, il lazy loading degli iframe puo ridurre il peso iniziale della pagina di diversi megabyte.

Sostituisci gli iFrame YouTube con Immagini di Anteprima

Questa e una delle funzionalita piu intelligenti di WP Rocket. Quando attivi questa opzione, WP Rocket sostituisce automaticamente gli iframe dei video YouTube con una immagine di anteprima (thumbnail) del video. Solo quando il visitatore clicca sulla anteprima, il player YouTube viene effettivamente caricato.

I vantaggi sono enormi:

Ti consigliamo di attivare sempre questa opzione se il tuo sito contiene video YouTube incorporati. E particolarmente utile per blog con molti tutorial video, pagine prodotto con video dimostrativi e landing page con video di presentazione.

Aggiungere le Dimensioni Mancanti alle Immagini

WP Rocket puo aggiungere automaticamente gli attributi width e height alle immagini che non li hanno. Questo e importante per due motivi:

  1. Prevenire il layout shift: senza dimensioni specificate, il browser non sa quanto spazio riservare per la immagine prima del caricamento. Quando la immagine viene caricata, il contenuto della pagina si sposta improvvisamente per fare spazio, causando un effetto fastidioso chiamato Cumulative Layout Shift (CLS)
  2. Migliorare il CLS nei Core Web Vitals: il CLS e una delle tre metriche dei Core Web Vitals di Google. Un CLS elevato indica una esperienza utente scarsa e puo influire negativamente sul posizionamento nei risultati di ricerca

Attiva questa opzione per migliorare il punteggio CLS del tuo sito. WP Rocket calcola automaticamente le dimensioni corrette delle immagini e le aggiunge al codice HTML.

Compatibilita con il Formato WebP

WP Rocket e pienamente compatibile con le immagini in formato WebP. Se utilizzi un plugin come Imagify (dello stesso team di WP Rocket), ShortPixel o EWWW Image Optimizer per convertire le tue immagini in formato WebP, il lazy loading funzionera correttamente anche con queste immagini.

Il formato WebP offre una compressione superiore rispetto a JPEG e PNG, con una riduzione delle dimensioni dei file del 25-35 per cento a parita di qualita visiva. Combinare il formato WebP con il lazy loading di WP Rocket ti permette di ottenere il massimo risparmio di banda e i migliori tempi di caricamento.

Come Escludere Immagini dal Lazy Loading

Non tutte le immagini dovrebbero essere sottoposte al lazy loading. In particolare, le immagini nella parte superiore della pagina (above the fold) dovrebbero caricarsi immediatamente per garantire un buon Largest Contentful Paint (LCP). Ecco quali immagini escludere:

Per escludere una immagine dal lazy loading in WP Rocket, puoi utilizzare diversi metodi:

  1. Classe CSS: aggiungi la classe “no-lazyload” alla immagine nel codice HTML
  2. Attributo data: aggiungi la attributo data-no-lazy=”1″ al tag img
  3. Filtro PHP: utilizza il filtro rocket_lazyload_excluded_attributes per escludere immagini basandosi su attributi specifici

Impatto del Lazy Loading sui Core Web Vitals

Il lazy loading ha un impatto diretto su due delle tre metriche dei Core Web Vitals di Google:

Largest Contentful Paint (LCP)

Il LCP misura il tempo necessario per visualizzare il contenuto principale piu grande nella area visibile. Se la immagine principale della pagina e soggetta a lazy loading, il LCP potrebbe peggiorare perche la immagine viene caricata con un leggero ritardo. Per questo motivo, e fondamentale escludere le immagini above the fold dal lazy loading.

Cumulative Layout Shift (CLS)

Il lazy loading puo peggiorare il CLS se le immagini non hanno dimensioni specificate. Quando una immagine viene caricata in ritardo senza che il browser sappia quanto spazio riservarle, il layout si sposta. La opzione “Aggiungi dimensioni mancanti” di WP Rocket risolve questo problema automaticamente.

Interaction to Next Paint (INP)

Il lazy loading non ha un impatto diretto sulla INP, ma riducendo la quantita di JavaScript e risorse caricate inizialmente, contribuisce indirettamente a una migliore reattivita della pagina.

Best Practice per il Lazy Loading

Per ottenere i migliori risultati con il lazy loading di WP Rocket, segui queste best practice:

  1. Attiva il lazy loading per immagini e iframe fin dalla installazione del plugin
  2. Attiva la sostituzione degli iframe YouTube se hai video incorporati
  3. Escludi le immagini above the fold per non penalizzare il LCP
  4. Attiva la aggiunta delle dimensioni mancanti per prevenire il layout shift
  5. Testa il sito su dispositivi mobili dove il lazy loading ha il maggiore impatto
  6. Ottimizza le immagini con un plugin come Imagify prima di applicare il lazy loading

Se desideri una configurazione professionale del lazy loading e della ottimizzazione delle immagini per il tuo sito WordPress, contattaci per una consulenza dedicata. Scopri anche il nostro hosting WordPress con ottimizzazione delle prestazioni integrata per risultati ancora migliori.

Impostazioni Media e LazyLoad di WP Rocket

LazyLoad e Core Web Vitals

Impatto su LCP (Largest Contentful Paint)

Attenzione: le immagini above the fold (visibili senza scroll) NON devono essere lazy loaded. Se la hero image ha il lazy load attivo, il LCP peggiora drasticamente. WP Rocket gestisce questo automaticamente nella maggior parte dei casi, ma verifica con PageSpeed Insights.

Impatto su CLS (Cumulative Layout Shift)

Il lazy loading puo causare CLS se le immagini non hanno dimensioni (width/height) definite. WP Rocket aggiunge automaticamente le dimensioni mancanti con la funzione “Add Missing Image Dimensions” nella tab Media.

Impatto su INP (Interaction to Next Paint)

Il lazy loading riduce il JavaScript iniziale, migliorando la reattivita della pagina. Meno risorse da caricare = interazioni piu veloci.

Errori Comuni con il LazyLoad

Come Escludere Immagini dal LazyLoad

Due metodi:

  1. Classe CSS: Aggiungi no-lazy alla classe della immagine nel codice HTML
  2. Filtro PHP: In functions.php aggiungi il filtro rocket_lazyload_excluded_attributes per escludere per attributo

Guide Correlate della Serie WP Rocket

#Core Web Vitals #immagini wordpress #lazy load #wp rocket media