无样式文本的Flash-FOUT是否会影响网站性能? [英] Does Flash of Unstyled Text - FOUT, impacts website performance?

问题描述

有人知道为什么修复FOUT很重要吗?修复FOUT对网站性能有帮助吗?

Does anyone know why is important to fix FOUT? Would fixing FOUT help with website performance?

推荐答案

简短回答

在加载速度方面，FOUT对性能没有影响(对渲染时间的影响很小)，但确实会影响用户体验.

Short Answer

FOUT has no impact (a tiny rendering time impact) on performance in terms of load speed, it does affect user experience.

闪烁的无样式文本(FOUT)本身不会影响性能，这是Web字体性能的后果.

A Flash of Unstyled Text (FOUT) itself doesn't affected performance, it is a consequence of Web Font performance.

浏览器加载其默认字体，然后在加载Webfont时交换新字体.由于Web字体通常是相对较大的文件，这是性能方面的体现(人们似乎下载了10种字体，增加了数百种字体).到页面大小的KB的大小.

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).

现在，FOUT/字体交换存在很大的问题.这通常会导致布局转换，从而影响您的网站的累积布局转换(CLS).

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.

您在这里遇到的用户体验是FOUT(这是CLS旨在部分衡量的).

It is user experience you are bothered about here with FOUT (which is what CLS is designed to partially measure).

如果FOUT对性能(加载时间)有好处，那么与仅隐藏字体直到加载字体相比，该页面的显示速度更快.

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.

与其他任何事情一样，您可以做很多事情来减轻这些问题，但是它们都需要权衡取舍.

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.

如果您真的想推动信封发展，则可能希望将可变字体视为<对于可变字体，a href ="https://caniuse.com/variable-fonts" rel ="nofollow noreferrer">支持非常好，它可将所需的字体变体数量减少到一个.

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).

这篇关于无样式文本的Flash-FOUT是否会影响网站性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！