Carga diferida de imágenes fuera de pantalla con lazysizes

Nov 5, 2018

Katie Hempenius

TwitterGitHubGlitchHomepage

Se llama carga diferida al enfoque de esperar para cargar los recursos hasta que se necesiten, en lugar de cargarlos por adelantado. Esto puede mejorar el rendimiento al reducir la cantidad de recursos que deben cargarse y analizarse 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 sea una estrategia muy simple de implementar.

Agregue el script lazysizes a la página #

• Click Remix to Edit to make the project editable.

lazysizes.min.js ya ha sido descargado y agregado a este Glitch. Para incluirlo en la página:

• Agregue 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 desplaza por la página y priorizará las imágenes que el usuario encontrará pronto.

Indique qué imágenes cargar de forma diferida #

• Agregue la clase lazyload a las imágenes que deberían cargarse de forma diferida. Además, cambie el atributo src por data-src .

Por ejemplo, los cambios para flower3.png se verían así:

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

Para este ejemplo, pruebe cargar de forma diferida flower3.png, flower4.jpg y flower5.jpg.

Véalo en acción #

¡Eso es todo! Para ver estos cambios en acción, siga estos pasos:

• To preview the site, press View App. Then press Fullscreen .

• Abra la consola y busque las imágenes que se acaban de agregar. Sus clases deberían cambiar de lazyload a lazyloaded a medida que se desplaza hacia abajo en la página.

• Observe el panel de red para ver que los archivos de imagen se cargan individualmente a medida que se desplaza hacia abajo en la página.

Verifique usando Lighthouse #

Por último, es una buena idea utilizar Lighthouse para verificar estos cambios. La auditoría de rendimiento "Aplazar imágenes fuera de pantalla" de Lighthouse indicará si ha olvidado agregar la carga diferida a las imágenes fuera de la pantalla.

1. To preview the site, press View App. Then press Fullscreen . 1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.

2. Click the Lighthouse tab.

3. Make sure the Performance checkbox is selected in the Categories list.

4. Click the Generate report button.

5. Verifique que se haya aprobado la auditoría de aplazar imágenes fuera de pantalla.

¡Perfecto! Ha utilizado lazysizes para cargar de forma diferida las imágenes en su página.