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

我使用谷歌字体和我网站的排版。看起来不错，但是增加了很大的开销。有没有一种方法可以让我的网站在不影响网站速度的情况下仍然保持相同的外观和感觉

---

我在这里分析我的网站，当我使用谷歌字体时，我得到了一个非常低的分数，大约60，但如果我删除这些字体，那么我的分数就很高。有没有一种方法可以在不影响网页质量的情况下使用这些字体？我的首要任务是页面优化。

简短回答：不。稍长一点的回答：不，你可以试试，但你不太可能打败谷歌WebFonts提供给你的东西。现在让我们进一步剖析这个问题

首先，如果添加一个外部资源（webfont）对您的PageSpeed分数有如此负面的影响，那么您必须拥有一个相当轻松的页面——可以说，我们应该在PageSpeed方面解决这个问题。现在，回到webfonts

归零原则：向页面添加任何外部资源都会对页面的整体性能产生负面影响。对于webfonts，这可能是一个更大的问题，因为CSS被认为是一个“关键资源”，在字体到达之前，它会阻止渲染-如果我们跳过这一步，那么用户可能会得到一个“未设置样式的内容的闪光”（FOUC），其中页面使用一种字体渲染，然后在字体到达时重新设置样式。这是一次令人不快的经历——你肯定不想这样

第二步：使用webfont意味着我们必须包含一个外部CSS文件——在本例中，由Google服务器提供服务。这些服务器针对低延迟进行了大量优化，但同时，这里没有什么神奇之处——这仍然需要一些时间

步骤3：CSS文件中有什么？这就是很多人批评谷歌网页字体的地方。。样式表提供对webfont文件的

url（）

引用。为什么不使用base64/内联字体？Google WebFonts每天在数十亿页上呈现，因此我们选择专门使用URL，因为字体很可能位于浏览器的缓存中。如果您正在使用冷缓存（您应该这样）刷新页面以测试第一页加载，那么您将始终获取字体。。但这不是我们优化的体验

此外，为什么不直接将字体嵌入页面？每个平台都有不同的文件格式（woff、eot、ttf等），Google WebFonts会根据您当前的平台动态提供最优化的格式。如果您只需下载WebFont（ex，woff）并将其内联，那么它可能对您很有用，但对不同平台上的访问者来说就不行了。此外，这些字体背后的压缩一直在改进——如果你坚持使用谷歌服务器，你将自动继承这些改进。如果你自己滚，那你就卡住了

简言之：如果你想推出你自己的，那么确保你优化了每个平台的字体，基于平台提供有条件的字体，并随着时间的推移跟上压缩的改进。如果您能做到所有这些，那么您可能会做得比提供的更好。：-）

---

最后但并非最不重要不要害怕使用webfonts。是的，他们增加了额外的时间，但演讲也很重要。由你决定。如果施加的延迟不可接受，则坚持使用默认字体。但试图击败谷歌WebFonts基础设施/CDN不太可能让你走得很远

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

是的，你可以

下载你的谷歌网页字体文件

将它们上载到font squirrel web generator

选择专家设置并勾选：Base64 CSS

通过base64加载字体时，您不会等待外部http调用完成

这将删除未设置样式的内容（FOUC）的闪烁

---

参考资料：你还可以在网上查阅许多其他文章。我也在我的网站上试用过，效果很好。

我不认为有很多比从像谷歌这样的大型CDN加载字体更快的方法，但是。。。在加载页面的其余部分后，可以通过javascript将样式元素注入页面。为了更快的加载时间，交换一些不满足的内容。对于不使用javascript的人来说，这也是为什么我不把它作为一个答案来提出的原因。我有一些使用它的网站，得分在80分左右，你是如何使用它的？我只是在标题中使用CSS链接。标题标签下标题中的链接与此相同，尽管我使用的是wordpress。顺便问一句，wordpress中有没有插件可以删除这些内容？你可以下载文件，删除你不需要的内容，然后链接它？或者谷歌有像jQuery这样的自定义构建选项吗？回答得很好！非常感谢。当我试图获得最好的PageSpeed分数时，我不顾一切地陷入了“使用webfonts的恐慌”阵营。所有浏览器都支持异步加载Google字体吗？它有什么缺点吗？