Open StudioRATATA opened 4 years ago
In head, if the font is cached:
<script>sessionStorage.fontsLoaded&&document.documentElement.classList.add("wf-active");</script>
And load webfontloader async with font-display: swap:
if (!sessionStorage.fontsLoaded) {
require(['webfontloader'], function(WebFont) {
WebFont.load({
google: {
families: [
'Roboto:400,700&display=swap'
]
},
active: () => {
sessionStorage.fontsLoaded = true
},
});
});
}
Google Lighthouse score Mobil: 100 Google Lighthouse score Desktop: 100
Der gesamte Text bleibt während der Webfont-Ladevorgänge sichtbar. All text remains visible during webfont loads
You can now optimize the whole thing with Preconnect / dns-prefetch. This takes the loading time of the connection establishment to the target out of the consideration. In a test case, the Google programmer Ilya Grigorik saved about 0.5 seconds of loading time by adding Preconnect when loading the Google fonts and wrote a very informative article on this topic.
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Does anyone have more experience or tips here?
May I add that in order for display=swap
to work, you need to add it only to the last font in the array.
you can achieve this by doing
const fonts = [ ... ] // what you'd normally pass to families: []
fonts.map((x, i) => x + variants + (i === fonts.length - 1 ? '&display=swap' : ''));
Adding on each item in the array passed to families will generate a request with multiple display=swap params.
Hi, Can you Add the &display=swap parameter to the end of your Google Fonts URL? https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknown#google-fonts
This adds to the Google Lighthouse score