Preloading a hero image for LCP

[anton-karlovskiy]

Re: #25 (comment), #25 (comment)

Hi @pi0 @atinux @danielroe cc @addyosmani
On the home page, there is a hero image which is detected as an LCP element.
Although the hero image is dynamic (randomly picked up), since we're using Nuxt.js (SSR), I think we can write a dynamic script using JS which is to be rendered first on the server-side and hydrated as a plain script (no dynamic part included) to the client.
Is there any package or approach in Vue/Nuxt to preload it?

Manual approaches:
https://web.dev/preload-responsive-images/
https://addyosmani.com/blog/preload-hero-images/

[pi0]

Related feature request (nuxt/image#105). We should support it via <nuxt-img preload> soon (so automatically injects <preload> to head)