Lazy Loading e XPath.

Il lazy loading e la SEO

Questo approfondimento parte da un tweet di Jonathan Moore che condivide con la community SEO come fare una scansione delle immagini in Lazy Loading mediante XPath di Screaming Frog.

Il lazy loading delle immagini

Iniziamo a comprendere cosa sia il Lazy Loading per apprezzare fino in fondo il lavoro di Jonathan.

Hai presente quando navighi una pagina web e man mano che scorri verso il basso spuntano sempre nuove immagini?

Questa caratteristica è chiamata “Lazy Loading” e corrisponde a un caricamento “on demand”, eseguito solo quando viene richiesto dalla navigazione dell’utente. Serve per tutti quegli elementi che influenzerebbero le performance della pagina se gestite in prima istanza con il resto degli elementi nel thread principale (influenzerebbe anche i Core Web Vitals).

Essendo la velocità di caricamento uno dei pilastri nell’attribuzione del Ranking del Motore di Ricerca questa strategia che offre una migliore esperienza di navigazione dell’utente è da tenere in assoluta considerazione.

Il lazy loading e Google

Quindi, in base alle premesse, questa strategia è consigliabile per tutti i siti web per migliorare la user experience dei navigatori, ma cosa pensa Google di questa implementazione?

Google asseconda questa scelta ma avverte di stare molto attenti nell’implementazione per non impedire al Bot di crawlerare le risorse caricate tramite “Lazy Loading” altrimenti potrebbe non indicizzarle.

In sintesi il Motore di Ricerca approva questa tecnica ma chiede di assicurarsi che lui possa vedere tutte le risorse da valutare nell’indicizzazione. Per comprendere al meglio cosa chiede Google ti invito a leggere la sua guida dedicata: Make sure Google can see lazy-loaded content.

Gli aspetti che ogni developer deve considerare sono essenzialmente 3:

• Carica il contenuto quando è visibile nel Viewport: per permettere al Bot di Google un crawl completo della pagina assicurati che il lazy Loading carichi tutto il contenuto ogni volta che è visibile nel “viewport” utilizzando l’API IntersectionObserver e un polyfill.
• In caso di “Infinite Scroll” metti a supporto un caricamento “Paginato”.
• Testa il funzionamento adeguato del Lazy Loading: puoi utilizzare uno script come Puppeteer, una libreria Node.js direttamente in locale per verificare che gli screenshot generati dallo script mostrino tutti i contenuti della pagina.

Fonte: Tagliaerbe, Lazy loading

Audit del lazy loading con Screaming Frog

Configurare la Custom Extraction

Una volta che abbiamo capito le linee generali relative al Lazy Loading delle immagini sfruttiamo la funzione Custom Extraction di Screaming Frog (1Configuration›2Custom›3Custom Extraction) per fare un audit delle immagini complessive di una pagina e quelle caricate solo tramite il caricamento on demand.

Di seguito i percorsi XPath condivisi da Jonathan Moore per la Custom Extraction.

1234

1Nome dell’estrattoreDiventa il nome della colonna nei risultati.2Espressione XPathLa funzione count() che conta le immagini.3Function ValueRestituisce il risultato della funzione, qui un numero.4AddAggiunge un nuovo estrattore.

Per semplicità di utilizzo li riporto in forma testuale:

1) All images
-----------
count(//img)

-----------
2) All lazy-loaded images
-----------
count(//img[contains(@loading,'lazy') or contains(@class,'lazy') or contains(@class,'lazyloaded')])

-----------
3) Images not lazy-loaded
-----------
count(//img[not(contains(@loading,'lazy') or contains(@class,'lazy') or contains(@class,'lazyloaded'))])

-----------
4) Loading lazy attribute
-----------
count(//*[contains(@loading, 'lazy')])

-----------
5) Lazy class
-----------
count(//*[contains(@class, 'lazy')])

-----------
6) Lazyloaded class
-----------
count(//*[contains(@class, 'lazyloaded')])

-----------
7) Data-lazy attribute
-----------
count(//@*[contains(name(),'data-lazy')])

Fonte: configurazione di Jonathan Moore su GitHub.

Leggere i risultati

Utilizzando questi parametri potrai ottenere i seguenti risultati direttamente nella tab 1Custom Extraction di Screaming Frog divisi per colonne e disponibili per le tue analisi di ottimizzazione.

123

1Custom ExtractionLa tab con i risultati.2Immagini totali e lazyAll Images, Lazy-Loaded Images e Non-Lazy-Loaded Images.3Attributi di lazy loadingQuale tecnica viene usata: loading=lazy, classi lazy, data-lazy.