使用 google 字体提高 google pagespeed

Question

使用 google 字体时是否可以提高 google 页面速度？我发现了 google 也推荐的代码 (https://github.com/typekit/webfontloader)。但是即使我加载这个脚本，我也无法通过 google pagespeed.

Answer 1

WebfontLoader 与显示交换不兼容。不确定这是不是好的解决方案。

请务必使用 Google 中的最后一个 url 字体 with display=swap

<!--old code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--new code-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

Google 字体的另一个问题是它使用了 2 个域。 https://fonts.googleapis.com and https://fonts.gstatic.com/

您应该在 header:

中使用 dns 预取和预连接

<link rel="dns-prefetch" href="//fonts.googleapis.com">

和

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

也许，最好的解决办法是在你的服务器上下载字体。

这是一篇关于优化 PageSpeed 字体的法语文章： Optimiser les fonts pour accélérer son site

Answer 2

惊人的事实是，如果您将字体本地化而不是从 Google 提供它们，您将在 PSI 中做得更好。

这听起来很疯狂，但我们尝试了 5 种不同的实现方式并本地化了字体，而不是服务于 Google URLs scores the beat

使用 google 字体提高 google pagespeed

Passing google pagespeed using google fonts

fonts

google-pagespeed

webfont-loader