Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance penalisation for missing preconnect attributes #43

Open
dvago opened this issue Apr 16, 2020 · 3 comments
Open

Performance penalisation for missing preconnect attributes #43

dvago opened this issue Apr 16, 2020 · 3 comments

Comments

@dvago
Copy link

dvago commented Apr 16, 2020

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.

@ram-you
Copy link

ram-you commented May 28, 2020

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

@Albertbol
Copy link

Albertbol commented Jul 7, 2020

   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/

@LOG-TAG
Copy link

LOG-TAG commented Jul 10, 2020

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants