Come utente del web, avrai presente quant’è frustrante dover aspettare che una pagina web finisca di caricarsi. Non a caso, la lentezza è uno dei motivi principali per cui le persone abbandonano un sito, a volte prima ancora di essere riuscite a visualizzarlo.
Per fortuna esistono vari accorgimenti per evitare che i visitatori perdano la pazienza, e uno di questi consiste nell’implementare il lazy load in WordPress.
Secondo uno studio di Google, quando il tempo di caricamento di una pagina passa da 1 a 3 secondi la probabilità che venga abbandonata aumenta del 32%; se la visualizzazione della pagina si fa attendere per più di 5 secondi la probabilità di abbandono sale al 90%. In particolare chi si connette da mobile abbandona un sito che impiega più di 3 secondi a caricarsi in più della metà dei casi sostiene ancora il colosso americano.
Sul fatto che un tempo di caricamento lungo sia fastidioso per l’utente ci sono pochi dubbi; purtroppo però un sito WordPress lento rischia di non piacere neanche ai motori di ricerca.
Vediamo quindi come migliorare sia l’esperienza utente che i Core Web Vitals senza rinunciare a una sola immagine o video, ma facendo sì che si carichino solo quando serve.
Table of Contents
Cos’è il lazy load?
Il lazy load – letteralmente caricamento pigro –, o caricamento differito, è una tecnica che permette di caricare immagini e altri contenuti multimediali solo quando stanno per essere visualizzati dalle persone.
Forse ti sembrerà ovvio, ma non lo è: infatti dove non è configurato il lazy load, al momento dell’apertura il browser carica tutti gli elementi multimediali presenti nella pagina.
Invece con il lazy load attivo, il browser carica solo gli elementi visibili nella parte superiore dello schermo, quella che l’utente vede appena entra. Gli altri contenuti vengono caricati dinamicamente man mano che (e solo se) scorre la pagina verso il basso.
In italiano Google lo chiama caricamento lento, il che lo fa sembrare un problema, mentre non lo è affatto.
Il caricamento differito funziona grazie all’aggiunta dell’attributo HTML loading=”lazy” ad alcuni elementi della pagina web, uno standard supportato da tutti i principali browser attuali che funziona in qualsiasi CMS, non solo su WordPress.
Dai uno sguardo alla nostra guida pratica se stai iniziando a pensare di imparare l’HTML.
Come funziona il caricamento di una pagina web?
Per capire il lazy load, ti sarà utile avere un’idea di cosa succede quando una persona apre una pagina web.
Ogni volta che entri su un sito, il browser invia una richiesta al server, che risponde con l’HTML.
Il browser scarica l’HTML e lo usa per costruire il DOM (Document Object Model), cioè una rappresentazione ad albero degli elementi della pagina.
Poi carica il CSS (che dà lo stile al DOM) e JavaScript, che rende interattivi i siti web.
Impatto di immagini e video sulla velocità di WordPress
È davvero così importante regolare il caricamento di immagini e video? Fino a che punto i contenuti multimediali possono rallentare un sito WordPress?
Ho voluto fare una prova su un sito davvero basico (senza immagini di sfondo nella testata) con installato il tema Neve, famoso per essere ultraleggero. E questi sono i valori registrati con PageSpeed Insights su una pagina che contiene un articolo senza immagini o video:
Ed ecco quegli stessi parametri dopo l’incorporamento di un video YouTube: lo Speed Index, che misura il tempo che impiega un sito ad apparire completo agli occhi dell’utente, è passato da 0.9s a 3.7s, valore critico perché superiore ai 3s.
Se al posto del video inserisco una sola immagine di grosse dimensioni – PNG non ottimizzata – la velocità è comunque inferiore al valore limite.
Con 3 immagini di questo tipo e nessuna precauzione per ridurne l’impatto, la situazione diventa drammatica.
Ecco perché sono stati escogitati i diversi sistemi per ridurre l’impatto dei contenuti multimediali sulle prestazioni dei siti, tra cui il lazy load.
Vantaggi del lazy load
Lo scopo principale del caricamento differito è ridurre il peso iniziale della pagina e accelerare il tempo di caricamento della parte subito visibile (il cosiddetto above the fold). Ma ci sono altri effetti ‘collaterali’ positivi.
Il lazy load smorza il carico sul server perché riduce le richieste HTTP e distribuisce il trasferimento dei dati su un tempo più lungo, e così permette di risparmiare sull’hosting e sulla CDN.
Ottimizza l’esperienza utente, soprattutto sui dispositivi mobili o quando la connessione è lenta o instabile.
Migliora la SEO, poiché la velocità misurata attraverso i Core Web Vitals è un fattore di ranking per Google. In particolare, il caricamento differito aiuta il sito a ottenere migliori punteggi nel Largest Contentful Paint – misura del tempo impiegato a caricare l’elemento più grande nella finestra – e First Contentful Paint – secondi necessari al browser per visualizzare il primo elemento della pagina.
L’impatto di questa strategia è proporzionale alla quantità di contenuti multimediali. Sarà grande, ad esempio, in caso di blog con articoli lunghi e ricchi di immagini come ricette, o guide con molti screenshot come quelle di SupportHost; negozi online, portfolio fotografici, pagine con contenuti interattivi e video incorporati.
Il lazy load nativo di WordPress
In WordPress, il lazy load è stato introdotto come funzione nativa a partire dalla versione 5.5 (rilasciata nel 2020) ed è attivo per impostazione predefinita sia sui contenuti singoli che sugli archivi.
Con la versione 5.7 (del 2021) il caricamento differito è stato esteso anche agli iframe, purché contengano gli attributi width e height, che nella maggior parte dei casi sono presenti nel codice di incorporamento.
A partire dalla versione 5.9 di WordPress (2022) il lazy load non viene più applicato alla prima immagine o al primo iframe della pagina, che nella maggior parte dei casi ricadono nella vista iniziale – e questo spiega perché i contenuti multimediali che ho aggiunto ai miei articoli ne abbiano affossato le prestazioni nonostante stia usando l’ultima versione di WordPress.
A cosa si applica il lazy load di WordPress?
Oggi la funzionalità nativa di lazy load di WordPress gestisce la maggior parte delle immagini e degli iframe: i video di YouTube, le mappe di Google Maps, i podcast di Spotify, ecc.; in pratica gli elementi distinti dai tag HTML <img> e <iframe>.
Non si attiva con i video caricati direttamente dal pc – che corrispondono al tag <video> –, ma in ogni caso è buona norma inserirli prima sulle piattaforme apposite e da lì importarli sul sito, per non appesantire inutilmente il proprio server.
Il core di WordPress è in grado di applicare in automatico l’attributo HTML loading=”lazy” in corrispondenza dei tag <img> e <iframe>. Anche se spesso la piattaforma d’origine include già l’attributo lazy nel codice di incorporamento – come succede con gli iframe che inseriscono le mappe di Google Maps in WordPress o con quelli di Spotify.
Le versioni di WordPress successive alla 5.7 applicano in automatico il caricamento differito alle immagini e agli iframe che si trovano all’interno di:
- contenuto degli articoli
- estratti degli articoli
- widget di testo.
Limiti del lazy load nativo di WordPress
Alcuni limiti del lazy load nativo di WordPress non sono stati superati neanche nelle versioni più recenti del CMS.
Per iniziare, il core di WordPress non applica il caricamento differito automatico alle immagini di sfondo, sia che siano inserite via CSS sia ‘inline’ nel codice HTML.
In più non è in grado di generare segnaposto e anteprime per i video, che permettono di caricarli solo se l’utente usa il tasto play e rendono il sito ancora più efficiente.
Un altro limite del lazy load nativo di WordPress riguarda la configurazione: non esiste un pannello per modificare le impostazioni del caricamento differito o disattivarlo solo su certi tipi di elementi. È possibile intervenire su pochi aspetti della funzione – e solo attraverso il codice PHP… ne riparleremo tra pochissimo.
Infine alcuni page e site builder, come GeneratePress Premium, potrebbero ignorare o sovrascrivere l’attributo loading=”lazy” associato da WordPress alle immagini; così come può capitare, ebbene sì, che WordPress non riconosca l’iframe e non riesca ad assegnare l’attributo in automatico.
Come capire se il lazy load nativo non sta funzionando
Per accertarti che il caricamento differito stia funzionando puoi ispeziore il codice HTML della pagina e vedere se in corrispondenza dei tag <img> e <iframe> c’è l’attributo loading=”lazy”.
Anche con un test su PageSpeed Insights è possibile verificare che i Core Web Vitals siano a posto.
Se il lazy load non funziona, dovresti trovare fra le opportunità la voce “Rimanda immagini fuori schermo”, con accanto un semaforo rosso, e nei dettagli “Potresti usare il caricamento lento per le immagini fuori schermo e nascoste al termine del caricamento di tutte le risorse fondamentali per ridurre il Tempo all’interattività”, con un rimando a Largest Contentful Paint (LCP) e First Contentful Paint (FCP).
Nel mio caso il semaforo è verde perché si tratta di un controllo superato.
Anche GTmetrix e Lighthouse ti permettono di controllare le prestazioni delle pagine e accorgerti di eventuali problemi.
Gestire il lazy load di WordPress senza plugin
Visto che non esiste un pannello delle impostazioni, per gestire il lazy load di WordPress senza un plugin non resta che ricorrere al codice: HTML, Javascript o PHP.
Impostare il lazy load di singoli elementi (con HTML)
In WordPress puoi attivare manualmente il lazy load aggiungendo l’attributo loading=“lazy” nell’HTML agli elementi contraddistinti dai tag <image> e <iframe> e solo a quelli – negli altri casi non funzionerà. Può essere utile quando WordPress non riesce ad attribuire in automatico l’attributo necessario.
Ecco un esempio di inserimento dell’attributo nell’iframe di un video YouTube:
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
loading="lazy"
width="560"
height="315"
title="Video YouTube"
allowfullscreen
></iframe>Oppure nel tag <img> di un’immagine:
<img
src="https://esempio.com/immagine.jpg"
loading="lazy"
alt="Descrizione dell’immagine"
width="600"
height="400"
>Disattivare il lazy load di WordPress su immagini specifiche (con HTML)
Per escludere singole immagini dal lazy load automatico di WordPress, bisogna intervenire manualmente, dal codice, ed è possibile in due casi.
Se le hai inserite con il blocco HTML personalizzato di Gutenberg: in questo caso puoi rimuovere manualmente l’attributo loading=”lazy”.
Quando scrivi codice PHP, ad esempio in un template, puoi disattivare il lazy load per una singola immagine assegnando all’attributo loading il valore ‘eager’ nella funzione wp_get_attachment_image() – un modo per dire a WordPress di caricare subito l’immagine.
La stringa di codice finale assomiglierà a questa:
echo wp_get_attachment_image( $id, 'full', false, [ 'loading' => 'eager' ] );Personalizzare il lazy load di WordPress con PHP
Sul sito di WordPress puoi trovare tante funzioni, anche per il lazy load, da inserire nel file functions.php del tuo tema per modificare il comportamento del sito.
wp_lazy_loading_enabled disattiva il lazy load per le immagini quando si verifica una condizione stabilita da te (ad esempio su una certa pagina).
wp_filter_content_tags() gestisce l’aggiunta degli attributi srcset, sizes – che aiutano il browser a scegliere l’immagine più adatta in base alla dimensione dello schermo e alla risoluzione – e loading – che abilita il lazy load.
wp_img_tag_add_loading_optimization_attrs() aggiunge agli elementi attributi utili per ottimizzare il caricamento differito, come:
- loading (lazy o eager);
- decoding (es. async) per indicare al browser come decodificare l’immagine;
- fetchpriority (es. high, low) suggerisce la priorità di caricamento dell’immagine.
wp_iframe_tag_add_loading_attr() serve per aggiungere loading=”lazy” agli iframe.
wp_omit_loading_attr_threshold() imposta quante immagini o iframe iniziali escludere dal lazy load.
Come si usano queste funzioni?
Nel pannello di amministrazione, in Aspetto > Editor del tema assicurati di essere sul tema child e apri il file functions.php dal link sulla barra a sinistra.
Qui puoi inserire il codice che ti serve specificando le condizioni di applicazione. In caso di dubbi puoi testare le modifiche sullo staging del sito prima di applicarle alla versione visibile al pubblico.
Personalizzare il lazy load di WordPress con JavaScript
Se hai familiarità col codice, potresti configurare il lazy load di WordPress attraverso JavaScript (JS), da inserire anche in questo caso nel file functions.php.
Gli script JS possono espandere il caricamento differito a elementi che non sono coperti dalle funzioni native di WordPress, come le immagini gestite con il CSS, oppure aggiungere effetti, come la sfocatura prima del caricamento.
Gli script JS per il lazy load, come i plugin, usano un sistema per il caricamento differito diverso da quello di WordPress: sfruttano l’API Intersection Observer, una funzionalità che rileva quando un elemento fuori dallo schermo si avvicina all’area della pagina visibile all’utente.
Non è necessario scrivere il codice da zero: puoi sfruttare librerie JavaScript di script per il caricamento differito già pronti come lazysizes e vanilla-lazyload, disponibili su GitHub.
Quando usare un plugin per il lazy load su WordPress?
Ha senso oggi usare un plugin per il lazy load su WordPress? Come sempre, dipende; in molti casi sì.
Innanzitutto ci sono siti che hanno installate versioni di WordPress non recenti.
Se usi una versione del CMS precedente alla 5.5, ad esempio, hai assolutamente bisogno di un sistema per automatizzare il caricamento differito visto che il core non se ne occupa.
Con una versione di WordPress precedente alla 5.7 e molti video o mappe incorporati, un plugin potrebbe esserti utile per aggiungere in automatico l’attributo loading=“lazy”. Se inserisci sporadicamente questo tipo di risorse nei tuoi post, invece, puoi valutare di inserirlo a mano di volta in volta nell’HTML.
Se la tua versione di WordPress è precedente alla 5.9 e cerchi un modo pratico per assicurarti che il caricamento differito non venga applicato alla parte alta della pagina.
Passando alle versioni successive alla 5.9, un plugin WordPress per il lazy load può comunque essere utile.
Ad esempio se hai sezioni con immagini di sfondo, magari molto grandi, che non si trovano nella parte superiore della pagina.
Oppure se cerchi la soluzione più rapida per configurare il lazy load o al contrario vuoi personalizzare tutti gli aspetti del caricamento differito e delle anteprime, ma sempre attraverso una comoda interfaccia.
Infine, se stai già usando componente aggiuntivo per velocizzare il sito, come WP Rocket o LiteSpeed Cache, la cosa migliore è attivare la funzionalità di lazy load del plugin, che è con tutta probabilità più completa di quella nativa del CMS.
Migliori plugin WordPress per il lazy load
Nella sezione Lazy loading plugin sul sito di WordPress c’è l’imbarazzo della scelta tra componenti aggiuntivi gratuiti e con ottime recensioni.
Qual è dunque il migliore plugin per il lazy load in WordPress? Come sempre, dipende dalle esigenze del tuo sito e dalle tue preferenze. Tanto per iniziare, sappi che puoi attivare il caricamento differito dei contenuti multimediali con diversi tipi di strumenti:
- plugin lazy load generici, che gestiscono tutti gli aspetti del lazy load;
- plugin per le immagini, che si occupano di ottimizzazione delle immagini a 360 gradi;
- plugin per i video, spesso capaci di offrire anche la personalizzazione dei contenuti incorporati oltre al lazy load.
Plugin lazy load
Tra i più popolari plugin capaci di integrare le funzionalità di caricamento differito che mancano su WordPress, o sostituirle del tutto, ci sono Lazy Load by WP Rocket e a3 Lazy Load.
LazyLoad by WP Rocket
LazyLoad by WP Rocket, di WordPress Media, vanta più di 100.000 installazioni attive e una valutazione media di 4.2 stelle su 5. È gratuito e aggiornato spesso, con pochissime impostazioni, ideale per chi cerca una soluzione semplice e veloce per il caricamento differito su WordPress. Lo script ‘pesa’ meno di 10KB e non usa librerie JavaScript, il che lo rende davvero leggero.
Se vuoi provare LazyLoad, vai prima di tutto nell’admin di WordPress, in Plugin > Aggiungi nuovo, cercalo, fai clic su Installa e attivalo non appena compare il pulsante apposito.
Il plugin comparirà nell’elenco e potrai accedere alle impostazioni cliccando su Settings.
Per configurarlo ti basterà un attimo; devi decidere solo se:
- attivare il lazy load per le immagini;
- attivare il lazy load per iframe e video;
- e se impostare una miniatura per i video di YouTube.
Per testare il funzionamento di LazyLoad by WP Rocket, ho selezionato tutte le opzioni, poi sono tornata all’articolo in cui avevo inserito il video di YouTube.
Ho notato subito la differenza perché al posto del video c’era un’immagine d’anteprima molto compressa.
Ricordi le prestazioni dell’articolo col video incorporato prima dell’installazione del plugin? Eccole:
Come vedi, ora la pagina con video mantiene gli stessi punteggi di quando conteneva solo testo.
Cosa aggiunge questo plugin lazy load rispetto alla funzionalità nativa di WordPress? Soprattutto 2 cose: permette di attivare il caricamento differito anche sulle immagini di sfondo, inserite sia inline che col CSS, e di applicare anteprime statiche agli iframe dei video, con impatto positivo misurabile sulle prestazioni.
Per saperne di più, puoi consultare la documentazione di supporto ufficiale.
a3 Lazy Load
a3 Lazy Load, di a3rev, è un altro plugin per il caricamento differito in WordPress molto diffuso, e gratuito, con oltre 100.000 installazioni attive e valutazione media pari a 4.3 stelle su 5. Non a caso, lo abbiamo già incontrato parlando di come ottimizzare le immagini per la SEO.
a3 Lazy Load offre un gran numero di opzioni quindi richiede qualche minuto di ragionamento sulla configurazione, con la possibilità di cercare informazioni e chiedere aiuto sul forum di supporto.
Se vuoi metterlo alla prova, lo trovi nella solita sezione dell’admin Plugin > Aggiungi nuovo, dove puoi cercarlo, installarlo e attivarlo con gli appositi pulsanti.
Poi troverai le impostazioni nella schermata Plugin.
In questo caso hai qualche opzione in più.
Per iniziare a3 Lazy Load permette di scegliere se integrare la funzione nativa di WordPress applicando il lazy load agli elementi che il core del CMS non è in grado di caricare in modo differito; oppure disattivare la funzione nativa di WordPress e sostituirla del tutto.
Riguardo alle immagini, questo plugin offre la possibilità di attivarne o disattivarne il caricamento e di escludere eventualmente:
- le immagini nel contenuto
- quelle nei widget
- quelle nelle anteprime dei post
- quelle nei gravatar.
Inoltre prevede l’opzione Noscript Support, con cui riesce a mostrare le immagini anche a chi ha JavaScript disabilitato.
Si possono escludere dal lazy load le immagini in base alla classe dalle impostazioni generali, così come singole immagini aggiungendo nel codice la classe skip-lazy o l’attributo data-skip-lazy.
a3 Lazy Load funziona anche con le gallerie di immagini con scorrimento orizzontale; basta inserire il nome della classe o l’ID del contenitore della galleria nelle impostazioni generali.
Parlando di video e iframe invece, con a3 Lazy Load puoi scegliere se attivare il caricamento differito di tutti i video e iframe incorporati e video HTML5, dei video nel contenuto e negli widget, e anche in questo caso attivare Noscript Support.
Anche video e iframe possono essere esclusi in base alla classe o singolarmente aggiungendo la classe o l’attributo di esclusione.
Per tutti i tipi di elementi multimediali, l’esclusione si può far dipendere anche dal tipo di pagina (home page, articoli, pagine, archivi, ecc.) e dal URI.
Sono disponibili effetti e colori di sfondo da applicare alle immagini e video in caricamento.
Inoltre si può espandere l’area visibile della pagina di un numero di pixel a scelta incidendo così sul momento di inizio del caricamento degli elementi.
Il vantaggio di usare un plugin come a3 Lazy Load? La possibilità di gestire in lazy load qualsiasi tipo di iframe, comprese le mappe di Google Maps, i pulsanti di Facebook e i podcast; più il massimo controllo su come avviene il caricamento differito.
Plugin per immagini (e lazy load)
Un’alternativa ai plugin lazy load sono quelli che si occupano di ottimizzare le immagini e in più supportano il caricamento differito, con il vantaggio di riunire tante funzionalità in unico strumento.
Smush
Smush propone diversi strumenti per ottimizzare le immagini in modo davvero semplice e adatto a chi ha poco tempo o è alle prime armi. Nella versione premium permette anche di trasformare le immagini in WebP per WordPress e renderle più leggere ed efficienti all’interno del tuo sito.
Lo trovi sull’admin del sito nella sezione Plugin > Aggiungi nuovo, dove puoi cercare Smush, installarlo e attivarlo con gli appositi pulsanti.
Non appena entri sul menù di Smush comparso nella barra a sinistra, si avvia la procedura guidata che ti permette di ottimizzare tutte le immagini per WordPress e anche di attivare il lazy load delle immagini con un clic. In ogni caso puoi accedere alla funzione in qualsiasi momento dal menù del plugin.
Sempre con un clic, puoi attivare altre funzionalità per ridurre il ‘peso’ delle immagini: la compressione automatica per tutti i nuovi caricamenti e sulle immagini del tema WordPress, la rimozione dei metadati EXIF provenienti dalla fotocamera, ecc.
Plugin per video (e lazy load)
I plugin per il caricamento differito gestiscono di solito anche gli iframe di YouTube, a volte anche di Vimeo o altre piattaforme; ci sono però dei plugin specifici per i video incorporati in WordPress, come Lazy Load for Videos e WordPress YouTube Lyte.
Che vantaggi offrono? In generale permettono una maggiore personalizzazione delle anteprime e dello stile del player.
Lazy Load for Videos
Ecco un plugin per i video pensato sia per Youtube che per Vimeo, con oltre 10.000 installazioni e 4.4 stelle su 5.
Puoi cercarlo e installarlo da Plugin > Aggiungi nuovo, e attivarlo con l’apposito pulsante.
Nelle impostazioni globali del plugin, che trovi in Impostazioni > Lazy Load for Videos, hai la possibilità di:
- decidere di caricare CSS e JavaScript del video solo quando viene avviato;
- personalizzare il bottone play scegliendone il colore o eliminandolo del tutto;
- selezionare a piacere la qualità dell’immagine-miniatura (alta, standard o bassa);
- inserire CSS personalizzato.
Inoltre il plugin prevede tutta una serie di opzioni per la visualizzazione dei video, permettendoti ad esempio di scegliere di mostrare o no il titolo, aggiungere un testo in sovraimpressione, cambiare i colori dei comandi e delle barre di avanzamento.
Una caratteristica che distingue Lazy Load for Videos sono i due pannelli separati per le impostazioni di YouTube e Vimeo, grazie ai quali è anche possibile attivare o disattivare il caricamento differito anche per una sola delle due piattaforme.
WordPress YouTube Lyte
L’ultimo plugin lazy load che vedremo è uno strumento specifico per migliorare le prestazioni dei video YouTube incorporati in WordPress: WordPress YouTube Lyte, con oltre 30.000 installazioni attive e 4.8 stelle su 5.
Offre meno opzioni per i video YouTube rispetto a Lazy Load for Videos e può essere una buona scelta se hai intenzione di inserire sul tuo sito solo video di questa piattaforma e vuoi dedicare poco tempo alla configurazione.
Per installare WordPress YouTube Lyte la procedura è la solita da Plugin > Aggiungi nuovo. Dopodiché il lazy load sui video di youtube sarà attivo per impostazione predefinita.
Entrando in Impostazioni > WordPress YouTube Lyte trovi un unico pannello di gestione in parte tradotto in italiano. Da qui puoi scegliere, tra le altre cose:
- dimensione e posizione del player
- aggiunta di link a YouTube sotto ai video incorporati
- forzatura dell’HD
- cache locale per le miniature.
C’è anche la possibilità di collegare l’API YouTube e permettere al plugin di recuperare le informazioni relative a ciascun video.
Disattivare il lazy load di WordPress
Dopo aver installato un plugin per il caricamento ritardato, è buona norma disattivare il lazy load nativo di WordPress per prevenire conflitti o il doppio caricamento delle immagini – infatti molti plugin suggeriscono esplicitamente di farlo.
Se scegli di farlo manualmente, dovrai modificare il file functions.php, per l’esattezza quello del tuo tema child, come spieghiamo nella guida completa sull’argomento.
Se lo hai già, o dopo averlo creato, vai in Aspetto > Editor del tema e assicurati che sia selezionato proprio il tema child. Poi apri il file functions.php che vedi nella barra a destra.
Proprio alla fine del file, oppure subito prima del tag ?> se presente, inserisci lo snippet:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Per l’esattezza in questa posizione:
Dopo aver salvato, puoi controllare che la modifica sia andata a buon fine nell’HTML di una qualsiasi pagina del tuo sito, che trovi facendo clic col tasto destro (da front end) e scegliendo dal menù Visualizza sorgente pagina. È tutto a posto se i tag <img> non hanno più l’attributo loading=”lazy”.
Se vuoi disattivare il caricamento differito senza passare dal codice, puoi installare un plugin che fa questo e solo questo: Disable Lazy Load.
Assicurarsi che il lazy load non danneggi la SEO
Per avere la certezza che il caricamento differito attivato non sia controproducente per la SEO è meglio controllare una serie di aspetti.
Prima di tutto verifica che i contenuti posizionati nella parte della pagina subito visibile siano caricati immediatamente per garantire una buona UX e non penalizzare il Largest Contentful Paint (LCP).
Assicurati che i contenuti per cui è previsto il lazy load restino accessibili al crawler di Google: puoi farlo dalla Search Console da Controllo URL. Dopo aver inserito l’indirizzo e avviato il test, clicca su Visualizza pagina sottoposta a scansione. Si apre una finestra con una sezione HTML in cui puoi verificare che siano presenti le immagini (magari aiutandoti con la barra di ricerca).
Infine, dove possibile, sfrutta l’opzione per inserire un tag <noscript> con una versione alternativa delle immagini/video per i browser che non supportano JavaScript.
Come avrai capito, il lazy load non sostituisce ma integra le altre buone pratiche per velocizzare WordPress. Nonostante il caricamento differito, ottimizzare le immagini resta imprescindibile, e il nostro confronto AVIF – WebP può aiutarti a scegliere tra i due formati più moderni ed efficienti.
Conclusioni
Siamo arrivati alla fine di questa guida al lazy load, dove abbiamo scoperto che a partire dalla versione 5.5 in WordPress è stata introdotta e poi ampliata una funzionalità automatica per il caricamento differito, per immagini e iframe.
Poiché non esiste un pannello delle impostazioni, si possono includere o escludere elementi dal lazy load nativo solo attraverso il codice – HTML, PHP o JS – oppure installando un plugin.
I plugin per il lazy load permettono anche di regolare con un clic ulteriori aspetti del caricamento differito, estenderlo a tipi di iframe e di immagini non previsti dalla funzione nativa di WordPress e velocizzare ancora di più la pagina introducendo segnaposto leggeri per i video.
Alcuni di questi plugin sono immediati da configurare, altri offrono più impostazioni e permettono di differenziarle a seconda della fonte del contenuto multimediale, altri ancora permettono di ottimizzare le immagini con funzionalità aggiuntive.
Tu hai già attivato il lazy load sul tuo sito o lasci fare alla funzionalità nativa di WordPress? Come sta andando? Se ti va, parliamone nei commenti.
Lascia un commento