Utilice lazysizes para cargar imágenes de forma diferida

Nov 5, 2018 — Actualizado Apr 10, 2019

Available in: 한국어, Português, 中文, English

Appears in: Tiempos de carga rápidos

Katie Hempenius

TwitterGitHubGlitchHomepage

La carga diferida es la estrategia de cargar recursos a medida que se necesitan, en vez de hacerlo por adelantado. Este enfoque libera recursos durante la carga inicial de la página y evita cargar contenido que nunca se utiliza.

Las imágenes que están fuera de la pantalla durante la carga de la página inicial son candidatas ideales para esta técnica. Lo mejor de todo es que lazysizes hace que esta sea una estrategia muy simple de implementar.

¿Qué es lazysizes? #

lazysizes es la biblioteca más popular para imágenes de carga diferida. Es un script que carga imágenes de manera inteligente a medida que el usuario se mueve por la página y prioriza las imágenes que el usuario encontrará en breve.

Agregar lazysizes #

Agregar lazysizes es simple:

• Agregue el script lazysizes a sus páginas.
• Escoja las imágenes que desea cargar de forma diferida.
• Actualice las etiquetas <img> o <picture> para esas imágenes.

Agregue el script lazysizes #

Agregue el script lazysizes a sus páginas:

<script src="lazysizes.min.js" async></script>

Actualice las etiquetas <img> o <picture> #

<img> instrucciones de la etiqueta

Antes:

<img src="flower.jpg" alt="">

Después:

<img data-src="flower.jpg" class="lazyload" alt="">

Al actualizar la etiqueta <img>, usted realizará dos cambios:

• Agregará la clase lazyload: esto indica a lazysizes que la imagen debe cargarse de forma diferida.
• Cambiará el atributo src a data-src: cuando llegue el momento de cargar la imagen, el código lazysizes establece el atributo src de la imagen utilizando el valor del atributo data-src.

<picture> instrucciones de la etiqueta

Antes:

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

Después:

<picture>
  <source type="image/webp" data-srcset="flower.webp">
  <source type="image/jpeg" data-srcset="flower.jpg">
  <img data-src="flower.jpg" class="lazyload" alt="">
</picture>

Al actualizar la etiqueta <picture>, usted realizará dos cambios:

• Agregará la clase de lazyload a la etiqueta <img>
• Cambiará el atributo srcset de la etiqueta <source> para data-srcset.

Verificar #

Abra DevTools y desplácese hacia abajo en la página para ver estos cambios en acción. A medida que se desplaza, debería ver que se producen nuevas solicitudes de red y que las clases de las etiquetas <img> cambian de lazyload a lazyloaded.

Adicionalmente, puede usar Lighthouse para verificar que no se ha olvidado de cargar las imágenes fuera de la pantalla de forma diferida. Ejecute la Auditoría de rendimiento de Lighthouse en Lighthouse> Opciones> Rendimiento (Lighthouse> Options> Performance) y busque los resultados de la auditoría Aplazar imágenes fuera de pantalla (Defer offscreen images).