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

Katie Hempenius

La carga diferida es el enfoque de esperar para cargar los recursos hasta que sean necesarios, en lugar de cargarlos por adelantado. Esto puede mejorar el rendimiento, ya que se 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 la pantalla durante la carga de 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.

Agrega la secuencia de comandos lazysizes a la página

• Haz clic en Remix to Edit para que el proyecto sea editable.

Ya se descargó y agregó lazysizes.min.js a esta Glitch. Para incluirla en la página, sigue estos pasos:

• 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 las imágenes que se cargarán de forma diferida

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

Por ejemplo, los cambios en 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 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 cómo se cargan los archivos de imagen de forma individual a medida que te desplazas hacia abajo en la página.

Realizar la verificación con Lighthouse

Por último, se recomienda usar Lighthouse para verificar estos cambios. La auditoría de rendimiento de "Aplazar las 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ús + J" (o bien "Comando + Opción + 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 Generar informe.
6. Verifica que se haya aprobado la auditoría Aplaza las imágenes fuera de pantalla.

¡Listo! Usaste tamaños diferidos para cargar de forma diferida las imágenes en tu página.