Decidi cosa serve ora, non cosa appare prima nel markup
Il lazy loading marca una risorsa come non critica fino al momento in cui serve. Classifica le risorse in base al percorso reale: elementi essenziali della prima vista, media sotto il fold, embed opzionali e codice per una rotta o un pannello che verrà mostrato più tardi. La posizione nel CMS non è sufficiente come evidenza; un’immagine può essere offscreen in un template e centrale in un altro.
Rivedi i caricamenti a freddo su un telefono piccolo e su un desktop tipico. Testa anche link di campagne e ancore in pagina, che possono far arrivare un visitatore più in basso nella pagina. Questa revisione ti indica cosa deve essere pronto senza una richiesta triggerata dallo scroll.
Il compito iniziale, la navigazione visibile, i testi chiave e il primo visual significativo devono essere disponibili immediatamente.
Gallerie in fondo alla pagina, mappe, embed social, player offscreen e codice per feature non scelte sono candidati comuni.
Proteggi l’hero e la viewport iniziale
Non lazy-loadare contenuti che probabilmente sono visibili all’apertura della pagina. Google sconsiglia di farlo, e l’analisi approfondita di web.dev mostra che il lazy-loading delle immagini della viewport iniziale può ritardare la LCP. L’elemento LCP può essere un hero, un’immagine prodotto, un poster o testo; verificane l’identificazione su ogni template importante invece di indovinare.
Carica in modo eager un’immagine confermata come LCP. Se i test mostrano che un’immagine critica perde attenzione di rete, prova un hint di fetch-priority più alto per essa. È un suggerimento, non un comando. Un’immagine di sfondo critica definita via CSS potrebbe necessitare di un preload precoce perché il parser non la scopre direttamente; misura anche quel caso.
Controlla le impostazioni predefinite del CMS e dei plugin per immagini in evidenza erroneamente marcate come lazy nelle pagine di elenco.
Usa caricamenti a freddo su mobile e desktop, non soltanto l’anteprima di design su desktop.
Riserva spazio prima che arrivi il media
Il Cumulative Layout Shift (CLS) indica movimenti inaspettati del contenuto visibile. Un’immagine differita senza altezza nota può spingere testo e controlli dopo che un lettore ha iniziato a scansionare o sta per toccare un pulsante. Questo è un rischio di interazione, non soltanto un problema di metrica.
Fornisci attributi width e height accurati per immagini e video, oppure riserva la forma con CSS aspect-ratio. Usa un placeholder con l’impronta finale del componente. Per un frame di terze parti, riserva la sua altezza e fornisci uno stato chiaro di caricamento o di indisponibilità.
Conserva le dimensioni dei media insieme all’asset dove possibile; un rapporto generico non è affidabile per immagini con forme miste.
Scrolla, filtra, apri pannelli, ruota un dispositivo mobile e usa la navigazione indietro per individuare spostamenti successivi.
Mantieni i contenuti reperibili e le interazioni comprensibili
Google Search Central dice che Google non interagisce con le pagine scorrendo o cliccando. I contenuti lazy-loaded importanti dovrebbero caricare quando sono visibili, e l’HTML renderizzato dovrebbe esporre i contenuti o gli URL dei media attesi. Ispeziona pagine rappresentative in Search Console dopo l’implementazione.
Una lista infinita indicizzabile necessita di una rotta paginata per ogni blocco durevole: un URL unico persistente, contenuto stabile a quell’URL e link lungo la sequenza. Questo crea anche un punto condivisibile a cui le persone possono tornare.
Quando un’azione rivela contenuto, mantieni il controllo utilizzabile da tastiera e rendi il risultato comprensibile. Per un aggiornamento significativo non focalizzante come “risultati caricati”, esponi lo stato programmaticamente in modo che le tecnologie assistive possano annunciarlo senza spostare il focus.
Dettagli prodotto, corpo articolo, informazioni di idoneità e istruzioni operative non dovrebbero esistere solo dopo un’azione dell’utente.
Non ritardare i controlli necessari per il checkout o l’autenticazione. Fai esaminare le modifiche a pagamento, identità e script di terze parti da revisori qualificati per sicurezza e conformità.
Usa il meccanismo meno fragile possibile
Per immagini e iframe offscreen ordinari, il lazy loading nativo del browser è normalmente l’inizio più semplice. Il browser decide quando avviare la richiesta vicino alla viewport; quella distanza non è una garanzia. L’evento window load può scattare mentre risorse lazy rimangono incomplete.
Usa un Intersection Observer quando un componente nominato richiede un’attivazione personalizzata, ad esempio montare un pannello costoso poco prima che appaia. Mantieni l’observer stretto e avvia il lavoro abbastanza presto per scroll veloci. Usa code splitting per rotte non iniziali o feature opzionali, non come motivo per ritardare il compito corrente.
Non sostituire una semplice sorgente con data attribute, diversi script e una libreria a meno che il comportamento aggiunto non risolva un’esigenza testata.
Un embed opzionale dovrebbe avere un chiaro fallback o uno stato di omissione, non uno spinner permanente.
Misura, rilascia e risolvi insieme
Confronta baseline e candidato sugli stessi URL, stato della cache, viewport e percorso utente. Usa test a freddo e vincolati su mobile più controlli su dispositivi reali dove possibile. Registra LCP, sequenza visibile, layout shift, errori media, HTML renderizzato e azioni essenziali. I dati di campo integrano i test da laboratorio.
Rilascia una modifica reversibile e limitata al template. Registra gli asset spostati da eager a deferred, il riferimento al deployment, l’azione di cache, il proprietario e il primo passo di rollback. Se la LCP diventa lazy o un percorso di conversione risulta incompleto, rimuovi la regola dall’asset critico e verifica di nuovo. Riesamina dopo modifiche a tema, CMS, servizio immagini, tag o embed.
Concentrati sulla prevenzione e la risoluzione di un’esperienza rotta, non solo sul reporting dello stato corrente o sul monitoraggio.
Annulla l’impostazione del template interessato prima di ritoccare ogni immagine a livello di sito.