Add preload meta link

[farnabaz]

Supporting the preload attribute to add a preload meta link sounds like an interesting idea to improved page performance.

We should have answers to these questions:

• When we need to add preload meta on a page?
• We should support preload meta on nuxt-img?
• What about responsive images with multiple sources (responsive), we should create a meta link for each source?

[shadow81627]

I have an eager loaded banner image component at the top of my pages that I use to set the og image and add preload meta.

head() {
    return {
      meta: [
        {
          hid: 'og:image',
          property: 'og:image',
          content: `${this.$config.BASE_URL}${this.$img(this.src, {
            width: 1200,
            height: 630,
          })}`,
        },
        {
          hid: 'og:image:width',
          property: 'og:image:width',
          content: 1200,
        },
        {
          hid: 'og:image:height',
          property: 'og:image:height',
          content: 630,
        },
      ],
      link: [
        {
          rel: 'preload',
          as: 'image',
          href: `${this.$config.BASE_URL}${this.$img(this.src, {
            width: 1200,
            height: 630,
          })}`,
          imagesrcset: this._srcset.srcset,
          imagesizes: this._srcset.size,
        },
      ],
    };
  },