Impossibile poter gestire al meglio un sito web se non c’è una conoscenza (almeno di base) della funzione per disabilitare il lazy load delle immagini su WordPress. Questa funzione è utile per velocizzare il caricamento delle pagine internet ma non sempre è necessaria. Sappiamo che Google premia i portali che rispettano i Core Web Vitals con maggiori opportunità di posizionamento nella SERP. E conosciamo anche l’incidenza di queste caratteristiche sulla user experience: le persone amano navigare siti web veloci, reattivi, che non si inchiodano durante il caricamento delle risorse.
Cosa facciamo per rispettare questi parametri? Controlliamo i risultati di Pagespeed Insights, comprimiamo le immagini WebP, scegliamo temi leggeri ed eliminiamo tutto quello che non serve. Puntiamo sui sistemi di cache più performanti e basiamo tutto su un hosting performante, ottimizzato con le caratteristiche tecniche per rispondere a queste necessità. In uno scenario del genere, potrebbe essere giusto attivare ma anche disattivare il lazy load. Ma non era una delle funzioni più importanti per il sito web veloce? Tutto dipende dalle circostanze specifiche.
Se vuoi approfondire il lazy load puoi dare uno sguardo all’articolo principale sul nostro blog (serverplan.com/lazy-load). Oggi cerchiamo di capire per quale motivo dovresti eliminare, almeno in determinate circostanze, questa funzione utilissima ma a volte sfavorevole per le prestazioni del sito.
Noi sappiamo che il lazy load, di default presente su WordPress, è una funzione che consente di rimandare il caricamento di risorse non critiche al momento dell’effettivo bisogno. Invece di scaricare l’intera pagina web, comprese tutte le immagini in fondo che forse non verranno mai visualizzate, il browser carica inizialmente solo ciò che appare sullo schermo. Il resto viene scaricato solo quando l’utente scorre verso il basso.
Perché dovrei disabilitare il lazy load? Iniziamo a dire che potresti avviare questo percorso di rendering critico solo per alcune immagini, quelle che si trovano above the fold, per ridurre il ritardo del LCP (Largest Contentful Paint). Altro motivo per disabilitare il lazy load di default: evitare il conflitto con altri servizi. Non puoi tenere attivi due servizi di lazy loading contemporaneamente. Se il plugin e il sistema nativo di WordPress provano a gestire la stessa immagine rischi di avere un effetto contrario e malfunzionamenti vari sul sito.
Da leggere: come rinominare le foto per la SEO
Abbiamo detto che il Largest Contentful Paint misura quanto tempo ci vuole per caricare l’elemento più grande visibile sullo schermo. Se è attivo il lazy load per l’immagine che si trova nell’above the fold, il browser deve prima scaricare il codice della pagina, capire dove si trova l’immagine, e solo allora iniziare a scaricarla. Disabilitandolo, il browser avvia il download immediatamente.
Ottenendo così dei vantaggi in termini di tempi per caricare la pagina. Come si disabilita il lazy load solo su un numero ristretto di immagini? Ci sono alcuni plugin che ti consentono di operare in questa direzione. Ad esempio, Wp Rocket (a pagamento) gestisce questa funzione in modo eccellente. Come fare? Vai in Media e poi in Lazy Load. Troverai un campo chiamato Excluded images or iframes da selezionare per ottenere questa condizione. C’è anche una funzione automatica chiamata Eager Load Contentful Images che identifica da sola le immagini above the fold e le esclude dal lazy load.
Puoi fare lo stesso anche con il plugin Perfmatters – sotto la scheda lazy loading c’è una voce chiamata Exclude Leading Images – ma se preferisci lavorare sul codice puoi utilizzare il tag nativo supportato da tutti i browser moderni (Chrome, Safari, Edge, Firefox). L’attributo loading="eager" comunica al browser: “Scarica questa immagine, non aspettare che l’utente scorra la pagina”. Esempio:
<img
src="banner-principale.jpg"
alt="Benvenuti sul mio sito"
loading="eager"
fetchpriority="high"
width="1200"
height="600">Se stai modificando il codice a mano, ricordati di inserire sempre gli attributi width e height. In questo modo, anche se l’immagine non è ancora caricata, il browser riserva lo spazio necessario, evitando che il testo della pagina salti improvvisamente quando l’immagine appare. In questo modo puoi ottimizzare un altro parametro centrale del famoso Cumulative Layout Shift.
E se vogliamo disabilitare tutte le funzioni di lazy load attualmente presenti sul sito per utilizzare delle soluzioni più performanti? C’è un metodo che non richiede l’installazione di ulteriori plugin. Devi aggiungere una riga di codice al file functions.php del tuo tema child o tramite un plugin come Code Snippets. Questo filtro intercetta la funzione nativa di WordPress che aggiunge automaticamente loading="lazy" alle immagini e agli iframe, bloccandola alla radice.
// Disabilita completamente il lazy loading nativo di WordPress
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Se non vuoi toccare i file più importanti del sito, per paura di danneggiarlo e ritrovarti di fronte alla schermata bianca della morte, puoi utilizzare plugin gratuiti nati esclusivamente per questo scopo. Il più popolare è Disable Lazy Load: una volta attivato, disabilita il lazy loading nativo di WordPress senza bisogno di configurazioni. Disabilitare il lazy load può avere un impatto negativo se non hai un’alternativa pronta. Ad esempio, se hai una pagina con 50 immagini, il browser proverà a scaricarle tutte insieme all’apertura, rallentando il caricamento.
La versione nativa del lazy load su WordPress è sicuramente l’opzione meno impegnativa, quella che ti permette di avere il miglior risultato senza alcun impegno. Quindi, se non hai particolari esigenze, puoi mantenere questa opzione e disabilitare solo le immagini che preferisci con il codice personalizzato.
La scelta del miglior plugin di lazy load, alternativo alla soluzione base, dipende interamente dalle tue priorità tecniche: LazyLoad di WP Rocket rappresenta l’opzione più bilanciata e leggera mentre A3 Lazy Load è la soluzione ideale per personalizzare al massimo questo parametro. Se invece cerchi un pacchetto completo che includa anche compressione e conversione in formati moderni (WebP/AVIF), Smush è la scelta più performante. Infine, per siti con molti contenuti multimediali consiglio Lazy Load for Videos che è lo standard per ottimizzare gli embed di YouTube e Vimeo.
