nuxt-webfontloader

nuxt-webfontloader copied to clipboard

Good morning/afternoon.

First of all, thanks for this package

I would like to flag that using the package in production causes a penalisation when auditing via Google Lighthouse (Chrome devtools - audit panel) as the generated font urls are missing the preconnect flag.

Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. Learn more.

It would beneficial either have a configuration option to inject this flag or add it straight away during the building.

Thank you in advance for considering this request.

   head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true },
        { rel: 'dns-prefetch', href: 'https://fonts.gstatic.com', crossorigin: true },
      ],
    },

   head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: true },
        { rel: 'dns-prefetch', href: 'https://fonts.gstatic.com', crossorigin: true },
      ],
    },

I believe you meant:

 head: {
    link: [
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossorigin: true
      },
      {
        rel: 'dns-prefetch',
        href: 'https://fonts.googleapis.com/',
        crossorigin: true
      }
    ]
}

As it happens in two stages. P.S Good article about font performance with a lot of explanation: https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

This one can be used for custom font loading from static or assets folders also with caching headers on firebase.json for firebase hosting? Any recommendations?