Lazy Content en tu página web para mejorar el SEO

Sergio Vergara -

Hace un año hablábamos de “Lazy loading” para mejorar la velocidad de tu página web. Pero pasé por alto en el artículo la capacidad de poder realizar “lazy loading” también en el contenido de tu página web.

Artículos recomendamos para mejorar tu SEO:

¿Cómo mejorar el SEO de mi página web con Lazy Content?

Realizar “Lazy loading” de tu contenido web es habitual y recomendable. Retrasar la carga del contenido que no sea fundamental ni visible te permitirá mejorar la experiencia de usuario y el rendimiento. Reduciendo el tiempo de carga y el peso de la página web, incrementando así una mejora en el SEO.

Una nueva función de Chrome denominada "Blink LazyLoad" está diseñada para mejorar drásticamente el rendimiento al diferir la carga de imágenes y contenido <iframe> sin necesidad de extensiones o librerías. Simplemente añadiendo la tag loading en <iframe> <img> o <video>, ejemplo:

En el ejemplo, la definición de loading en la etiqueta <iframe> te permitirá definir como deseas gestionar la carga del contenido externo especificado en “src” de la etiqueta <iframe>. La definición de “loading” contiene 4 opciones:

  • on - Solo se cargará el contenido cuando sea visualizado por el usuario.
  • off - Cargará el contenido inmediatamente, independientemente de la visualización. Cargando al inicio de la página.
  • Loading - Con loading conseguiremos el efecto “lazy” que comentamos, cuando el usuario se acerque al apartado del <iframe>, el navegador cargará el contenido especificado en “src”.
  • Auto - El navegador decide el mejor momento para cargar el contenido. Dependiendo del rendimiento del navegador del usuario y la conexión a internet.

Aunque desafortunadamente, por el momento no todos los navegadores están preparados para “Blink LazyLoad":

Referencia: https://caniuse.com/#feat=loading-lazy-attr

Mientras los navegadores se ponen al día de estas mejoras con sus actualizaciones, es recomendable utilizar una de las siguientes extensiones o librerías. Estas te ayudarán a implementar “Lazy loading” en tu página web tanto en contenido como imágenes o videos:

Si necesitas más información al respecto, puedes consulta la guía sobre “lazy loading” de imágenes y vídeos del sitio web de Google.

¿El Lazy Loading de contenido afecta al posicionamiento del texto de mi página web?

Es habitual y recomendable retrasar la carga del contenido que no sea fundamental ni visible para mejorar la experiencia de usuario y el rendimiento. Mejorando el rendimiento, mejoramos el SEO.

Aunque el contenido que identifique como “lazy” no forme parte del <HTML> principal de tu web, no te preocupes, el Robot de Google “Googlebot” realiza una indexación y análisis de tu web al igual que lo realizaría un usuario desde su navegador web. Googlebot ejecuta todos los Javascript o librerías jQuery especificadas en tu página web para analizar y visualizar tu web tal como lo harían tus clientes.

Googlebot es mucho más que un simple proceso de indexación, es todo un sistema de IA que analiza y prevé la interacción de tus clientes en la web, revisando la disposición de todos los elementos. Sin duda es el cliente más crítico de tus usuarios. Googlebot evalúa tu página web al igual que la de tu competencia, teniendo en cuenta requisitos que a veces pasamos por alto como la usabilidad en relación con los colores, los espacios entre objetos, los contrastes de colores, etc.  

En definitiva, realizar Lazy Loading de contenido NO afecta al posicionamiento del contenido de tu página web.

Sin embargo, si esta técnica no se implementa correctamente, es posible que se oculte contenido por error y Google no pueda rastrearlo. Es importante que realices pruebas y verifiques que el “lazy loading” implementado en tu página web funciona correctamente.

¿Cómo probar que Lazy loading funciona correctamente en mi página web?

Una vez que hayas implementado esta técnica, asegúrate de que funcione correctamente. Puedes probarlo desde tu ordenador con una versión de Google Chrome sin interfaz gráfica ejecutando los comandos siguientes:

Cuando termine el comando verás que en el directorio un archivo “results.html” donde podrás verificar el resultado de los análisis, comparando el HTML original de la página especificada con el HTML que visualizará el usuario al ejecutarse correctamente el “lazy loading”. Este es nuestro ejemplo:

Conclusión

Aplicar “lazy loading” en las imágenes, videos y contenido secundario de tu página web mejorará significativamente el rendimiento, reduciendo el peso y mejorando el SEO. Tus clientes tendrán una gran experiencia con una carga más rápidas, mientras que mantienes intacto el contenido y la calidad necesaria en tu página web.

¿Realizas lazy loading de contenido en tu web? ¿Evalúas el rendimiento de tu web para medir el SEO?

Photo by Braden Collum on Unsplash

Referencias:
- Lazy Loading Google