3 ms·
> why have we decided that the FOUC (“flash of unstyled content”) caused by laying out the page twice, once without and once with the fonts, is such a dire prob
by seanwilson 1y ago
> why have we decided that the FOUC (“flash of unstyled content”) caused by laying out the page twice, once without and once with the fonts, is such a dire problem that it’s worth blocking the page’s first usable render behind a ~1MB resource?
Why do you think that's a majority view? Google's page speed metric which they use as a SEO signal is followed by many webdevs and it very strongly encourages displaying text with system fonts while custom fonts load, and that the top of the page is displayed quickly:
"Ensure text remains visible during webfont load ... Fonts are often large files with slow load times. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT)."
https://developer.chrome.com/docs/lighthouse/performance/font-display https://developer.chrome.com/docs/lighthouse/performance/fon...
"First Contentful Paint (FCP) is an important, user-centric metric for measuring perceived load speed because it marks the first point in the page load timeline where the user can see anything on the screen—a fast FCP helps reassure the user that something is happening."
https://web.dev/articles/fcp https://web.dev/articles/fcp
If you hide the page content from displaying until custom fonts load and your header image loads for example, you'll likely get a red/unacceptable score.
- Culonavirus 1y agoYea but the same POS company then tells you CLS bad mkaaaay... and guess what FOUC causes, layout shifts... (sorry, I got carried away with all the acronyms haha)
- seanwilson 1y ago> tells you CLS bad mkaaaay... and guess what FOUC causes, layout shifts I haven't had a problem here (with layout shift). As long as you specify width + height of images in the HTML, and you don't have dynamic content pushing the layout about as it loads it in your page header, you'll likely get a high CLS score as it has some leeway. And sounds like `font-size-adjust` from the OP is helpful in avoiding layout shift when the stand-in font is swapped out for the custom font when it arrives? I haven't found this necessary though.
- yencabulator 1y agoI'd argue that's not "avoiding" but "minimizing". As in, the average shift will be by fewer pixels. The shift is still there; the two fonts will practically never match in size perfectly, causing e.g. word wrap to happen differently.