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.

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.

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.

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.

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:

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.

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.

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.

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.