Indice
By Nick Schäferhoff - Ultimo aggiornamento il
Il tuo sito WordPress usa molte immagini? Non ci sarebbe da sorprendersi, visto che sono il formato multimediale più diffuso sul web. Allo stesso tempo, però, le immagini possono rallentare seriamente il tuo sito, ed è per questo che devi sapere come usare il lazy loading su WordPress.
Abbiamo già parlato dell’ottimizzazione delle immagini, per renderle il più leggere possibile e farle caricare rapidamente. Tuttavia, c’è un limite a quanto puoi ridurre le dimensioni delle tue immagini senza comprometterne la qualità. Inoltre, se hai molte immagini nella stessa pagina, il loro peso si somma, anche se sono state ottimizzate.
Adame Dahmani, Product Manager di WP Rocket, spiega:
Il lazy loading rimanda il caricamento di immagini, video e iframe fuori schermo finché non servono, riducendo le richieste non necessarie. Questo alleggerisce il carico su larghezza di banda ed elaborazione e aiuta il browser a gestire in modo più efficiente il thread principale e il percorso di rendering critico. Se implementato correttamente, migliora il First Contentful Paint e spesso il Largest Contentful Paint, perché dà la priorità ai contenuti above the fold.
Un motivo più che sufficiente per mettere insieme una guida dettagliata sul lazy loading in WordPress, non trovi? Ecco perché in questo articolo scoprirai come funziona e come puoi applicare il lazy loading al tuo sito per ottenere i risultati migliori.
Che cos’è il lazy loading?
Di solito, quando apri una pagina web, il tuo browser ne carica tutti i dati in una volta sola. Ogni immagine, testo, link e così via.
Soprattutto con le immagini, se sono molte, questo può richiedere parecchio tempo. Le immagini sono molto più pesanti degli altri elementi di un sito web. Inoltre, mentre il browser se ne occupa, spesso bloccano il caricamento di altre risorse e impediscono alla tua pagina di completare il processo di rendering.
Il risultato: i tuoi visitatori devono aspettare a lungo per vedere la pagina web che hanno richiesto. E molti non resteranno ad aspettare, facendo salire la tua frequenza di rimbalzo.
Il lazy loading evita tutto questo impedendo il caricamento delle immagini e delle altre risorse che inizialmente non sono visibili sullo schermo, ed è un modo efficace per ottimizzare il tempo di caricamento del tuo sito web.
Le immagini più in basso nella pagina, invece, si caricano progressivamente solo quando i visitatori scorrono verso di loro. In questo modo non intasano il browser, che può caricare più rapidamente le altre parti del sito web. Di conseguenza, le pagine appaiono più in fretta ai visitatori, che hanno un’esperienza migliore.
Tra l’altro, è proprio questo che intendono gli strumenti per testare la velocità quando ti dicono “Rimanda immagini fuori schermo”.
Come funziona il lazy loading
Esistono diversi modi per implementare il lazy load. In passato ti serviva del JavaScript piuttosto sofisticato per farlo. Oggi, però, è diventato una funzionalità standard dei browser.
Di conseguenza, ti basta contrassegnare con un attributo HTML le immagini che vuoi caricare in questo modo, e i browser dei tuoi visitatori faranno il resto.
È un’ottima cosa, perché rende l’implementazione semplice, non richiede codice aggiuntivo sul tuo sito web e standardizza l’approccio. Dato che è diventato lo standard di fatto, oggi si parla anche di “lazy loading nativo”.
I vantaggi del lazy loading
Ora che sai come funziona, quali sono i vantaggi del lazy loading delle immagini sul tuo sito?
- Tempi di caricamento delle pagine migliori: ne abbiamo già parlato. Impedendo il caricamento iniziale delle immagini e degli altri contenuti multimediali, puoi ridurre notevolmente il tempo che una pagina web impiega a comparire.
- Meno lavoro per il browser: se le immagini sono caricate in lazy loading, il tuo browser non avrà bisogno di analizzarle finché un visitatore non scorre la pagina verso il basso.
- Meno richieste HTTP: ridurrai anche il numero di richieste HTTP e migliorerai il voto del Largest Contentful Paint.
- Esperienza utente migliore: i visitatori dei siti web adorano le pagine che si caricano rapidamente, quindi il lazy loading può favorire le conversioni e le altre metriche di coinvolgimento.
- Costi di server e CDN ridotti: il tuo server o il tuo CDN dovranno scaricare meno dati, e le fatture saranno più basse se hai una larghezza di banda limitata.
- Prestazioni più rapide su mobile: le immagini hanno un impatto maggiore sulle connessioni mobili più lente. Se ne riduci l’incidenza, ne trarranno vantaggio soprattutto i tuoi utenti da mobile.
- Vantaggi per la SEO: il lazy loading migliora i Core Web Vitals, che sono un fattore di ranking di Google.
Possibili svantaggi
Allo stesso tempo, il lazy loading può anche causare dei problemi:
- Problemi di prestazioni: usare il lazy load above the fold (loghi, immagini hero e così via) può in realtà avere un effetto negativo sulle prestazioni. Questo perché l’elemento Largest Contentful Paint è probabilmente un’immagine above the fold, quindi dovrebbe caricarsi il più rapidamente possibile. Più avanti vedremo come escludere le immagini dal lazy loading.
- Problemi di SEO: se lo implementi in modo scorretto, puoi impedire ai motori di ricerca di indicizzare le immagini caricate in lazy loading. Se però segui le istruzioni di questa guida, non dovrebbe essere un problema.
- Variazioni del layout: se non definisci le dimensioni delle immagini caricate in lazy loading, il layout del sito web può spostarsi, e questo penalizza il Cumulative Layout Shift.
- Possibili conflitti: la funzionalità può entrare in conflitto con alcuni plugin.
- Impatto sull’esperienza utente: il lazy loading si nota quando qualcuno scorre la pagina molto velocemente.
Quando usare il lazy loading
Quindi, quando ha senso usare questa tecnica?
In generale, è più efficace se hai molte immagini sul tuo sito web, per esempio articoli di blog lunghi con tanti screenshot. Tuttavia, può valere anche per le pagine prodotto o di portfolio.
Quanto a quali immagini caricare esattamente in lazy loading, dovrebbero essere quelle below the fold. Questo ridurrà il tempo di caricamento della pagina senza intaccare l’esperienza utente. Abbiamo già detto sopra che non dovresti applicare il lazy load alle immagini above the fold, perché può avere un impatto negativo sul tempo di caricamento della pagina.
💡 Lo sapevi? WP Rocket ora include Rocket Insights, l’hub delle prestazioni integrato basato su GTmetrix. Porta il monitoraggio delle prestazioni proprio dove già ottimizzi il tuo sito web, così puoi monitorare le tue pagine chiave, capire i tuoi risultati, ricevere consigli chiari collegati alle funzionalità di WP Rocket e ripetere il test in qualsiasi momento, il tutto senza destreggiarti tra più strumenti.
🚀 Aggiorna WP Rocket all’ultima versione per iniziare a usare Rocket Insights direttamente dalla tua bacheca: è incluso gratuitamente nel tuo piano!
Come applicare il lazy load alle immagini con il lazy loading nativo
Basta con la teoria, passiamo alle applicazioni pratiche. Come primo passo, vediamo come implementare il lazy loading se vuoi usare la soluzione nativa del browser.
L’attributo HTML loading
Perché i browser applichino il lazy loading, gli elementi del sito web da caricare in un secondo momento devono essere contrassegnati con l’attributo HTML <loading=“lazy”>. Ecco come appare in pratica:
<img src="wp-rocket-is-awesome.jpg" loading="lazy" alt="WP Rocket" />
<iframe src="WP-Cache-Basics.html" loading="lazy"></iframe>L’attributo accetta due valori:
- lazy: rimanda il caricamento degli elementi immagine o iframe.
- eager: è il comportamento di caricamento standard. La risorsa viene richiesta immediatamente, indipendentemente dalla sua posizione.
Attualmente l’attributo loading supporta solo i tag <img> e <iframe>. Per esempio, non puoi usarlo per applicare il lazy loading alle immagini di sfondo CSS. Più avanti vedremo le opzioni per farlo.
Inoltre, dato che è stato adottato praticamente da tutti i browser (vedi sotto), questo metodo è anche il più sicuro per l’indicizzazione SEO delle immagini caricate in lazy loading. Finché nel tag img c’è un attributo src, almeno Google non dovrebbe avere problemi a indicizzare le tue immagini.
Solo se implementi il lazy loading con JavaScript potrebbe essere una buona idea specificare l’attributo src all’interno di un tag <noscript>. Questo serve ai motori di ricerca i cui crawler non sono in grado di gestire JavaScript (ripetiamo, Google ci riesce benissimo).
In entrambi i casi, è una buona idea fornire anche una sitemap delle immagini.
Supporto dei browser
Il lazy loading è diventato uno standard web di fatto. Secondo Can I Use, dovrebbe funzionare per oltre il 95 % degli utenti di browser nel mondo.
Inoltre, anche se hai implementato il lazy loading sul tuo sito, l’esperienza non ne risentirà in un browser che non lo supporta.
Lazy loading in WordPress: le opzioni integrate
Da WordPress 5.5 il CMS applica di default il lazy loading alle immagini. La funzionalità è stata estesa agli iframe nella versione 5.7 e perfezionata in WordPress 5.9.
Quindi, se hai migrato il tuo sito web da un CMS come Squarespace a WordPress, e se il tuo sito WordPress usa l’ultima versione, qualsiasi immagine o iframe a cui siano assegnati gli attributi width e height riceverà automaticamente l’attributo <loading=”lazy”>. Questa condizione è stata introdotta per evitare i problemi di Cumulative Layout Shift di cui abbiamo parlato sopra.
Inoltre, da WordPress 5.9 in poi, il lazy loading non si applicherà al primo iframe o alla prima immagine di una pagina. Serve a evitare i problemi di LCP di cui abbiamo parlato prima.
A parte questo, WordPress applica l’attributo alle immagini nei seguenti punti:
- Contenuto degli articoli
- Riassunti degli articoli
- Widget di testo
- Immagini degli avatar
- Immagini aggiunte come allegati
Opzioni di personalizzazione
Al momento non esistono opzioni senza codice per disattivare selettivamente il lazy loading nativo di WordPress su determinate pagine o immagini. Se vuoi farlo, devi usare un plugin oppure alcuni dei filtri e delle funzioni qui sotto.
- wp_lazy_loading_enabled: puoi usarlo per attivare e disattivare completamente il lazy loading delle immagini in determinati contesti.
- wp_filter_content_tags(): aggiunge gli attributi srcset, sizes e loading ai tag HTML img, oltre agli attributi loading agli iframe.
- wp_img_tag_add_width_and_height_attr(): serve ad applicare gli attributi width e height ai tag img che ne sono privi, così che il lazy loading possa applicarsi anche a loro.
- wp_img_tag_add_srcset_and_sizes_attr(): aggiunge gli attributi srcset e sizes ai tag img esistenti, per scopi simili a quelli visti sopra.
- wp_img_tag_add_loading_attr(): aggiunge l’attributo loading ai tag img. Per gli iframe, usa wp_iframe_tag_add_loading_attr().
- wp_omit_loading_attr_threshold(): imposta una soglia per stabilire quante delle prime immagini e dei primi iframe non caricare in lazy loading. È utile se il tuo sito web mostra diversi elementi multimediali above the fold e vuoi disattivare il lazy load per tutti.
Per alcuni esempi di come usare quanto elencato sopra per modificare il lazy loading in WordPress, consulta gli annunci di WordPress 5.5, 5.7 e 5.9.
Suggerimenti per la risoluzione dei problemi
Se il lazy loading nativo non funziona sul tuo sito WordPress, probabilmente è perché lo stai applicando a elementi privi dei tag <img> o <iframe>. Sono gli unici tag a cui WordPress applica il lazy loading in modo nativo. Per altre opzioni, consulta la prossima sezione.
Come attivare il lazy loading di WordPress per immagini e video con un plugin
Le opzioni basate su plugin per aggiungere il lazy loading al tuo sito sono molte. Ma il modo di gran lunga più semplice è WP Rocket. Ci vuole meno di un minuto.
Ti basta andare su Impostazioni > WP Rocket > Media nella tua bacheca di WordPress.
Spunta le caselle dei tipi di contenuti multimediali per cui vuoi attivare il lazy loading:
- Immagini
- Immagini di sfondo CSS
- Iframe e video
Inoltre, puoi far sostituire a WP Rocket i video di YouTube incorporati con un’immagine di anteprima. Infine, c’è un’opzione per aggiungere gli attributi width e height alle immagini che ne sono prive, così che anche loro possano beneficiare del lazy loading.
Fai le tue scelte e clicca su Salva le modifiche in fondo alla pagina. Fatto.
Differenze rispetto al lazy loading nativo
Come puoi già vedere da quanto sopra, le opzioni di WP Rocket vanno oltre il lazy loading nativo di WordPress. Una delle differenze principali è che applica il lazy loading anche alle immagini di sfondo, sia a quelle inline sia a quelle definite nei file CSS. Per esempio, ecco un markup compatibile con questa funzionalità:
<div style="background-image: url(image.jpg)">Puoi approfondire il lazy loading delle immagini di sfondo con WP Rocket nella nostra documentazione tecnica.
Come verificare se il lazy loading funziona
Per vedere se il lazy loading viene applicato correttamente al tuo sito web, puoi usare gli strumenti per sviluppatori del browser. Vai alla scheda “Rete” e usa il filtro “Img”. Ricarica la pagina: nell’elenco dovresti vedere solo le immagini above the fold.
Quando inizi a scorrere verso il basso, dovrebbero comparire sempre più immagini. Inoltre, dovresti vedere il valore lazyload nella colonna “Iniziatore”.
Suggerimenti per la risoluzione dei problemi
Se ti accorgi che alcune immagini non vengono caricate in lazy loading anche se hai attivato l’opzione, i motivi possibili sono diversi:
- Alcuni tipi di immagini sono esclusi di proposito, come le gallerie prodotto di WooCommerce
- Le immagini contengono uno dei vari attributi esclusi, come data-src e data-no-lazy
- L’immagine è stata aggiunta dinamicamente con JavaScript
- C’è un conflitto con un altro plugin che aggiunge il lazy loading, oppure il tuo tema ha una propria funzionalità di lazy loading
Per maggiori informazioni, leggi la nostra documentazione sul perché alcune immagini non vengono caricate in lazy loading, sui problemi comuni con il lazyload e sui plugin compatibili.
Come disattivare il lazy loading su WordPress
Ci sono casi in cui vuoi disattivare il lazy loading, che sia su tutto il sito, su un’intera pagina o per immagini specifiche. Ecco diversi modi per farlo.
Disattiva completamente il lazy loading nativo di WordPress
Se vuoi disattivare il lazy loading integrato nel tuo sito WordPress, puoi farlo con questo snippet di codice:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Inseriscilo nel file functions.php del tuo tema (child!). In alternativa, aggiungilo con un plugin come Insert Headers and Footers oppure crea un tuo MU-plugin.
Per disattivare il lazy loading nativo di WordPress solo in contesti specifici o per determinate immagini, fai riferimento alle funzioni e ai filtri della sezione Opzioni di personalizzazione qui sopra.
Disabilita il lazy loading in WP Rocket
Puoi disattivare la funzionalità LazyLoad di WP Rocket con la stessa facilità con cui l’hai attivata. Vai al pannello Media, togli la spunta dalle caselle e salva.
Escludi il lazy loading per articoli e pagine specifici
Se vuoi disattivare questa funzionalità solo su un determinato articolo o una determinata pagina, puoi farlo molto facilmente anche con WP Rocket. Apri la pagina o l’articolo nell’editor e cerca le “Opzioni WP Rocket” nella barra laterale (nota: il contenuto deve essere pubblicato perché siano disponibili).
Ti basta togliere la spunta dall’opzione che non vuoi usare e aggiornare il contenuto. Se un’opzione appare in grigio, devi prima attivarla a livello globale nelle impostazioni di WP Rocket.
Rimuovi il lazy loading per immagini o iframe specifici
Puoi anche disattivare il lazy loading per determinati elementi multimediali. Trovi questa opzione nel pannello Media delle impostazioni di WP Rocket.
Inserisci nella casella il nome del file, la classe CSS, l’attributo img, il nome di dominio (per le immagini esterne) o il nome del file CSS dell’immagine che non vuoi caricare in lazy loading, poi salva. Maggiori informazioni ed esempi nella documentazione.
Tieni presente, però, che non hai bisogno di usare questa funzionalità per escludere dal lazy load le immagini above the fold. Dato che non farlo può avere un impatto così forte sul Largest Contentful Paint e sul punteggio complessivo di PageSpeed Insights, WP Rocket lo fa automaticamente senza che tu debba muovere un dito. Se hai altri motivi per escludere immagini o iframe dal lazy loading, puoi comunque usare il metodo descritto sopra.
Modifica il lazy loading di WP Rocket tramite codice
Se vuoi più controllo sul funzionamento del lazy loading in WP Rocket, puoi anche modificarlo tramite markup. Gli snippet qui sotto vanno nel tuo functions.php o in un plugin dedicato.
Disattiva il lazy loading in modo condizionale
Iniziamo con una struttura di funzione generica che puoi usare per disattivare il lazy loading in diverse circostanze:
add_action('wp', function () {
// Declare condition set to false as a default
$condition = false;
// Build your condition logic to turn ‘$condition’ to ‘true’ when applicable
if ($condition) {
// Disable Rocket Lazy Load if condition is met
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Seguono alcuni esempi di come usare questo approccio.
Disattiva il lazy loading su tutte le pagine
Usalo se vuoi applicare il lazy loading alle immagini dei tuoi articoli ma non a quelle delle pagine:
add_filter( 'wp', function () {
if ( is_page() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Disabilita il lazy load sulla homepage
Disattiva il lazy loading per la homepage del tuo sito (la pagina che imposti in Impostazioni > Lettura > Homepage):
add_filter( 'wp', function () {
if ( is_front_page() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Disattiva il lazy load sulla pagina del tuo blog
Stessa cosa di prima, ma per quando imposti la tua homepage come blog:
add_filter( 'wp', function () {
if ( is_home() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Rimuovi il lazy load dai singoli articoli
Per disattivare il lazy loading su tutti i singoli articoli, mantenendolo però per le pagine e per la homepage del tuo blog, usa questo snippet:
add_filter( 'wp', function () {
if ( is_single() ) {
add_filter('do_rocket_lazyload', '__return_false');
}
}
);Disattiva LazyLoad su immagini specifiche
Con l’attributo data-no-lazy puoi indicare a WP Rocket di non usare il lazy loading su immagini specifiche:
<img src="my-image.jpg" data-no-lazy="1" alt="" width="100" height="100" />Aggiungi un effetto fade-in alle immagini caricate in lazy loading
Per i visitatori può risultare un po’ brusco vedere le tue immagini caricate in lazy loading comparire dal nulla nella pagina. Mostrare le immagini gradualmente è un effetto molto diffuso per migliorare questa esperienza.
Lo snippet CSS seguente aggiungerà un effetto fade-in al tuo sito. Nota che va nel tuo style.css, non nel functions.php:
img[data-lazy-src] {
opacity: 0;
}
img.lazyloaded {
-webkit-transition: opacity .5s linear 0.2s;
-moz-transition: opacity .5s linear 0.2s;
transition: opacity .5s linear 0.2s;
opacity: 1;
}Regola la soglia di LazyLoad
Di default, WP Rocket caricherà le immagini soggette al lazy loading che si trovano entro 300 pixel dalla finestra del browser. Puoi regolare questa soglia così:
add_filter( 'rocket_lazyload_threshold', function ( $threshold ) {
return 100;
});Nota: nell’esempio qui sopra la soglia è impostata a 100px. Modifica il numero come preferisci.
FAQ
Cos’è il lazy loading?
Il lazy loading è una tecnica che rimanda il caricamento di immagini, video e iframe fuori schermo finché non servono, riducendo le richieste non necessarie. Le immagini più in basso nella pagina si caricano solo quando i visitatori scorrono verso di loro, così il browser può caricare più rapidamente le altre parti del sito. Oggi è una funzionalità standard dei browser, che si attiva con un attributo HTML: per questo si parla di “lazy loading nativo”.
Come si usa il lazy loading su WordPress?
Su WordPress il lazy loading nativo funziona di default: dalla versione 5.5 il CMS lo applica alle immagini e dalla 5.7 anche agli iframe, purché abbiano gli attributi width e height. Non esistono però opzioni senza codice per disattivarlo selettivamente, quindi per avere più controllo ti servono un plugin oppure i filtri e le funzioni di WordPress. Con WP Rocket ti basta andare su Impostazioni > WP Rocket > Media e spuntare le caselle dei contenuti per cui vuoi attivarlo: immagini, immagini di sfondo CSS, iframe e video.
Il lazy loading può rallentare il sito?
Sì: se lo applichi alle immagini above the fold, come loghi e immagini hero, il lazy loading può avere un effetto negativo sulle prestazioni. Questo perché l’elemento Largest Contentful Paint è probabilmente un’immagine above the fold, che dovrebbe caricarsi il più rapidamente possibile. Per questo da WordPress 5.9 il lazy loading nativo non si applica al primo iframe o alla prima immagine di una pagina, e WP Rocket esclude automaticamente dal lazy load le immagini above the fold.
Come applicare il lazy loading a video e iframe su WordPress?
Su WordPress il lazy loading nativo si applica anche agli iframe dalla versione 5.7, e l’attributo loading supporta i tag <img> e <iframe>. Con WP Rocket puoi attivarlo spuntando la casella per iframe e video nel pannello “Media”. Il plugin può anche sostituire i video di YouTube incorporati con un’immagine di anteprima.
Come disattivare il lazy loading su WordPress?
Puoi disattivare il lazy load su WordPress con un filtro nel codice, se si tratta del lazy loading nativo, oppure dalle impostazioni di WP Rocket, se usi il plugin. Per il lazy loading nativo, aggiungi add_filter( 'wp_lazy_loading_enabled', '__return_false' ); nel file functions.php del tuo tema (child) o con un plugin come Insert Headers and Footers. In WP Rocket, togli la spunta dalle caselle del pannello “Media” e salva, oppure disattiva le opzioni solo su un articolo o una pagina dalle “Opzioni WP Rocket” nella barra laterale dell’editor.
Inizia subito a usare il lazy loading su WordPress
Il lazy loading è un ottimo modo per migliorare le prestazioni del tuo sito web. È più efficace sui siti con molte immagini, perché impedisce che queste e gli altri elementi multimediali vengano caricati finché non compaiono davvero sullo schermo.
Anche se ora WordPress ha il lazy loading nativo attivo di default, non offre molte possibilità di controllo a chi non è sviluppatore e si applica solo alle immagini e agli elementi iframe. Se vuoi un approccio più granulare e applicare il lazy loading anche a elementi come gli sfondi CSS, la strada giusta è una soluzione basata su un plugin come WP Rocket. Ti permette di disattivare il lazy loading per determinate parti del tuo sito e persino per singoli file.
Provalo subito. Se non ti convince, puoi sempre contare sulla nostra garanzia di rimborso del 100 %.
