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
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
Tu aporte nos permite crear contenidos. Tu apoyo desde Nequi
¡Vamos por los 25.000 suscriptores en YouTube! Suscríbete
¿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.
—
Por:
Juan Carlos Morales S.
Comunicador y educador
YouTube | LinkedIn | Instagram | Twitter
Qué es y cómo implementar Lazy Loading por juancadotcom se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internaciona . Basada en una obra en https://e-lexia.com/blog .
