question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

leverage font-display for best performance

See original GitHub issue

Currently 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:closed
  • Created 3 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
ricardogobbosouzacommented, Oct 21, 2020
1reaction
pi0commented, Oct 22, 2020

@ricardogobbosouza I think would be safer to bump major version. Since it changes how webpage progressively loads

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found