Correggere i contenuti caricati tramite caricamento lento

Il differimento del caricamento di contenuti non critici o non visibili, noto anche come "caricamento lento", è una prestazione comune e una best practice UX. Per ulteriori informazioni, consulta la guida per il caricamento lazy di immagini e video di Web Fundamentals. Tuttavia, se non viene implementato correttamente, questa tecnica può inavvertitamente nascondere contenuti a Google. Questo documento spiega come fare in modo che Google possa eseguire la scansione e indicizzare i contenuti caricati con il metodo lazy.

Caricare il contenuto quando è visibile nell'area visibile

Per garantire che Google veda tutti i contenuti della tua pagina, assicurati che la tua implementazione di caricamento lazy carichi tutti i contenuti pertinenti ogni volta che sono visibili nell'area visibile. Ecco alcuni esempi di come fare:

Assicurati di testare la tua implementazione.

Supportare il caricamento suddiviso per lo scorrimento continuo

Se implementi un'esperienza di scorrimento continuo, assicurati di supportare il caricamento suddiviso. Il caricamento suddiviso è importante per gli utenti perché consente loro di condividere e interagire con i contenuti. Consente inoltre a Google di mostrare un link a un punto specifico dei contenuti, anziché alla parte superiore di una pagina a scorrimento continuo.

Per supportare il caricamento suddiviso, fornisci un link univoco a ogni sezione che gli utenti possono condividere e caricare direttamente. Ti consigliamo di utilizzare l'API History per aggiornare l'URL quando il contenuto viene caricato in modo dinamico.

Test

Dopo aver impostato l'implementazione, assicurati che funzioni correttamente. Un modo è utilizzare uno script Puppeteer per testare a livello locale la tua implementazione. Puppeteer è una libreria Node.js per il controllo di Chrome headless. Per eseguire lo script, avrai bisogno di Node.js. Utilizza i seguenti comandi per consultare lo script ed eseguirlo. 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

Dopo aver eseguito lo script, esamina manualmente le immagini degli screenshot creati per assicurarti che contengano tutti i contenuti che ti aspetti siano visibili e indicizzati da Google.

Puoi anche utilizzare lo strumento Controllo URL in Search Console per vedere se tutte le immagini sono state caricate. Controlla lo screenshot e l'HTML sottoposto a rendering per assicurarti che le immagini siano caricate.