Trova le immagini che bloccano il primo rendering

I team prestazioni e SEO lo usano quando il primo rendering tarda e le immagini fuori schermo potrebbero bloccarlo.

Trova le immagini che bloccano il primo rendering. I dati restano sul dispositivo e il risultato è facile da controllare e riutilizzare.

Come si usa

Incolla l'HTML della pagina che vuoi verificare.
Avvia l'audit per trovare le immagini presenti nel primo rendering.
Controlla le immagini che non dovrebbero caricarsi immediatamente.
Aggiungi il caricamento differito alle immagini che si trovano fuori dalla viewport iniziale.

Esempio

Uno specialista SEO nota che una pagina iniziale impiega troppo tempo a mostrare il contenuto principale. Incolla l'HTML, avvia l'audit e individua immagini del piè di pagina che si caricano troppo presto. Quelle immagini vengono passate al caricamento differito prima di testare di nuovo la pagina. Si assicura anche che l'immagine principale resti una priorità, così la prima visualizzazione non viene compromessa.

Input

<img src="hero.jpg" alt="Hero">
<img src="icon.png" alt="Icon">

Limiti e formati

L'audit legge l'HTML che fornisci, non una visita dal vivo alla pagina.
Le immagini inserite da JavaScript o caricate tramite CSS potrebbero non essere tutte rilevate.
Il caricamento differito non è adatto alle immagini visibili nella prima schermata.
Ricontrolla il comportamento su mobile dopo aver modificato il markup.
Il rapporto va aggiornato dopo ogni modifica al markup.

Dove avviene il trattamento

L'HTML incollato viene esaminato all'interno del tuo browser. Nessuna richiesta esterna viene effettuata e la pagina verificata non viene recuperata dallo strumento. Il rapporto rimane locale finché non esci dalla pagina.

Domande frequenti

Lo strumento visita il mio sito web?

No, non carica la tua pagina da un indirizzo web. Sei tu a copiare l'HTML nell'input. L'audit quindi copre solo il markup che fornisci e non esegue gli script della pagina.

Quali immagini dovrebbero usare il caricamento differito?

Concentrati sulle immagini più in basso nella pagina che non servono per la prima visualizzazione. Le immagini dell'intestazione o l'immagine principale del prodotto spesso devono caricarsi immediatamente. Controlla il risultato su uno schermo reale.

Perché manca un'immagine nel rapporto?

Potrebbe essere aggiunta da JavaScript, usata come sfondo CSS o caricata da un componente di terze parti. L'audit vede solo l'HTML che incolli. Usa gli strumenti per sviluppatori del browser per completare il quadro.