Speed Up Your Site Instantly With Lazy Loaded Images - Advanced Lazy Loading

Lazy loading - basic

defer loading of an asset until it is needed

For images, this could be not downloading image until user scrolls to the point where it’s visible.

This is helpful when there’s a lot of images, esp. for users with slow connection

<img src="image.jpg" loading="lazy" />

more details here:

Browser-level image lazy loading for the web

<aside> ⚠️ Tests should be done in Firefox, since Chrome is still “too eager” to download lazy load images, so you won’t see any difference

https://stackoverflow.com/questions/57753240/native-lazy-loading-loading-lazy-not-working-even-with-flags-enabled

</aside>

Without lazy loading

this is a 7MB image sourced from Cloudinary (since unsplash only sources low-res)

I also used network throttling to 2G or 3G to really see the effect

<img src="https://res.cloudinary.com/dvfhgkkpe/image/upload/v1692894181/unsplash_high_res/andre-benz-qJfznuTMAYA-unsplash_1.jpg"
/>

Note that the image started downloading right away, even though I didn’t scroll to it yet

Since network is really slow, we can also see that it’s still loading even after scroll