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.<\/p>\n
Le Opzioni di Lazy Loading in WP Rocket<\/h2>\n
Accedendo a Impostazioni, poi WP Rocket e poi Media, troverai tutte le opzioni relative al lazy loading e alla ottimizzazione dei contenuti multimediali.<\/p>\n
![\"Sezione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/04-media.png\")
<\/p>\n
LazyLoad per le Immagini<\/h3>\n
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.<\/p>\n
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.<\/p>\n
LazyLoad per iFrame e Video<\/h3>\n
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.<\/p>\n
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.<\/p>\n
Sostituisci gli iFrame YouTube con Immagini di Anteprima<\/h3>\n
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.<\/p>\n
I vantaggi sono enormi:<\/p>\n
- \n
- Riduzione del peso della pagina<\/strong>: una immagine di anteprima pesa circa 15-20 KB, contro i 500+ KB di un iframe YouTube completo<\/li>\n
- Meno richieste HTTP<\/strong>: elimina decine di richieste aggiuntive per ogni video YouTube<\/li>\n
- Caricamento istantaneo della pagina<\/strong>: il visitatore vede immediatamente la anteprima del video con il pulsante play<\/li>\n
- Nessun impatto sulla esperienza utente<\/strong>: il video si carica e si avvia normalmente quando il visitatore clicca<\/li>\n<\/ul>\n
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.<\/p>\n
Aggiungere le Dimensioni Mancanti alle Immagini<\/h2>\n
WP Rocket puo aggiungere automaticamente gli attributi width e height alle immagini che non li hanno. Questo e importante per due motivi:<\/p>\n
- \n
- Prevenire il layout shift<\/strong>: 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)<\/li>\n
- Migliorare il CLS nei Core Web Vitals<\/strong>: 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<\/li>\n<\/ol>\n
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.<\/p>\n
Compatibilita con il Formato WebP<\/h2>\n
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.<\/p>\n
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.<\/p>\n
Come Escludere Immagini dal Lazy Loading<\/h2>\n
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:<\/p>\n
- \n
- Logo del sito<\/strong>: il logo e tipicamente nella intestazione e deve caricarsi immediatamente<\/li>\n
- Immagine hero<\/strong>: la immagine principale nella parte superiore della homepage o delle landing page<\/li>\n
- Immagini di sfondo above the fold<\/strong>: banner e sfondi visibili senza scorrere<\/li>\n
- Slider nella parte superiore<\/strong>: le immagini del primo slide devono essere visibili subito<\/li>\n<\/ul>\n
Per escludere una immagine dal lazy loading in WP Rocket, puoi utilizzare diversi metodi:<\/p>\n
- \n
- Classe CSS<\/strong>: aggiungi la classe “no-lazyload” alla immagine nel codice HTML<\/li>\n
- Attributo data<\/strong>: aggiungi la attributo data-no-lazy=”1″ al tag img<\/li>\n
- Filtro PHP<\/strong>: utilizza il filtro rocket_lazyload_excluded_attributes per escludere immagini basandosi su attributi specifici<\/li>\n<\/ol>\n
Impatto del Lazy Loading sui Core Web Vitals<\/h2>\n
Il lazy loading ha un impatto diretto su due delle tre metriche dei Core Web Vitals di Google:<\/p>\n
Largest Contentful Paint (LCP)<\/h3>\n
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.<\/p>\n
Cumulative Layout Shift (CLS)<\/h3>\n
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.<\/p>\n
Interaction to Next Paint (INP)<\/h3>\n
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.<\/p>\n
Best Practice per il Lazy Loading<\/h2>\n
Per ottenere i migliori risultati con il lazy loading di WP Rocket, segui queste best practice:<\/p>\n
- \n
- Attiva il lazy loading per immagini e iframe<\/strong> fin dalla installazione del plugin<\/li>\n
- Attiva la sostituzione degli iframe YouTube<\/strong> se hai video incorporati<\/li>\n
- Escludi le immagini above the fold<\/strong> per non penalizzare il LCP<\/li>\n
- Attiva la aggiunta delle dimensioni mancanti<\/strong> per prevenire il layout shift<\/li>\n
- Testa il sito su dispositivi mobili<\/strong> dove il lazy loading ha il maggiore impatto<\/li>\n
- Ottimizza le immagini<\/strong> con un plugin come Imagify prima di applicare il lazy loading<\/li>\n<\/ol>\n
Se desideri una configurazione professionale del lazy loading e della ottimizzazione delle immagini per il tuo sito WordPress, contattaci<\/a> per una consulenza dedicata. Scopri anche il nostro hosting WordPress<\/a> con ottimizzazione delle prestazioni integrata per risultati ancora migliori.<\/p>\n
<\/p>\nLazyLoad e Core Web Vitals<\/h2>\n
Impatto su LCP (Largest Contentful Paint)<\/h3>\n
Attenzione: le immagini above the fold<\/strong> (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.<\/p>\n
Impatto su CLS (Cumulative Layout Shift)<\/h3>\n
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”<\/strong> nella tab Media.<\/p>\n
Impatto su INP (Interaction to Next Paint)<\/h3>\n
Il lazy loading riduce il JavaScript iniziale, migliorando la reattivita della pagina. Meno risorse da caricare = interazioni piu veloci.<\/p>\n
Errori Comuni con il LazyLoad<\/h2>\n
- \n
- Hero image non visibile<\/strong>: Escludi la hero image dal lazy load aggiungendo la classe
no-lazy<\/code> o usando il filtro di WP Rocket<\/li>\n- Immagini di sfondo CSS<\/strong>: Il lazy load nativo non funziona con background-image CSS. Usa il modulo “LazyLoad for CSS background images” (disponibile con Remove Unused CSS)<\/li>\n
- Slider e carousel<\/strong>: Alcuni slider caricano immagini via JavaScript e il lazy load puo interferire. Escludi le immagini dello slider<\/li>\n
- Logo e favicon<\/strong>: Non devono mai essere lazy loaded \u2014 sono above the fold e critici per la UX<\/li>\n
- Doppio lazy loading<\/strong>: Se un altro plugin (es. Autoptimize, ShortPixel) ha il suo lazy load attivo, disattivalo per evitare conflitti con WP Rocket<\/li>\n<\/ul>\n
Come Escludere Immagini dal LazyLoad<\/h2>\n
Due metodi:<\/p>\n
- \n
- Classe CSS<\/strong>: Aggiungi
no-lazy<\/code> alla classe della immagine nel codice HTML<\/li>\n- Filtro PHP<\/strong>: In functions.php aggiungi il filtro
rocket_lazyload_excluded_attributes<\/code> per escludere per attributo<\/li>\n<\/ol>\nGuide Correlate della Serie WP Rocket<\/h2>\n
- \n
- Come Installare e Configurare WP Rocket su WordPress<\/a><\/li>\n
- WP Rocket: Ottimizzazione File CSS e JavaScript per la Velocita<\/a><\/li>\n
- WP Rocket: Preload Cache e Prefetch DNS \u2014 Velocizzare il Caricamento<\/a><\/li>\n
- WP Rocket e CDN: Come Configurare Cloudflare e BunnyCDN<\/a><\/li>\n
- WP Rocket: Come Portare PageSpeed da 50 a 95 \u2014 Case Study e Guida<\/a><\/li>\n<\/ul>\n
Migliora il Tuo Sito WordPress<\/h3>\n
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n
- \n
- Come Installare Elementor su WordPress<\/a><\/li>\n
- Come Installare e Configurare SEOPress<\/a><\/li>\n
- Come Installare e Configurare UpdraftPlus<\/a><\/li>\n
- Come Installare e Configurare Wordfence<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
WP Rocket: LazyLoad Immagini, Video e iFrame \u2014 Guida Completa Il lazy loading e una tecnica di ottimizzazione che permette di caricare immagini, video e…<\/p>\n","protected":false},"author":2,"featured_media":166568,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"WP Rocket LazyLoad: Immagini, Video e iFrame","_seopress_titles_desc":"Come configurare il lazy loading di WP Rocket per immagini, video YouTube e iFrame. Impatto su Core Web Vitals.","_seopress_robots_index":"","footnotes":""},"categories":[61],"tags":[1905,2713,2711,2712],"class_list":["post-166578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-core-web-vitals","tag-immagini-wordpress","tag-lazy-load","tag-wp-rocket-media"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=166578"}],"version-history":[{"count":1,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166578\/revisions"}],"predecessor-version":[{"id":166585,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/166578\/revisions\/166585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/166568"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=166578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=166578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=166578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Come Installare e Configurare SEOPress<\/a><\/li>\n
- WP Rocket: Ottimizzazione File CSS e JavaScript per la Velocita<\/a><\/li>\n
- Filtro PHP<\/strong>: In functions.php aggiungi il filtro
- Immagini di sfondo CSS<\/strong>: Il lazy load nativo non funziona con background-image CSS. Usa il modulo “LazyLoad for CSS background images” (disponibile con Remove Unused CSS)<\/li>\n
- Attiva la sostituzione degli iframe YouTube<\/strong> se hai video incorporati<\/li>\n
- Attributo data<\/strong>: aggiungi la attributo data-no-lazy=”1″ al tag img<\/li>\n
- Immagine hero<\/strong>: la immagine principale nella parte superiore della homepage o delle landing page<\/li>\n
- Migliorare il CLS nei Core Web Vitals<\/strong>: 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<\/li>\n<\/ol>\n
- Meno richieste HTTP<\/strong>: elimina decine di richieste aggiuntive per ogni video YouTube<\/li>\n