如何在我的网站上使用Google字体而不影响网页速度？

Question

我使用Google字体来进行网站排版，看起来很好看，但它增加了很大的开销。有没有办法在不影响网站速度的情况下仍然能够获得相同的外观和感觉？

我正在分析我的网站，使用https://developers.google.com/speed/pagespeed，当我使用Google字体时，得分非常低，约为60分，但如果我删除这些字体，则得分很高。有没有办法在不影响网页质量的前提下使用这些字体呢？我的优先级是页面优化。

- Mike

---

我不认为有比从像Google这样的大型CDN加载字体更快的东西，但是......您可以在页面加载完成后通过JavaScript将样式元素注入到页面中。用更快的加载时间换取一闪而过的未加载字体内容。但是这也会影响那些不使用JavaScript的人，这就是为什么我不把它作为答案提出的原因。 - moopet

我有使用它的网站得分约为80，你是如何使用它的？我只是在头部使用CSS链接。 - Rich Bradshaw

同样的问题，标题标签下面有一个链接。不过我在使用WordPress。顺便问一下，WordPress里有没有插件可以去掉这个额外的东西？ - Mike

有没有办法可以下载文件，删除不需要的内容，然后链接代替原文件？或者谷歌是否有类似 jQuery 的自定义构建选项？ - aug

Answer 1

简短回答：不行。稍微长一些的回答：不行，你可以尝试，但是高度不可能打败谷歌WebFonts已经为您提供的内容。现在让我们更详细地分析一下这个问题...

首先，如果添加一个外部资源（Web字体）对您的页面产生如此负面影响，那么您的页面必须相当轻巧 - 或许应该在PageSpeed方面解决这个问题。现在，回到Web字体！

零点：向页面添加任何外部资源都会对页面的整体性能产生负面影响。对于Web字体来说，这可能是一个更大的问题，因为CSS被认为是“关键资源”，它将阻止渲染，直到字体到达 - 如果我们跳过此步骤，那么用户可能会看到“未样式化内容的闪烁”（FOUC），其中页面使用一种字体渲染，然后在字体到达时重新样式化。这是一个令人震惊的体验 - 您肯定不希望出现这种情况。

第二步：使用Web字体意味着我们必须包含一个外部CSS文件 - 在这种情况下，由Google服务器提供。这些服务器经过了严格的低延迟优化，但同时也没有什么魔法 - 这仍然需要一些时间！

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

另外，为什么不将字体嵌入到您的页面中呢？因为每个平台都有不同的文件格式可接受（如woff、eot、ttf等），而Google WebFonts会根据当前平台动态地提供最优化的格式。如果您只是下载WebFont（例如woff）并将其内联，那么它可能对您很有效，但对于使用不同平台的访问者则不然。此外，这些字体背后的压缩技术一直在不断改进-如果您使用Google服务器，就会自动继承这些改进。如果您自己创建，则会被卡住。

简而言之：如果您想要自创字体，请确保为每个平台优化字体，根据平台提供有条件的字体，并随时跟进压缩改进。如果您能做到这一点，那么您可能会做得比提供的更好。 :-)

---

最后但并非最不重要的。 不要害怕使用Web字体。是的，它们会增加额外的时间，但演示也很重要。由您决定。如果强加的延迟无法接受，那么请坚持使用默认字体。但试图击败Google WebFonts基础架构/ CDN不太可能让您走得太远。

附言：最后一个提示：确保实际使用您包含的所有权重和字体面。许多人会选择整个字体族（以防万一），最终根本不使用它们，在某些浏览器上会导致不必要的下载。

- igrigorik

---

非常好的答案！谢谢你。在努力获得最佳PageSpeed分数时，我明显陷入了“害怕使用Web字体”的阵营。 - jonathanbell

使用WebFont Loader异步加载Google字体，所有浏览器都支持吗？它有什么缺点吗？ - Shaiju T

Answer 2

是的，你可以这么做。

1. 下载你的谷歌网络字体文件。
2. 上传它们到字体松鼠网络生成器上。
3. 选择高级设置并勾选：Base64 CSS。
4. 通过Base64加载字体时，你不需要等待外部http调用完成。
5. 这将消除未样式化内容的Flash（FOUC）。

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

- Jad Joubran

Answer 3

是的，这是可能的。

这是一个解决办法，包括用于打印的字体和“media”属性。在页面加载完成后，使用JS移除该属性。这样字体就适用于所有情况。

<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="(font CSS URL here)">

https://www.w3schools.com/tags/att_link_media.asp

https://pagespeedchecklist.com/asynchronous-google-fonts

- Barbaros Gören