Lazy loading y XPath.

El lazy loading y el SEO

Esta guía parte de un tuit de Jonathan Moore, que compartió con la comunidad SEO cómo rastrear las imágenes en lazy loading con los XPath de Screaming Frog.

El lazy loading de las imágenes

Empecemos por entender qué es el lazy loading para apreciar del todo el trabajo de Jonathan.

¿Sabes cuando navegas por una página y, a medida que bajas, aparecen nuevas imágenes?

Eso es el «lazy loading»: una carga «bajo demanda», que solo se ejecuta cuando la navegación del usuario lo requiere. Sirve para todos los elementos que penalizarían el rendimiento de la página si se cargaran de entrada junto al resto en el hilo principal (también afectaría a las Core Web Vitals).

Como la velocidad de carga es uno de los pilares del ranking, esta estrategia, que mejora la experiencia de navegación, merece toda tu atención.

El lazy loading y Google

Así que esta estrategia es recomendable para todos los sitios web para mejorar la experiencia de usuario. ¿Pero qué opina Google?

Google la acepta, pero advierte que hay que tener mucho cuidado con la implementación para no impedir que su bot rastree los recursos cargados con lazy loading, porque podría no indexarlos.

En resumen, el buscador aprueba esta técnica pero pide asegurarse de que puede ver todos los recursos que debe valorar para la indexación. Para entender bien lo que pide Google, lee su guía: Make sure Google can see lazy-loaded content.

Básicamente, cada desarrollador debe tener en cuenta 3 aspectos:

• Cargar el contenido cuando es visible en el viewport: para que Googlebot rastree toda la página, asegúrate de que el lazy loading cargue todo el contenido cada vez que es visible en el viewport, usando la API IntersectionObserver y un polyfill.
• En caso de «scroll infinito», ofrece como apoyo una carga paginada.
• Probar que el lazy loading funciona bien: puedes usar en local un script como Puppeteer, una librería de Node.js, para comprobar que las capturas generadas muestran todo el contenido de la página.

Fuente: Tagliaerbe, Lazy loading (en italiano)

Auditoría del lazy loading con Screaming Frog

Configurar la Custom Extraction

Una vez claros los principios del lazy loading de imágenes, usemos la función Custom Extraction de Screaming Frog (1Configuration›2Custom›3Custom Extraction) para auditar todas las imágenes de una página y las que se cargan bajo demanda.

Estos son los XPath compartidos por Jonathan Moore para la Custom Extraction.

1234

1Nombre del extractorSe convierte en el nombre de la columna en los resultados.2Expresión XPathLa función count() que cuenta las imágenes.3Function ValueDevuelve el resultado de la función, aquí un número.4AddAñade un nuevo extractor.

Para copiarlos fácilmente, aquí los tienes en texto:

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')])

Fuente: configuración de Jonathan Moore en GitHub.

Leer los resultados

Con estos parámetros obtendrás los siguientes resultados directamente en la pestaña 1Custom Extraction de Screaming Frog, divididos en columnas y listos para tus análisis de optimización.

123

1Custom ExtractionLa pestaña con los resultados.2Imágenes totales y lazyAll Images, Lazy-Loaded Images y Non-Lazy-Loaded Images.3Atributos de lazy loadingQué técnica se usa: loading=lazy, clases lazy, data-lazy.