Lazy loading: cómo optimizar el rendimiento de tu sitio web

Si tu objetivo es optimizar el rendimiento de tu sitio web, tarde o temprano te encontrarás con el término del lazy loading, o carga diferida. Este popular método ayuda a mejorar el tiempo de carga de los sitios web, especialmente los que contienen grandes cantidades de datos, como imágenes o vídeos.

¿Qué es el lazy loading y cómo funciona?

Cuando se abre un sitio web, el navegador carga todos los recursos necesarios para mostrar la página adecuadamente. Durante este proceso, se recuperan todos los objetos, no solo los que se encuentran en el área visible, también los que están fuera de ella (lo que en inglés se conoce como below the fold). Entre otras cosas, esto comporta un tiempo de carga innecesario. Para evitarlo, los desarrolladores utilizan el lazy loading, o carga diferida. Con la ayuda de un script como LazyLoad, el navegador carga las imágenes y el resto de datos solo cuando estos aparecen en la ventana gráfica o viewport (el área visible) del usuario, por ejemplo, al desplazarse por la ventana del navegador o maximizarla.

Para explicar el funcionamiento de LazyLoad, es de gran utilidad el ejemplo de las imágenes. Para utilizar la carga diferida, debes modificar el marcado de la etiqueta img. En lugar del atributo src, el método utiliza un atributo data que incluye una fuente coincidente. En cuanto la imagen entra en el área visible, el script correspondiente añade el atributo src mediante el atributo data, y la imagen aparece. Para que el proceso de carga sea más atractivo para el usuario, se puede utilizar algún efecto de deslizamiento o de aparición gradual.

¿Cómo se implementa el lazy loading?

Existen varias maneras de incorporar la carga diferida a tu proyecto web. La implementación de esta tecnología se ha desarrollado y mejorado continuamente a lo largo de los años. En los siguientes apartados, te presentamos algunas de las soluciones más populares para implementar el lazy loading.

Lazy loading con JavaScript

Una opción es incorporar a tu sitio web una de las incontables plantillas de JavaScript de carga diferida. El script LazyLoad, mencionado más arriba, ofrece una solución compacta que no requiere jQuery. Además de la capacidad de configurar la carga diferida nativa para imágenes, videos e iFrames, este script de 2,4 KB (kilobytes) admite imágenes responsivas, entre otros elementos.

Una alternativa a LazyLoad es el script Lazy Load Remastered, de Mika Tuupola. A diferencia de LazyLoad, este script utiliza jQuery y proporciona algunos efectos muy atractivos, como el desenfoque de imágenes.

Lazy loading nativo

La carga diferida nativa es la forma más sencilla de incorporar el método del lazy loading a tu proyecto web. Esta tecnología, inicialmente solo disponible en el navegador Google Chrome (versión 75 o superior), ahora también funciona en Firefox, Edge y Opera. Para utilizar esta opción, solo tienes que añadir el atributo loading a los correspondientes contenidos del sitio web:

<img src="ejemplo.png" loading="lazy" alt="…">
<iframe src="https://dominio_de_ejemplo.es" loading="lazy" alt="…"></iframe>

Además del valor lazy para la carga diferida, están disponibles los siguientes valores:

  • eager: el navegador carga el objeto directamente cuando se abre la página.
  • auto: el navegador decide si carga el objeto directamente o en diferido.

La ventaja de la carga diferida nativa es que el navegador no tiene que cargar una biblioteca JavaScript adicional. Esto no solo ahorra tiempo de carga, sino que también garantiza que el navegador cargue las imágenes mediante lazy loading incluso si el usuario ha desactivado JavaScript.

Lazy loading con la API Intersection Observer

Si incorporas la carga diferida con JavaScript, el navegador consulta constantemente la posición de los objetos. Esto puede tener efectos colaterales desagradables, como sacudidas, además de sobrecargar el servidor. Con la API Intersection Observer, se resuelve este problema. Esta interfaz supervisa los cambios de los elementos en relación con un elemento principal concreto. El elemento principal suele ser la ventana gráfica. Si el objeto se superpone con el elemento principal, o si la distancia entre los elementos cambia en cierta medida, Intersection Observer ejecuta una función de devolución de llamada y muestra el elemento.

Consejo

Actualmente, el lazy loading nativo no funciona en Safari (ni en macOS o iOS). Sin embargo, como Safari es compatible con la API Intersection Observer, también es posible utilizar un polyfill.

Lazy loading mediante un plugin de WordPress

Si has creado tu sitio web con WordPress, puedes incorporar fácilmente la carga diferida con un plugin, como a3 Lazy Load. Además de imágenes y videos, esta extensión también admite el método de la carga diferida para otros tipos de contenido incrustado.

Lazy loading y el problema de los píxeles de seguimiento

Los operadores de sitios web suelen utilizar píxeles para rastrear el comportamiento de los usuarios. A veces, estos píxeles de seguimiento están únicamente en el área no visible. Si se aplica la carga diferida a todas las imágenes, el navegador no carga el píxel de seguimiento hasta que este se encuentra en el área visible. Como resultado, se pierden cifras importantes sobre clics y conversiones.

Dependiendo de la opción que utilices, puedes hacer que el píxel de seguimiento se cargue de manera independiente al abrir la página:

  • Lazy loading nativo: añade el atributo loading="eager" al píxel de seguimiento.
  • Lazy loading con JavaScript: asigna al píxel de seguimiento una determinada clase que hayas excluido del código JavaScript. Si lo prefieres, puedes asignar una clase a todos los objetos que el navegador deba cargar mediante lazy loading y aplicar el script expresamente a esta.

Tabla de ventajas e inconvenientes del lazy loading

Ventajas Inconvenientes
Mejora del rendimiento Puede afectar la experiencia del usuario: por ejemplo, no es posible dar vuelta atrás en caso de estructura de página desfavorable
Reducción del tráfico en el host Requiere código adicional cuando se incorpora con JavaScript
  Pueden ser necesarias bibliotecas externas
  Para integrarlo con JavaScript, se requiere que los usuarios admitan scripts
Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración de su navegador en nuestra. Política de Cookies.