feat: add preconnect hint for Google Fonts stylesheet

This commit adds a <link rel="preconnect" /> resource
hint for the origin of the font stylesheet if the
preconnect option is enabled. This is necessary
because the font stylesheet and the font itself are
served from two separate origins and both should be pre-
connected.

See https://web.dev/font-best-practices/#preconnect-to-critical-third-party-origins for more information.

src/module.ts

@@ -121,6 +121,13 @@ const nuxtModule: Module<ModuleOptions> = function (moduleOptions) {
         href: 'https://fonts.gstatic.com/',
         crossorigin: ''
       })
+      // Should also preconnect to origin of Google fonts stylesheet.
+      // @ts-ignore
+      this.options.head.link.push({
+        hid: 'gf-origin-preconnect',
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com/'
+      })
     }
 
     // https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content

test/basic.test.ts

@@ -11,11 +11,16 @@ describe('basic', () => {
     expect(body).toContain('<link data-n-head="ssr" data-hid="gf-prefetch" rel="dns-prefetch" href="https://fonts.gstatic.com/">')
   })
 
-  test('has preconnect link', async () => {
+  test('has preconnect link to font origin', async () => {
     const { body } = await get('/')
     expect(body).toContain('<link data-n-head="ssr" data-hid="gf-preconnect" rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="">')
   })
 
+  test('has preconnect link to font stylesheet origin', async () => {
+    const { body } = await get('/')
+    expect(body).toContain('<link data-n-head="ssr" data-hid="gf-origin-preconnect" rel="preconnect" href="https://fonts.googleapis.com/">')
+  })
+
   test('has preload link', async () => {
     const { body } = await get('/')
     expect(body).toContain('<link data-n-head="ssr" data-hid="gf-preload" rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Lato">')

yarn.lock

@@ -3257,9 +3257,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001191:
-  version "1.0.30001192"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001192.tgz#b848ebc0ab230cf313d194a4775a30155d50ae40"
-  integrity sha512-63OrUnwJj5T1rUmoyqYTdRWBqFFxZFlyZnRRjDR8NSUQFB6A+j/uBORU/SyJ5WzDLg4SPiZH40hQCBNdZ/jmAw==
+  version "1.0.30001349"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001349.tgz"
+  integrity sha512-VFaWW3jeo6DLU5rwdiasosxhYSduJgSGil4cSyX3/85fbctlE58pXAkWyuRmVA0r2RxsOSVYUTZcySJ8WpbTxw==
 
 capture-exit@^2.0.0:
   version "2.0.0"