如何在不影响网站页面速度的情况下在我的网站上使用谷歌字体

Posted 2023-03-15

【中文标题】如何在不影响网站页面速度的情况下在我的网站上使用谷歌字体

【英文标题】：How do I use google fonts on my site without compromising the page speed of the site

【发布时间】：2012-08-22 06:32:22

【问题描述】：

我使用 Google 字体和我网站的排版。看起来很棒，但它增加了很大的开销。有没有一种方法可以让我的网站保持相同的外观和感觉而不影响网站的速度？

我在这里https://developers.google.com/speed/pagespeed 分析我的网站，当我使用 Google 字体时，我得到的分数非常低，大约为 60，但如果我删除这些字体，那么我的分数很高。有没有办法可以在不影响网页质量的情况下使用这些字体？我的首要任务是页面优化。

【问题讨论】：

我不认为有很多比从像谷歌这样的大型 CDN 加载字体要快的方法，但是......您可以在页面的其余部分完成后通过 javascript 将样式元素注入您的页面加载。用一闪而过的无字体内容换取更快的加载时间。也为不使用 javascript 的人折衷，这就是为什么我不把它作为答案提出来的原因。

我有网站使用它，分数在 80 左右，你是如何使用它的？我只是在标题中使用 CSS 链接。

标题标签下方标题中的相同链接，尽管我使用的是wordpress。顺便说一句，wordpress 中有什么插件可以消除这种开销

无论如何您都可以下载文件，删除不需要的文件，然后链接吗？或者 Google 有没有像 jQuery 这样的自定义构建选项？

【参考方案1】：

简短的回答：不。稍微长一点的答案：不，您可以尝试，但您不太可能击败 Google WebFonts 已经为您提供的内容。现在让我们进一步剖析这个问题......

首先，如果添加单个外部资源（网络字体）会对您的 PageSpeed 分数产生如此负面的影响，那么您必须拥有一个相当轻量级的页面 - 可以说，我们应该在 PageSpeed 方面解决这个问题。现在，回到 webfonts！

零基础：向页面添加任何外部资源将对页面的整体性能产生负面影响。对于 webfonts，这可能是一个更大的问题，因为 CSS 被认为是一种“关键资源”，它会一直保持渲染直到字体到达——如果我们跳过这一步，那么用户可能会得到一个“无样式内容的闪光”（ FOUC），页面使用一种字体呈现，然后在字体到达时重新设置样式。这是一种不和谐的体验——你绝对不想这样。

第二步：使用网络字体意味着我们必须包含一个外部 CSS 文件 - 在这种情况下，由 Google 服务器提供服务。这些服务器高度针对低延迟进行了优化，但与此同时，这里并没有什么神奇之处 - 仍然需要一些时间！

第 3 步：CSS 文件中有什么内容？这就是很多人批评 Google WebFonts 的地方。样式表提供了url() 对 webfont 文件的引用。为什么不使用 base64 / inline 字体？好吧，Google WebFonts 每天在数十亿页面上呈现，因此我们选择使用 URL 是因为该字体很可能在您的浏览器缓存中。如果您使用冷缓存刷新页面（您应该这样做）以测试第一页加载，那么您将始终获取字体..但这不是我们优化的体验。

此外，为什么不将字体内联到您的页面中呢？好吧，每个平台都有它接受的不同文件格式（woff、eot、ttf 等），Google WebFonts 会根据您当前的平台动态提供最优化的格式。如果您只是下载 WebFont（例如 woff）并将其内联，那么它可能适合您，但不适用于不同平台上的访问者。此外，这些字体背后的压缩一直在改进 - 如果您坚持使用 Google 服务器，您将自动继承这些改进。如果你自己滚动，那么你就被卡住了。

简而言之：如果您想推出自己的产品，请确保为每个平台优化字体，根据平台提供有条件的字体，并随着时间的推移跟上压缩改进的步伐。如果你能做到所有这些，那么你可能会比提供的更好。 :-)

---

最后但并非最不重要。 不要害怕使用网络字体。是的，他们增加了额外的时间，但演示文稿也很重要。这是你的电话。如果施加的延迟不可接受，则坚持使用默认字体。但是尝试击败 Google WebFonts 基础架构/CDN 不太可能让您走得很远。

附：最后一个提示：确保你真正使用了所有的权重和字体。许多人选择了整个家庭（以防万一），最终根本不使用它们，这在某些浏览器上会导致不必要的下载。

【讨论】：

很好的答案！谢谢你。在试图获得最好的 PageSpeed 分数时，我不顾一切地落入了“害怕使用网络字体”的阵营。

异步加载谷歌字体使用webfont loader，所有浏览器都支持吗？它有什么缺点吗？

【参考方案2】：

是的，你可以。

下载您的谷歌网络字体文件 将它们上传到字体松鼠网络生成器 选择专家设置并勾选：Base64 CSS。 通过 base64 加载字体时，您无需等待外部 http 调用完成。 这将删除 Flash Of Unstyled Content (FOUC)

参考：https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/，您可以在网上查找许多其他文章。我也在我的网站上试过了，效果很好。