¶ Lazy Load
La sezione controlla il caricamento ritardato di immagini, iframe e specifici elementi HTML.
Il lazy load permette di caricare una risorsa solo quando sta per diventare visibile all’utente, riducendo il peso iniziale della pagina e migliorando metriche come LCP e FCP.
¶ Caricamento ritardato di immagini e iframe
¶ Abilita il caricamento ritardato per immagini e iframe
Attiva il lazy load su immagini e iframe non immediatamente visibili.
Riduce il numero di risorse caricate al primo rendering della pagina e diminuisce il consumo di banda.
¶ Dimensioni automatiche per le immagini
Imposta automaticamente dimensioni stimate per le immagini prive di width e height.
Riduce gli spostamenti di layout (CLS) evitando che lo spazio destinato alle immagini venga calcolato solo dopo il caricamento.
¶ Abilita effetti
Applica un effetto di fade-in alle immagini mentre vengono caricate tramite lazy load.
Funzionale solo a livello estetico; non influisce su performance o caching.
¶ Includi iframe
Applica il lazy load anche agli iframe, utile per contenuti esterni come mappe, video, embed.
Gli iframe possono essere pesanti e ritardarli riduce il carico iniziale della pagina.
¶ Includi immagini di sfondo
Applica il lazy load anche a immagini di sfondo definite tramite CSS.
Lo sfondo viene caricato solo quando l’area contenente l’elemento entra in area visibile.
¶ Includi tag audio/video
Consente il caricamento ritardato anche per elementi <audio> e <video>.
¶ Disabilita lazy-load core
Disattiva la funzione nativa di WordPress e utilizza esclusivamente quella del plugin.
Può migliorare la coerenza del comportamento del lazy load, soprattutto in siti complessi.
¶ Escludi immagini per URL
Permette di escludere immagini appartenenti a specifiche pagine.
Accetta una porzione dell’URL per decidere cosa non deve essere caricato in modalità lazy.
¶ Escludi immagini per cartella
Esclude dalla modalità lazy load tutte le immagini appartenenti a una certa cartella (es. /uploads/icone/).
Utile per immagini che devono apparire immediatamente.
¶ Escludi immagini per classe CSS
Esclude immagini che possiedono una specifica classe CSS.
Consente di distinguere elementi essenziali da elementi decorativi.
¶ Caricamento ritardato dei tag HTML
Questa sezione estende il lazy load a elementi HTML specifici quando diventano visibili durante lo scroll o dopo un ritardo impostato.
Adatto per blocchi pesanti: footer, banner, moduli complessi, contenuti fuori viewport.
¶ Abilita lazy load per elementi HTML
Attiva il caricamento ritardato su elementi HTML scelti tramite selettore CSS.
Richiede l’impostazione di almeno un selettore nel campo dedicato.
¶ Selettori CSS per elementi caricati in modalità lazy load
Lista di selettori CSS, separati da virgola, che identificano gli elementi da caricare in ritardo.
Esempio:
img.myclass, div.mysection
L’opzione è utile per differire intere sezioni non critiche e migliorare metriche come LCP.
¶ Metodo di lazy load
Definisce il comportamento che determina quando l’elemento viene caricato:
- Scorrimento: attiva il caricamento quando l’elemento entra nel viewport durante lo scroll.
- Ritardo: attiva il caricamento dopo un delay prefissato in millisecondi.
¶ Ritardo lazy load
Imposta un ritardo in millisecondi prima dell’attivazione del caricamento lazy per tutti gli elementi coinvolti.
Un ritardo elevato può migliorare il FCP ma deve essere usato con cautela per non degradare l’esperienza utente.
¶ Utilizza override CSS
Aggiunge la dichiarazione !important a regole CSS che gestiscono la visibilità durante il lazy load.
Serve a mantenere nascosti gli elementi fino al momento del caricamento effettivo, anche se stili del tema sovrascrivono le classi temporanee.