Defer offscreen images

[anton-karlovskiy]

The original project was using https://github.com/addyosmani/nuxt-movies/blob/dev/plugins/lazyload.js for lazy-loading images but it seems like it's not compatible with responsive images using srcset and sizes attributes.
@pi0 @danielroe @addyosmani
Could you please teach me what (a third-party package or an approach) to use for lazy-loading images?
FYI: in the first place, I'm going to test with the native lazy-loading (https://web.dev/browser-level-image-lazy-loading/) but from my experience, due to Distance-from-viewport thresholds, the payload was not small enough.

[anton-karlovskiy]

Looking into the impact of non-lazy-loading vs. native lazy-loading

PR: #24
Lighthouse CI comparison: https://rocky-taiga-72405.herokuapp.com/app/projects/my-favorite-project/compare/b24d70c2-7141-4897-995c-2ba3bd80a0f5?compareUrl=http%3A%2F%2Flocalhost%3APORT%2F&baseBuild=fb38362d-2c0e-486d-a0d8-d9b51498ab21

Non-lazy-loading carousel images:
GitHub commit: 37fedb0
Vercel URL: https://nuxt-movies-ehlel1mzx.vercel.app/

Native lazy-loading carousel images:
GitHub commit: 8542bdf
Vercel URL: https://nuxt-movies-3zcbqr0t7.vercel.app/

According to #23 (comment), it seemed like the v-lazyload JS brought regression to FCP, Speed Index, and CLS.
So I dropped it and decided to use the native lazy-loading.

Comparing the payloads (counts of the downloaded images on landing) in the following two cases, I believe native lazy-loading is good enough (probably thanks to https://web.dev/browser-level-image-lazy-loading/#improved-data-savings-and-distance-from-viewport-thresholds).

• JS (Intersection Observer) lazy-loading:
  

• Native lazy-loading:
  

In addition, using the native lazy-loading might be better for UX according to:

cc @addyosmani

[pi0]

Hi @anton-karlovskiy. I've made #26 to use nuxt/image (<nuxt-img> tag). Usage is similar to <img> with loading="lazy" but it uses intersectionObserver under the hood (with 50px eager loading) so browsers like Safari can also leverage performance improvements (see native browser support)

@addyosmani Any suggestions for component behavior improvements is more than welcome. This way we can advocate best practices by using image module :)

[anton-karlovskiy]

I'm logging:
#24 (comment)
#24 (comment)

[addyosmani]

Certainly! I would say that it's worth keeping an eye on next-image to get a sense of the optimizations for image loading we've been working on with the Next.js team. Some of the first gaps I observed vs. nuxt-image were around the priority attribute for configuring whether images should be preloaded if they're particularly important. @pi0 this seems semi-related to nuxt/image#105.

[pi0]

Thanks for feedback @addyosmani. I will into next-image regarding periority support. Supporting preload with an attr would be also possible (i think we can leverage <link imagesrcset> if not wrong for responsive images)