Lazy loading – ¿qué es y cómo influye en el posicionamiento?

¿Qué es lazy loading?

Esto alivia la carga del servidor y permite que el sitio se cargue más rápidamente, ya que el usuario solo ve una parte del sitio y no todo su contenido.

Ejemplo: Una empresa que ofrece servicios de remodelación implementó lazy loading. Cuando un usuario abre su página, ve primero el eslogan y un fondo con una gran imagen. Solo al desplazarse hacia abajo por la página, podrá ver otras secciones como ejemplos de proyectos, opiniones de clientes o datos de contacto, los cuales se cargarán en el momento adecuado.

Beneficios principales del lazy loading

El lazy loading goza de gran popularidad debido a sus numerosos beneficios. Las ventajas más importantes de esta técnica son:

• Carga más rápida del sitio: los recursos se cargan solo cuando son necesarios, lo que reduce la carga del servidor y acorta el tiempo de visualización de los contenidos clave.
• Menor consumo de datos: los usuarios descargan únicamente los elementos que realmente visualizan, lo cual es especialmente útil en dispositivos móviles con acceso limitado a internet;
• Mejor experiencia de usuario (UX): los elementos clave del sitio aparecen más rápido, lo que reduce el riesgo de que el usuario lo abandone antes de que termine de cargarse;
• Impacto en el SEO: mejora de indicadores como la tasa de rebote, el tiempo promedio en el sitio y el número de páginas vistas por sesión, lo cual puede traducirse en un mejor posicionamiento;
• Posible aumento de conversiones: gracias a una carga más rápida y a una mejor UX, los usuarios están más dispuestos a realizar las acciones deseadas, como realizar compras.

El lazy loading puede ser especialmente importante para sitios complejos y ricos en contenido multimedia. Se trata, por ejemplo, de portales de noticias o páginas con grandes galerías de imágenes que, gracias a esta técnica, se cargarán mucho más rápido y, por tanto, cumplirán con las expectativas de los usuarios.

Lazy loading y SEO

Sin embargo, hay que recordar que la clave del éxito está en una implementación adecuada del on-demand loading. Cualquier error puede provocar problemas de indexación de contenidos, ya que parte de ellos no será visible de inmediato para los bots de Google. Como resultado, por ejemplo, el contenido que contiene palabras clave puede no ser indexado, lo cual afectará negativamente al posicionamiento del sitio web.

¿Cómo implementar on-demand loading?

Para implementar correctamente el on-demand loading, primero hay que determinar qué elementos deben cargarse de forma “perezosa”. Deberían ser los recursos que más carga representan para el servidor y que más alargan el proceso de carga del sitio, y que no son inmediatamente necesarios para el usuario. Se trata, por ejemplo, de galerías de imágenes o materiales en video.

No se deben retrasar los contenidos clave como el logotipo, banners o encabezados H1.

La implementación del lazy loading puede realizarse de varias maneras.

Lazy loading nativo en HTML5

Este es el método más sencillo, que consiste en añadir al elemento seleccionado el atributo loading=»lazy». Es compatible con la mayoría de los navegadores modernos y funciona bien con los bots de Google.

El efecto de esta acción es que las imágenes y otros datos se cargan automáticamente en el momento en que el usuario los necesita en la página. La mayor ventaja es que no es necesario escribir código JavaScript adicional, lo cual podría ser laborioso y complejo, especialmente para personas sin experiencia.

¿Cómo se ve el uso del lazy loading nativo en la práctica? Para una imagen, el código HTML se ve así:

<img loading=»lazy» src=»https://sitio-web.com/images/imagen.jpg»>

Si deseas forzar la carga inmediata de una imagen, independientemente de su posición en la página, en lugar del atributo anterior puedes usar loading=»eager». Otra opción es loading=»auto», que deja la decisión sobre cómo cargar los datos al navegador.

Lazy loading mediante JavaScript

Este método es útil cuando el navegador no es compatible con el lazy loading nativo, quieres tener un mayor control sobre la carga de contenidos o utilizas elementos personalizados en la página, como widgets avanzados. En ese caso, puedes usar scripts y bibliotecas ya disponibles.

El mejor ejemplo es la API Intersection Observer, que no requiere escribir código para comprobar la posición de cada elemento y ofrece un control total sobre su visibilidad. Para usarla, basta con agregar el código correspondiente al archivo JavaScript.

En el script de lazy loading no se deben incluir imágenes ubicadas en la parte superior del sitio, ya que el script, en lugar de cargarlas de inmediato, analizará el proceso, lo que puede alargar significativamente el tiempo de carga del sitio.

Lazy loading mediante CMS

Si utilizas sistemas de gestión de contenido populares, puedes usar complementos, herramientas o funciones integradas. Esto permite implementar el lazy loading de forma mucho más sencilla, sin necesidad de modificar el código del sitio.

• Para WordPress, los más recomendados son a3 Lazy Load y Lazy Load by WP Rocket.
• Para Joomla, los más recomendados son Lazy Load for Joomla y JCH Optimize.

En WordPress versión 5.5, se introdujo el lazy loading nativo, lo que significa que las imágenes se cargan de manera “perezosa” automáticamente, sin necesidad de instalar complementos adicionales ni modificar el código.