Immagini fuori schermo caricate in differita

Silktide controlla se la tua pagina scarica immagini che il visitatore non può ancora vedere: immagini più in basso nella pagina, sotto la prima schermata. Caricarle subito ritarda i contenuti che il visitatore sta effettivamente visualizzando.

La soluzione è il caricamento differito: il browser recupera ogni immagine appena prima che entri nell'area visibile durante lo scorrimento, invece di scaricare immediatamente tutte le immagini della pagina.

Perché è importante

Quando una pagina viene caricata, il browser ha una larghezza di banda limitata da utilizzare e ogni immagine che scarica compete con tutto il resto. Usare quella larghezza di banda per immagini che si trovano tre schermate più in basso significa che l'immagine principale, il testo e i pulsanti che il visitatore sta aspettando arriveranno più tardi.

Nelle pagine lunghe e ricche di immagini, lo spreco è notevole: un visitatore che legge la prima schermata e poi se ne va potrebbe aver pagato, in termini di tempo e dati mobili, per decine di immagini che non ha mai visto.

Come risolvere il problema

1. Aggiungi loading="lazy" alle immagini sotto la prima schermata. I browser lo supportano nativamente, senza bisogno di script:

<!-- Molto più in basso nella pagina: non caricare finché il visitatore non si avvicina -->
<img src="team-photo.jpg" alt="Il nostro team" loading="lazy" width="800" height="600">

2. Non applicare il caricamento differito alle immagini nella parte superiore della pagina, soprattutto a quella più grande: ritarda ciò che i visitatori vedono per primo e fa più danni che benefici.
3. Molti CMS e framework ora caricano automaticamente le immagini in modo differito; se il tuo non lo fa, verifica la presenza di un'impostazione o di un plugin prima di modificare i template.
4. Mantieni dimensioni esplicite per le immagini caricate in modo differito, così la pagina non salta quando arrivano: consulta Dimensioni esplicite delle immagini.

Come Silktide esegue questo controllo

1. Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i tuoi test di velocità.
2. Individua le immagini scaricate durante il caricamento iniziale ma posizionate interamente sotto la schermata visibile e che non sono già caricate in differita.
3. Segnala ogni immagine fuori schermo indicando la dimensione del download che potrebbe essere rinviato.
4. Valuta la pagina in base alla dimensione totale che può essere rinviata: circa 30 KB comportano una riduzione del punteggio, mentre 100 KB o più sono considerati un risultato scarso.

Risoluzione dei problemi

L'immagine è visibile sul mio schermo

Ciò che è "fuori schermo" dipende dallo schermo utilizzato. Silktide esegue i test con il dispositivo configurato per i tuoi test di velocità, quindi un'immagine accanto alla parte visibile del tuo desktop può trovarsi sotto la prima schermata di un viewport più piccolo. Il caricamento differito è comunque sicuro: l'immagine viene caricata non appena il visitatore si avvicina.

Utilizziamo già il caricamento differito tramite uno script

Gli approcci basati su script più datati a volte attivano comunque i download troppo presto, oppure lo script potrebbe non coprire le immagini aggiunte da altri plugin. Le immagini segnalate mostrano esattamente cosa è stato scaricato mentre si trovava fuori schermo; l'attributo nativo loading="lazy" è la soluzione affidabile più semplice.

Per saperne di più

• Caricamento differito delle immagini (web.dev)
• Caricamento differito delle immagini a livello di browser (web.dev)
• Dimensioni esplicite delle immagini
• Web Vitals