问题
Does anyone know why is important to fix FOUT? Would fixing FOUT help with website performance?
回答1:
Short Answer
FOUT has no impact (a tiny rendering time impact) on performance in terms of load speed, it does affect user experience.
Longer Answer
A Flash of Unstyled Text (FOUT) itself doesn't affected performance, it is a consequence of Web Font performance.
The browser loads it's default font and then when the webfont loads it swaps the new font in. As Web Fonts are normally relatively large files that is where the performance aspect comes in (and people seem to download 10 variations of fonts adding hundreds of KB to the page size).
Now there is a big issue with FOUT / font-swapping. This often results in a layout shift which affects your Cumulative Layout Shift (CLS) for the site.
It is user experience you are bothered about here with FOUT (which is what CLS is designed to partially measure).
If anything a FOUT is good for performance (load time), the page displays quicker than if you simply hid it until the font loaded in.
Solutions?
As with anything there are loads of things you can do to mitigate the issues but they all have tradeoffs.
One example (and what I believe is currently the best solution) is to use a web safe font set on initial page load.
Then load the custom font(s) using a service worker and store them locally.
Then when the user navigates to a new page (or returns to the site if they immediately leave) you have the font cached locally and can serve it from there.
I have over-simplified the above, it is not a simple thing to implement but it is the best performance to experience balance.
If you really want to push the envelope you might want to look into Variable Fonts as support is pretty good for variable fonts and it massively reduces the number of font variations you need (to one).
来源：https://stackoverflow.com/questions/64350845/does-flash-of-unstyled-text-fout-impacts-website-performance