Fondo código

Qué es y cómo implementar Lazy Loading

Lazy Loading permite que el sitio web mejore su velocidad de respuesta, gracias a la carga diferida de sus imágenes y recursos incrustados (iframe). Miremos a detalle.

Desde febrero de 2020, el atributo loading hace parte del estándar HTML. Este permite establecer si la carga de los recursos se realiza al inicio de la consulta o a medida que el usuario se desplaza por la página web (movimiento de scroll).

Los posibles valores para loading son:

  • lazy: que retiene la carga del recurso hasta que el usuario llegue a él (producto de un cálculo que se realiza con el viewport).
  • eager: exige la carga de todos los recursos al momento de acceder a la página web, independiente de su ubicación.
  • auto: asume la configuración que se haya establecido a nivel general en el navegador.

En palabras sencillas, si una página web define el parámetro loading, con el valor lazy, en sus imágenes y recursos incrustados, su velocidad de respuesta será mayor, pues solo presentará los primeros elementos de la vista actual (above de fold).

Luego, a medida que el usuario navegue en la página, por scroll, el navegador irá solicitando los nuevos recursos.

El mejor ejemplo es Instagram: a medida que el usuario se desplaza, las imágenes van apareciendo. Esto, innegablemente, mejora los tiempos de respuesta.

Producción de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.

Producción de contenidos web

Descarga este libro electrónico de acceso libre, donde se presentan recomendaciones de producción multimedia.
Obtener una copia

Cómo aplicar lazy loading

Al ser parte del estándar, la utilización de loading es bastante sencilla. Solo hace falta indicarlo al interior de la etiqueta img o iframe.

Por cierto, también funciona adentro de picture e imágenes con el atributo src.

Ejemplo para imágenes:

<img loading="lazy" src="https://mitisio.com/img/logo" width="240" alt="" />

En imágenes que hacen parte de picture se define en la etiqueta img:

<picture>
<source media="(min-width: 300px)" srcset="logo-x.jpg 1x, logo-x-hd.jpg 2x">
<source srcset="logo-s.jpg 1x, logo-s-hd.jpg 2x">
<img src="logo-empresa.jpg" loading="lazy">
</picture>

Igual que los dos ejemplos anteriores, la especificación va la etiqueta HTML de imagen:

<img src="logo-empresa.jpg"
srcset="logo-x.jpg 1024w, logo-m.jpg 640w, logo-s.jpg 320w"
sizes="(min-width: 30em) 33.3vw, 100vw"
loading="lazy">

Por último, un ejemplo de aplicación en recursos incrustados:

<iframe src="video.html" loading="lazy"> </iframe>

Aquí es preciso indicar que, al ser una función reciente, es posible que algunos navegadores no la soporten. Para conocer la compatibilidad se puede revisar Can I Use?.

¿Necesitas asesoría en comunicación digital?

Diseña y optimiza tus proyectos en comunicación digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.
Conversemos

¿Tienes una pregunta sobre el artículo? Cuéntanos en los comentarios. Además, si buscas información sobre un tema y no está disponible, anótalo a continuación para agregarlo a nuestra agenda de contenidos.

Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi

Apoya la producción de la Escuela Digital desde PayPal.me

Con una taza de chocolate todo sabe mejor ¿Nos invitas a una?

¡Vamos por los 20.000 suscriptores en YouTube! Suscríbete

Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter

Licencia Creative Commons Qué es y cómo implementar Lazy Loading por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional. Basada en una obra en https://e-lexia.com/blog.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Icono de soporte y atención. Dirige al formulario de contacto de e-Lexia.com Contacto
Logo de e-Lexia.com: Regresar al inicio del sitio web Inicio