leverage font-display for best performance
See original GitHub issueCurrently we enable prefetch
, preload
and also preconnect
by default and don’t use a display
strategy! This means even if stop lighhouse complaining about render render blocking resources (https://github.com/nuxt-community/google-fonts-module/commit/84c7f360d6b97eb07a9970a6826b1a7b2a40274b), we do prioritize fonts loading on network requests and we would need inlining a script for async workaround.
Instead we can leverage (almost) new font-display
by default which is smart enough to how to swap/fallback and this behavior should be customizable per-font not globally (depends on usage and impact on design) and we should do prefetch
for fonts with block
display.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Controlling Font Performance with font-display
Deciding the behavior for a web font as it is loading can be an important performance tuning technique. The new font-display descriptor for ......
Read more >Improving perceived performance with the CSS `font-display ...
The `font-display` property is a great way to tweak the way your fonts load, especially useful as fonts have a large effect on...
Read more >Best practices for fonts - web.dev
This article discusses performance best practices for fonts. There are a variety of ways in which web fonts impact performance:.
Read more >8 Font Loading Strategies to Improve Your Core Web Vitals ...
If performance is a top priority: Use font-display: optional. This is the most "performant" approach: text render is delayed for no longer ...
Read more >`font-display` for the Masses - CSS-Tricks
By default, most browsers will hide text for up to 3 seconds until displaying text in a fallback system typeface while waiting for...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @pi0 We must set as default
swap
https://github.com/nuxt-community/google-fonts-module#display?@ricardogobbosouza I think would be safer to bump major version. Since it changes how webpage progressively loads