Carga diferida de imágenes fuera de pantalla con tamaños diferidos

Katie Hempenius

La carga diferida es el enfoque en el que se espera para cargar los recursos hasta que se necesiten, en lugar de cargarlos por adelantado. Esto puede mejorar el rendimiento, ya que reduce la cantidad de recursos que se deben cargar y analizar en la carga inicial de la página.

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

Agregue la secuencia de comandos lazysizes a la página

• Haz clic en Remix para editar para que el proyecto se pueda editar.

Ya se descargó lazysizes.min.js y se agregó a este error. Para incluirlo en la página, haz lo siguiente:

• Agrega la siguiente etiqueta <script> a index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

Lazysizes cargará imágenes de forma inteligente a medida que el usuario se desplace por la página y priorizará las imágenes que el usuario encontrará pronto.

Cómo indicar la carga diferida de las imágenes

• Agrega la clase lazyload a las imágenes que deben ser de carga diferida. Además, cambia el atributo src por data-src.

Por ejemplo, los cambios de flower3.png se verían de la siguiente manera:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Para este ejemplo, prueba la carga diferida de flower3.png, flower4.jpg y flower5.jpg.

Observa cómo funciona

Listo. Para ver estos cambios en acción, sigue estos pasos:

• Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .

• Abre la consola y busca las imágenes que se acaban de agregar. Sus clases deben cambiar de lazyload a lazyloaded a medida que te desplazas hacia abajo en la página.

• Observa el panel de red para ver que los archivos de imagen se cargan de forma individual a medida que te desplazas hacia abajo en la página.

Verificación con Lighthouse

Por último, es una buena idea usar Lighthouse para verificar estos cambios. La auditoría de rendimiento "Deferir imágenes fuera de pantalla" de Lighthouse indicará si te olvidaste de agregar la carga diferida a alguna imagen fuera de pantalla.

1. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .
2. Presiona `Control + Mayúsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
3. Haz clic en la pestaña Lighthouse.
4. Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
5. Haz clic en el botón Generate report.
6. Verifica que se haya aprobado la auditoría Aplazar imágenes fuera de pantalla.

¡Listo! Utilizaste tamaños diferidos para la carga diferida de las imágenes en tu página.