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 scriptLazyLoad, 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 scriptLazy 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:
<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:
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 principalsuele 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.
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.
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:
| 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 |
El rendimiento de WordPress puede mejorarse con la función lazy loading. Si utilizas la carga diferida de imágenes o vídeos, mejoras la experiencia de usuario y también el posicionamiento en los resultados de búsqueda de Google. Con la ayuda de los plugin de lazy load para WordPress, puedes configurar fácilmente esta función.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver packs
