Font use-case without FOUT or FOIT

[anton-karlovskiy]

The original project was using Roboto font (Google font) but it contributed to CLS (FOUT/FOIT) so I removed it and ended up using the system fonts. The CLS score was reduced (Re: #21 (comment)) but I think people may want to use some custom fonts.
Do you think we could solve this issue by using https://github.com/nuxt-community/google-fonts-module without using any manual approaches e.g. https://web.dev/preload-optional-fonts/?
cc @pi0 @danielroe cc @addyosmani

[addyosmani]

Inclined to agree that dropping the font in favor of a system fallback is not going to be the best solution here (folks will want to use Web Fonts). I would be curious to hear if there's any active work on font loading optimizations from the Nuxt.js team.

You can find some of the optimization work we are doing in Next.js over here btw:

vercel/next.js#21555

[pi0]

@addyosmani Using google-fonts module should do most of optimizations for font preload/prefetching without manually optimizing by developer.

@anton-karlovskiy Can you please make a PR to try it? (maybe with also nice using display: 'swap' option :))

[anton-karlovskiy]

Comparison between when using the original google-fonts set-up and when using @nuxtjs/google-fonts

PR: #38
Lighthouse CI comparison: https://rocky-taiga-72405.herokuapp.com/app/projects/my-favorite-project/compare/051f7548-617a-4698-9ade-1fee238a876d?compareUrl=http%3A%2F%2Flocalhost%3APORT%2F&baseBuild=e7817f1a-229c-4e82-829b-bac55e283055

Before:
GitHub commit: 9205a0e
Vercel URL: https://nuxt-movies-odramp21s.vercel.app/

After:
GitHub commit: d051169
Vercel URL: https://nuxt-movies-7r2yzpy3e.vercel.app/

Here are the options I set. @pi0 @danielroe Do we need more options like preconnect?

buildModules: [
  '@nuxtjs/google-fonts'
],

googleFonts: {
  families: {
    Roboto: {
      wght: [300, 400, 500]
    }
  },
  display: 'swap'
}

I thought that the Lighthouse audit would fail due to preconnect to https://fonts.gstatic.com/ being missed when using @nuxtjs/google-fonts but it was not there:

So I have not added that preconnect yet.

When using @nuxtjs/google-fonts, metrics have improved compared to the original traditional Google font usage and it appears that preconnect is automatically added as @addyosmani explained.

But the CLS stays the same so the FOUT does.

@pi0 @danielroe @addyosmani

[addyosmani]

@anton-karlovskiy Should the comparison we are making here be the original (non-font optimized version) vs. with @nuxtjs/google-fonts? I'm wondering if we may not be seeing the full picture if we are comparing this against a version relying on system fonts.

I thought that the Lighthouse audit would fail due to preconnect to https://fonts.gstatic.com/ being missed but it was not there:

I would need to double check our implementation, but I believe Google Fonts is trying to handle the preconnect already via a header (Lighthouse may assume it doesn't need to flag this because of it). Harry Roberts recently wrote about the differences between what Fonts does for you and what the value of still using a manual preconnect may be (use Find in page to find the "preconnect" section)

https://csswizardry.com/2020/05/the-fastest-google-fonts/

[anton-karlovskiy]

@addyosmani

Should the comparison we are making here be the original (non-font optimized version) vs. with @nuxtjs/google-fonts? I'm wondering if we may not be seeing the full picture if we are comparing this against a version relying on system fonts.

It makes sense.
Yes, I will re-create the comparison as you suggested.

I would need to double check our implementation, but I believe Google Fonts is trying to handle the preconnect already via a header (Lighthouse may assume it doesn't need to flag this because of it). Harry Roberts recently wrote about the differences between what Fonts does for you and what the value of still using a manual preconnect may be (use Find in page to find the "preconnect" section)

Thank you for explaining.

[anton-karlovskiy]

@addyosmani cc @pi0 @danielroe

FYI: #32 (comment) is updated according to #32 (comment).