Lazy Loading y XPath

Análisis de carga perezosa con xpath por Screaming Frog

Análisis de “Lazy Loading”

Esta visión comienza con un tweet de Jonattan Moore que comparte con la comunidad Seo cómo escanear imágenes en Lazy Loading utilizando XPath de Screaming Frog.

Lazy loading analisi con screaming frog

Lazy Loading de imágenes

Empecemos por entender qué es la Carga Perezosa para poder apreciar plenamente el trabajo de Jonathan.

¿Sabes cuando navegas por una página web y, a medida que te desplazas hacia abajo, van apareciendo nuevas imágenes?

Esta característica se denomina “Carga perezosa” y corresponde a una carga “bajo demanda” que sólo tiene lugar cuando lo solicita la navegación del usuario y se utiliza para todos aquellos elementos que afectarían al rendimiento de la página si se trataran en primera instancia con el resto de elementos en el hilo principal (también afectaría al Core Web Vitals).

Dado que la velocidad de carga es uno de los pilares del posicionamiento en buscadores, esta estrategia que ofrece una mejor experiencia al usuario debe tenerse muy en cuenta.

Lazy Loading y Google

Así que, partiendo de las premisas, esta estrategia es recomendable para todos los sitios web con el fin de mejorar la experiencia de usuario de los navegantes, pero ¿qué opina el Líder Máximo Google de esta implementación?

Google está de acuerdo con esto, pero advierte que hay que tener mucho cuidado en la implementación para no impedir que el bot rastree los recursos cargados mediante “Carga Lenta”, de lo contrario podría no indexarlos.

En resumen, el motor de búsqueda aprueba esta técnica, pero pide asegurarse de que puede ver todos los recursos que se van a evaluar en la indexación. Para entender mejor lo que pide Google, te invito a leer su guía dedicada: Asegúrate de que Google puede ver el contenido cargado de forma perezosa.

Los aspectos que todo desarrollador debe tener en cuenta son esencialmente tres:

  • Carga el contenido cuando sea visible en la ventana gráfica: para permitir que el robot de Google rastree completamente la página, asegúrate de que la carga diferida cargue todo el contenido siempre que sea visible en la ventana gráfica mediante la API IntersectionObserver y un polyfill.
  • En el caso de“Desplazamiento infinito“, admite la carga “Paginada”.
  • Prueba el correcto funcionamiento de Lazy Loading: puedes utilizar un script como Puppeteer, una librería Node.js directamente local para verificar que las capturas de pantalla generadas por el script muestran todo el contenido de la página.

*fuente:https://blog.tagliaerbe.com/lazy-loading/

Auditoría de carga perezosa

Una vez que hemos comprendido las líneas generales relativas a la Carga Lenta de imágenes, aprovechamos la función de Extracción Personalizada de Screaming Frog para hacer una auditoría del total de imágenes de una página y de las que sólo se cargan mediante carga bajo demanda.

Más información sobre la función de Extracción Personalizada de Seo Spider aquí.

A continuación se muestran las rutas XPath compartidas por Jonathan Moore para la Extracción Personalizada.

Para facilitar su uso, las presento en forma de texto:

Copy to Clipboard

Utilizando estos parámetros puedes obtener los siguientes resultados directamente en la pestaña “Extracción personalizada” de Screaming Frog, divididos por columnas y disponibles para tus análisis de optimización.

Ficha Seo Spider