Questo approfondimento parte da un tweet di Jonattan Moore che condivide con la community Seo come fare una scansione delle immagini in Lazy Loading mediante XPath di Screaming Frog.
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 ad un caricamento “on demand” che avviene eseguito solo quando viene richiesto dalla navigazione dell’utente e serve per tutti quei 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.
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 il Leader Maximo 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 è 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 screenshoot che sono stati generati dallo script mostrino tutti i contenuti della pagina.
*fonte:https://blog.tagliaerbe.com/lazy-loading/
Crawl del Lazy Loading con Screaming Frog
Una volta che abbiamo capito le linee generali relative al Lazy Loading delle immagini sfruttiamo la funzione Custom Extraction di Screaming Frog per fare un audit delle immagini complessive di una pagina e quelle caricate solo tramite il caricamento on demand.
Qui gli approfondimenti sulla funzione Custom Extraction del Seo Spider.
Di seguito i percorsi XPath condivisi da Jonathan Moore per la Custom Extraction.
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: https://gist.githubusercontent.com/jonathanmooredigital/667955e13965c1daa487796f76e11072/raw/fc078cd867256b7d18131b45dc415f1ff2231342/screaming-frog-lazy-loading-custom-extraction-config.txtUtilizzando questi parametri potrai ottenere i seguenti risultati direttamente nella tab dedicata alle “Custom Extraction” di Screaming Frog divisi per colonne e disponibili per le tue analisi di ottimizzazione.
