Lazy loading (carga diferida) y su importancia en el SEO

Cuando se trata del uso de plataformas en línea como sitios web, la rapidez de carga y optimización de los portales se hace esencial, con los usuarios demandando cada vez más velocidad y respuesta.

Por esa razón, el patrón de diseño para páginas conocido como lazy loading está tomando cada vez más y más importancia. Pero, ¿qué es lazy loading (carga diferida)?

Eso es lo que estaremos abordando a continuación.

¿Qué es Lazy Loading?

De manera concreta, el lazy loading es una técnica, un patrón de diseño de programación que se aplica para sitios web,  en los cuales los elementos  y recursos no se cargan de manera completa, sino que se ejecutan sobre la marcha u on-demand de acuerdo a la utilización del usuario, se produce una “carga diferida” de los contenidos.

De esta manera, se optimizan los recursos y carga de contenido como texto, vídeos, imágenes y otro material solo cuando son requeridos, mejorando la velocidad, uso de memoria y procesamiento, respuesta y tiempos de carga. Esto cae en en contrapartida de la carga total, donde un sitio o página se carga completamente, aunque el usuario no utilice cada uno de los elementos.

Ventajas generales del lazy loading

Siendo el propósito principal del lazy loading la optimización de la carga de elementos sólo cuando se utilizan, son múltiples las ventajas que tiene y que pueden resumirse como:

• Rapidez en mostrar elementos principales de un sitio web.
• Relevante mejora en la experiencia de usuario en el sitio UX.
• Mejora en el rendimiento en dispositivos móviles sobre todo cuando se encuentran con pocos recursos de conexión de red, el tener activo Lazy Loading, permitirá navegar en páginas que en dichas condiciones de poca cobertura sería inviable.
• Optimización general y total de recursos como CPU, RAM y batería en dispositivos móviles.
• El aumento del tiempo de permanencia en nuestras páginas, al no tener problemas de carga se traduce indirectamente en mejora en el ranking.
• Disminución de bounce rate o tasa de rebote.

Del mismo modo, el enfoque de programación lazy loading tiene ventajas y novedades desde un punto de vista más técnico, tales como:

• Lazy loading es completamente compatible con marcos de trabajo o frameworks en JS como React y Angular y también plataformas de CMS como WordPress, de hecho recientemente han informado que vendrá incluida la carga lazy loading en imágenes por defecto en la versión de wordpress 5.5.
• Gracias a la API IntersectionObserver no esconde las imágenes a los motores de búsqueda.
• Soporte para múltiples tipos de contenido como imágenes y recursos de clase responsive.
• Permite que imágenes de los sitios sean indexadas, siendo vital en lo que respecta a SEO.
• Es un recurso 100% SEO Friendly, ya que mejora directa e indirectamente muchos puntos clave en SEO.

¿Cómo implementar lazy loading en WordPress?

Si tenemos nuestra web en WordPress, debemos saber que contamos con una gran ventaja ya que existen multitud de soluciones para implementar lazy loading en nuestras páginas para que carguen mucho más rápido. Esta captura que se verá a continuación muestra algunas de las posibles soluciones que tenemos en el repositorio de plugins:

Para llevar a cabo esta implementación, tenemos varias soluciones:

• Escoger un plugin específico de lazy loading «Lazy loader», «a3 lazy load»…
• Escoger un plugin de optimización web como «WP Rocket», el cual tiene esta opción ya incluida por defecto junto con otras mejoras.

Aspectos SEO en relación al Lazy Loading

Ya sabemos la misión principal que tiene la carga diferida y sus principales ventajas, y como afecta a la mejora de nuestro page performance, nuestra UX y el SEO

Ahora, se debe hacer un uso inteligente de la carga diferida para sacarle el mayor provecho, ya que si se usa de mala manera podría causar el efecto contrario.

Por ejemplo, el lazy loading hace uso de la caché para mejorar la rapidez, por lo que si se aloja mucho contenido allí puede haber ralentización o producir errores si no se implementa correctamente, incluso no dejando que Google indexe páginas y elementos y tener un efecto grave en la clasificación del sitio. Algunos consejos son:

• Optimizar la cache y hacer uso inteligente de ella.
• Usar Google Search Console para verificar el contenido que rastrea Google del sitio.
• Agregar el texto de tipo ALT para hacer a cada imagen indexable por Google.
• Siempre hacer uso de la API IntersectionObserver.
• Añadir la etiqueta loading a contenido de tipo iframe o incrustado en la plataforma de otras páginas o fuentes, gracias a la función Blink LazyLoad del navegador Chrome. Aplica para imágenes, fotos, vídeos, texto y demás contenido.

Lazy loading y UX

Si se trata de un sitio web, la optimización tanto técnica como general para ofrecer una buena experiencia de usuario o UX es primordial, respecto a los tiempos de carga, respuesta, uso de recursos y comportamiento general. Si un sitio es poco responsivo, su tasa de rebote será alta y si ofrece una mala experiencia de usuario, eso afectara su tráfico, visibilidad e incluso SEO.

Con la carga diferida, se busca mejorar con un solo paso y de manera drástica la UX de un sitio, al cargar su contenido de manera progresiva y cuando el usuario requiere al desplazar la página, ya sean imágenes o texto y que optimiza el uso de los recursos en comparación a si se cargará la plataforma completa, probablemente mostrando elementos no importantes para el internauta.

Lazy loading nativo (HTML) en Chrome

Demostrando la importancia que le da Google a la UX, desde el año 2020 y desde la versión 75 de su navegador Chrome, se permite agregar lazy loading nativo a las etiquetas de las páginas HTML y su contenido multimedia como fotos, vídeos, entre otros.

De esta manera, agregando el atributo HTML lazy loading de manera automática el navegador Chrome entiende que el contenido de la página se cargará de acuerdo a la navegación del usuario y no todo completo, mejorando rapidez y respuesta. Para usarlo, se agrega el atributo loading al valor lazy en cada etiqueta de los recursos visuales y multimedia, así como iframes:

<img src=»imagen.jpg» loading=»lazy» alt=»…» />

<iframe src=»video-reproductor.html» loading=»lazy»></iframe>

Este recurso lo podemos usar tanto en imágenes que suponen gran parte de la información que el navegador precisa descargar como en los iframes, recordemos que estos los utilizamos para embeber recursos externos a nuestra web.

Es importante destacar el uso en iframes, ya que estos pueden suponer puntos críticos de carga en nuestro site.

Como contrapartida, el lazy loading nativo solo es compatible con Chrome, aunque puede implementarse su uso en otros navegadores mediante librerías compatibles, en caso de que no haya soporte como sucede en Mozilla Firefox.

Usos del Lazy loading

Como ya hemos comentado, el lazy loading se enfoca en demorar la carga de elementos en página para optimizar su respuesta, en este sentido, el uso de que se le da a la herramienta se enfoca en todos los recursos visuales, aunque se enfatiza en las imágenes, vídeos y iframes que pueden incluir documentos y otros archivos, todo mediante la modificación de las etiquetas e inclusión de atributo loading y valor lazy, optimizando la velocidad general del sitio inclusive si posee elementos pesados o contenido multimedia de gran tamaño.

¿Tienes dudas sobre lazy loading o quieres implementarlos en tu proyecto? ¡Estamos a tu disposición!

Documentación y Referencias:

• Lazy loading en imágenes
• Lazy Loading en vídeos
• Lazy loading nativo