Controllo del lazy loading
L’immagine giusta al momento giusto
Questo controllo del lazy loading legge in ordine ogni immagine e ogni frame di una pagina e giudica quando si carica ciascuno. Trova le immagini più in basso che caricano troppo presto, le immagini principali che aspettano troppo e quelle senza spazio riservato.
- GratisPrezzo
- LCP, CLSMisura
- NessunaRegistrazione
- NienteSalvato
Controllo del lazy loading
Quali immagini aspettano lo scorrimento, quali caricano troppo presto e quali rallentano il rendering più grande
- Immagini e frame
- 0
- In attesa dello scorrimento
- 0
- Caricano subito
- 0
- Da migliorare
- 0
- Già corrette
- 0
| # | Elemento | Caricamento | Verdetto | Cosa fare |
|---|---|---|---|---|
| Incolla un indirizzo qui sopra e l’ordine di caricamento arriva qui. | ||||
La posizione si legge dall’ordine del codice, perché una pagina letta su un server non viene mai impaginata. Le prime immagini sono trattate come quelle che un visitatore vede per prime, cosa vera in quasi ogni layout e da verificare a occhio sul tuo.
Pronto. Incolla un indirizzo pubblico e questo server ne legge le immagini una volta.
Il lazy loading ha due facce
Il lazy loading dice al browser di scaricare un’immagine solo quando sta per entrare nello schermo.
Usato sulle immagini più in basso, fa risparmiare dati e fa arrivare prima la parte alta della pagina. Usato sulla prima immagine, invece, fa l’opposto.
La prima immagine grande è di solito ciò che i Core Web Vitals misurano come Largest Contentful Paint. Se aspetta lo scorrimento, l’intera pagina risulta lenta.
Quindi la risposta giusta dipende da dove si trova ogni immagine e dal momento in cui serve. È la domanda che questo controllo pone a ciascuna.
Quali immagini dovrebbero aspettare
Tutto ciò che un visitatore deve scorrere per raggiungere. Per esempio gallerie, immagini in fondo a un articolo, loghi nel footer e video incorporati.
I frame meritano un’attenzione speciale. Un video o una mappa incorporati caricano un’intera seconda pagina, quindi loading="lazy" su un iframe spesso fa risparmiare più che su qualsiasi immagine.
Quali immagini non devono aspettare
L’immagine principale, la foto prodotto in alto e il logo nell’intestazione devono caricarsi tutti subito.
Infatti l’immagine più grande in alto può fare di più. fetchpriority="high" dice al browser di scaricarla prima delle altre, cosa che spesso migliora in modo visibile il Largest Contentful Paint.
Chiedere priorità alta e lazy loading sulla stessa immagine è una contraddizione, e perciò il controllo la segnala.
Perché width e height contano qui
Un’immagine senza width e height non ha spazio riservato. Quando finalmente arriva, tutto ciò che sta sotto salta, e i Core Web Vitals lo contano come spostamento del layout.
Le immagini in lazy peggiorano la cosa, perché arrivano mentre il lettore sta già scorrendo. Di conseguenza il controllo considera un errore la mancanza di dimensioni su ogni immagine.
Imposta gli attributi sulle proporzioni reali dell’immagine. Il CSS responsive può comunque ridimensionarla, perché al browser serve solo il rapporto.
Lazy loading nativo o via script
I plugin più vecchi nascondono l’indirizzo reale in data-src e lo scambiano con uno script. Funziona per i visitatori, ma i crawler e chi non ha JavaScript vedono solo un segnaposto.
L’attributo loading="lazy" non richiede alcuno script ed è supportato da ogni browser attuale. Quindi il controllo lo consiglia ovunque trovi il vecchio schema.
Come si giudica la posizione
Una pagina letta su un server non viene mai impaginata, quindi il controllo usa l’ordine del codice. Le prime tre immagini valgono come prima schermata, cosa vera in quasi ogni layout, anche se conviene dare un’occhiata al tuo.
In questa pagina
- Lo strumento
- Il lazy loading ha due facce
- Come usare il controllo del lazy loading
- Cosa distingue questo controllo del lazy loading
- Regole per il lazy loading delle immagini
- Sei errori di lazy loading che rallentano le pagine
- Domande frequenti sul lazy loading
- Strumenti per immagini più veloci
Continua
Come usare il controllo del lazy loading
Un indirizzo in entrata; tutte le immagini e i frame in uscita, nell’ordine in cui la pagina li elenca.
- 1
Incolla l’indirizzo della pagina
Usa la pagina che ti interessa di più, di solito la home o una landing importante.
- 2
Osserva le tre righe in cima
Sono le immagini che un visitatore vede per prime. Quindi nessuna dovrebbe aspettare lo scorrimento.
- 3
Quindi scorri il resto del rapporto
Sotto la prima schermata, ogni immagine e ogni frame dovrebbero avere loading="lazy".
- 4
Sistema le dimensioni per ultime
Aggiungi width e height dove mancano, poi ripeti il controllo.
Cosa distingue questo controllo del lazy loading
Contare loading="lazy" è facile. Invece sapere dove aiuta e dove danneggia è la parte utile.
Prima la posizione
Ogni immagine è giudicata per dove si trova, quindi un’immagine principale in lazy è un errore e non un successo.
Il rendering più grande protetto
Le prime immagini che aspettano, e la priorità alta mescolata al lazy loading, sono segnalate come le correzioni più urgenti.
Spostamento del layout controllato
La mancanza di width e height viene rilevata su ogni immagine, perché le immagini in lazy peggiorano il salto.
Loader via script individuati
I segnaposto data-src che i crawler non vedono mai vengono nominati, con l’attributo nativo da usare al loro posto.
Anche i frame
Video e mappe incorporati si controllano insieme alle immagini, perché spesso sono la cosa più pesante della pagina.
Esporta con un clic
Copia il report o scaricalo in CSV per chi costruisce la pagina.
Regole per il lazy loading delle immagini
Otto abitudini che rendono il lazy loading un guadagno e non una penalità.
- Mai il lazy loading sull’immagine principale. La prima immagine grande è ciò che misura il Largest Contentful Paint, quindi deve iniziare subito a scaricarsi.
- Dai priorità alta all’immagine principale. fetchpriority="high" su quell’unica immagine la mette in testa alla coda.
- Caricamento differito per ciò che sta sotto la piega. Immagini e frame da raggiungere scorrendo dovrebbero avere loading="lazy".
- Non scordare mai gli attributi width e height. Riservano lo spazio, così nulla salta quando arriva l’immagine.
- Preferisci l’attributo nativo. loading="lazy" non richiede script, funziona in ogni browser attuale e i crawler vedono l’indirizzo reale.
- Prima il lazy loading sugli incorporamenti. Un frame video o mappa può pesare più di tutte le immagini della pagina messe insieme.
- Verifica le opzioni del tema. Molti temi aggiungono loading="lazy" a ogni immagine, compresa la prima. Quindi disattivalo per l’immagine principale.
- Prova su un telefono. La prima schermata di un telefono mostra meno immagini di un desktop, quindi verifica quali compaiono davvero per prime.
Sei errori di lazy loading che rallentano le pagine
Ognuno sembra un’ottimizzazione e invece costa velocità in silenzio.
Mettere loading=lazy perfino sull’immagine principale
Compresa la prima, il che ritarda il rendering più grande a ogni visita.
Priorità alta su un’immagine in lazy
Le due istruzioni si annullano, e il browser può seguirne solo una.
Niente width e height
La pagina salta all’arrivo di ogni immagine, che è proprio ciò che misura lo spostamento del layout.
Lazy loading solo via script
Crawler e visitatori senza JavaScript vedono un segnaposto vuoto al posto dell’immagine.
Dimenticare gli incorporamenti
Un frame video in fondo a un articolo carica comunque subito il suo player senza loading="lazy".
Due loader insieme
Se un plugin e un tema lo gestiscono entrambi, le immagini possono aspettare due volte o non caricarsi mai.
Domande frequenti sul lazy loading
Cos’è il lazy loading?
Ritarda il download di un’immagine o di un frame finché sta per entrare nello schermo, così la parte alta della pagina si carica prima.
Il lazy loading aiuta la SEO?
Indirettamente. Le pagine più veloci ottengono Core Web Vitals migliori. Tuttavia, applicare il lazy loading all’immagine sbagliata peggiora il punteggio.
Devo caricare in lazy la prima immagine?
No. La prima immagine grande è di solito l’elemento Largest Contentful Paint, quindi deve caricarsi subito, meglio ancora con fetchpriority="high".
loading="lazy" è supportato ovunque?
Ogni browser attuale lo supporta per le immagini, e inoltre i principali lo supportano anche per gli iframe.
Google vede le immagini in lazy loading?
Con loading="lazy" sì, perché l’indirizzo reale resta in src. Invece con i loader solo a script dipende dallo script, ed è per questo che l’attributo nativo è più sicuro.
Perché il controllo vuole width e height?
Senza, il browser non può riservare lo spazio, quindi la pagina si sposta quando arriva l’immagine. Il CSS può comunque ridimensionarla.
Come fa il controllo a sapere cosa c’è nella prima schermata?
Usa l’ordine del codice, perché una pagina letta su un server non ha layout. Quindi le prime tre immagini sono trattate come la prima schermata.
Perché mancano alcune immagini?
Le immagini aggiunte dopo da uno script, o impostate come sfondi CSS, non sono nella pagina inviata dal server, quindi non compaiono.
Devo usare il lazy loading sugli iframe?
Sì, ogni volta che stanno sotto la prima schermata. Un frame con video o mappa è spesso la cosa più pesante della pagina.
La pagina che controllo viene salvata?
No. L’indirizzo serve per una sola lettura e poi sparisce, e non viene conservato nulla.
Strumenti per immagini più veloci
L’ordine di caricamento è una parte della velocità delle immagini. Questi coprono il resto.
Convertitore di immagini
Converti immagini pesanti in WebP o AVIF senza caricarle.
Apri lo strumento →Trova le immagini senza alt in una pagina
Un verdetto sul testo alternativo di ogni immagine di una pagina.
Apri lo strumento →Controllo intestazioni HTTP
Compressione, cache e le otto intestazioni di sicurezza, con la correzione.
Apri lo strumento →
Pronto a controllare l’ordine di caricamento?
Incolla un indirizzo e guarda quando si carica ogni immagine. Il controllo del lazy loading è gratuito, non richiede account e non conserva traccia della pagina.