search

codeAdrian / gatsby-omni-font-loader

Font loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronusly. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.
MIT License
106 stars 7 forks source link

Fix block render in async mode #35

Closed np36 closed 1 year ago

np36 commented 1 year ago

PageSpeed Insights addressed an opportunity of my site:

Eliminate render-blocking resources 1.88s /css2?family=Lobster&display=swap (fonts.googleapis.com) 1.3 KiB 780 ms /css2?family=Passion+One:wght@900&display=swap (fonts.googleapis.com) 1.1 KiB 150 ms ...

Google font related <link> are:

<!-- Group 1 -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="true">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true">

<!-- Group 2 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lobster&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Passion+One:wght@900&display=swap">

<!-- Group 3 -->
<link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" data-react-helmet="true">
<link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css2?family=Passion+One:wght@900&display=swap" data-react-helmet="true">

<!-- Group 4 -->
<noscript data-react-helmet="true"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lobster&display=swap"></noscript>
<noscript data-react-helmet="true"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Passion+One:wght@900&display=swap"></noscript>

This pull request would fix this issue, as I tested.