目录
Google Fonts 是许多网站中使用最广泛的第三方资源之一。它们使网站能够轻松统一和更好地呈现其内容。Google Fonts 有超过 999 个免费且独特的字体系列可供选择，用户总共查看了超过 40 万亿次（2020 年 7 月）。
像 Google Fonts 这样的外部托管字体也是加载最重的第三方资源之一。它们不仅会增加页面权重，而且网站必须发出额外的 HTTP 请求来获取它们。当您加载具有多个字体粗细的多个字体系列时，性能影响更加明显。
因此，在本地托管 Google 字体并从您的服务器提供它们似乎是一个好主意，而不是从 Google 的 CDN 加载它们。从理论上讲，它可以使您的网站加载得更快。但事实证明，字体特别复杂，自托管它们可能会使优化网站的性能变得有点棘手。
本文介绍了Web 字体（包括 Google Fonts）的基础知识，以及如何在本地托管它们。然后，您将了解它是否对网站的性能产生影响。
什么是 Web 字体？
Web 字体是指可用于显示文本网站的字体。它们是字形的集合，其中每个字形都是一个显示字母、数字或符号的向量。
在 Web 的早期，开发人员可供选择的 Web 字体有限。主要操作系统都捆绑了这些字体（例如 Arial、Georgia、Times New Roman）。因此，它们也被称为 Web 安全字体。
CSS3 引入了 @font-face 规则，允许 Web 开发人员使用自定义字体。指定它们会强制浏览器将它们与其他网站资源一起下载。此功能开辟了令人兴奋的网站设计新方法。Web 不再是无聊文本的集合。
当今使用的一些最流行的 Web 字体是 Open Sans、Roboto 和 Lato。这些也是 Google 字体。
什么是 Google 字体？
Google Fonts 是一个庞大的免费开源字体目录。它们使 Web 设计人员和开发人员可以轻松创建具有出色排版的精美网站。截至目前，Google Fonts 包括超过 135 种语言的 Web 字体。
Google Fonts 不仅负责其托管的所有网络字体的许可要求，还处理它们的托管和交付。您甚至可以将其视为字体的 CDN。因此，每个人都可以通过在网站的页面标题中添加一行来随时利用它们。
Google 字体和网站性能
Google Fonts 声称通过跨不同站点缓存字体来加快网页加载速度，以便所有网站的每种字体仅加载一次。浏览器可以对请求相同 Google 字体的任何其他网站使用相同的缓存字体。
它还检测用户的浏览器，并根据浏览器支持的最新技术向他们发送最小的字体文件。例如，它在适用时为用户提供 WOFF 2.0 格式的字体，因为与其他 Web 字体格式相比，它具有更好的压缩率。
但是，当您在网站上使用 Google Fonts 时，网站的主样式表会发送一个 HTTP 请求来获取 Google Fonts 样式表（一个 CSS 文件）。客户端将此请求发送到 fonts.googleapis.com 域。通常，会为您使用的每种字体生成一个请求。
Google Fonts 样式表再次请求下载字体文件（例如 WOFF 或 WOFF 2.0 文件）。样式表将这些请求定向到托管所有 Google Fonts 的 fonts.gstatic.com 域。
在您的网站上发出额外的 HTTP 请求需要时间。您可以通过检查 WebPageTest 工具生成的瀑布图来确认这一点。
Google Fonts API 为缓存字体设置了 1 天的低过期时间。您无法修改此设置，因为 Google 会根据多种因素自动生成 CSS 文件。
一些网站速度测试工具指出这是性能问题，并建议在本地托管字体。这样，您可以手动增加字体的过期时间，并将它们缓存更长的时间。以下部分介绍了如何在 WordPress 网站上做到这一点。
如何从您的服务器提供 Google 字体
在您的 WordPress 网站上本地自托管 Google 字体的最简单方法是使用免费的 OMGF WordPress 插件。它使用 Google Fonts Helper API 将字体下载到您的网络服务器。之后，OMGF 为下载的字体生成样式表，并将其添加到您网站的标题中。
使用 OMFG 可以轻松搜索您想要的任何 Google 字体系列。你也可以点击 自动检测 按钮让它分析您的网站正在使用哪些 Google 字体。
确定特定字体系列后，您可以指定要下载的字体子集和样式。这可以帮助您显著减小所提供字体的大小。
在本地提供 Google Fonts 应该通过最大限度地减少 DNS 请求和利用浏览器缓存来减少页面加载时间。但这个假设真的成立吗？
使用自托管 Google Fonts 进行网站性能测试
我们建立了一个使用 Google Fonts 的虚拟网站。第一个测试站点只使用了一个字体系列。然后，使用它运行了一些性能测试。
然后，他们修改了网站以在本地提供 Google Fonts 并再次对其进行了测试。
速度测试结果表明，在本地托管 Google Fonts 不会带来任何特定的性能优势。它们看起来几乎相同。
为了证实这一理论，他们在再次测试之前向网站添加了更多字体。下面的结果描绘了一幅更清晰的画面。
启用 WP Rocket 后，直接从 Google CDN 提供字体被证明是最快的选择。否则，这里没有像以前那样看到特定的性能优势。
以下是上面执行的速度测试报告中的一些屏幕。请注意各种测试之间的字体加载时间。
在此处的测试中，modules.tff 字体文件用作控制组。在这两种情况下，它与测试网站托管在同一台服务器上。
结果显示，Google Fonts 从 Google CDN 加载的速度明显加快。与第二种情况相比，在第一种情况下，即使是本地托管的 modules.tff 字体也加载得更快。
添加许多 Google Fonts 只会进一步提高性能。
即使 Google Fonts 添加了额外的 HTTP 请求，它们从 Google CDN 加载的速度也比本地托管时快得多。那么，什么可以解释这种异常呢？以下部分提供了简要说明。
为什么 Google Fonts 更好
- Google 在如何为每个用户提供字体方面很聪明。它不会向每个人提供相同的 CSS，而是根据用户的设备、浏览器和各种其他因素来决定提供什么样式表。例如，它将仅向支持具有 WOFF、Kerning 和 Hints 等资源密集型功能的字体提供字体。在所有其他情况下，它将使用高级 WOFF 2.0 压缩标准。这有助于减小交付的字体的大小，使它们的加载速度更快。
- Google Font API 脚本会根据多种因素按页下载字体，即使页眉包含字体也是如此。如果网页未使用指定的字体，则 Google Fonts 不会加载该字体。如果你在本地托管字体，则很难启用此功能。
- 虽然在大多数情况下减少 HTTP 请求的数量是加快网站性能的好方法，但上述测试结果表明 Google Fonts 并非如此。如果您在本地托管 Google Fonts，您网站的实际加载时间会受到影响。
- Google 使用一流的 Web 性能技术来提供字体。即使您对 Web 字体以及如何使用它们知之甚少，Google Fonts 也可以非常轻松地在您的网站上实施它们，而不会显着降低性能。
- 当新的 Web 字体技术出现时（例如可变字体、渐进式字体丰富、更好的压缩），Google Fonts API 将立即将其引入数百万个网站。您无需执行太多操作即可启用它。
总结
自托管字体似乎是加快网站速度的好方法。但正如我们上面发现的那样，Google Fonts 不仅仅是一个巨大的免费字体存储库，它还是使用最新的 Web 性能技术交付它们的智能方式。
您了解到，自托管 Web 字体比仅仅下载和托管它们要复杂一些。自己优化他们的交付并不是那么简单，除非您拥有完美实施它的专业知识和技术技能。值得庆幸的是，Google Fonts 会为您处理所有这些。
最终，您在网站上使用的字体（和子类型）越多，加载所需的时间就越长。
希望这篇文章能说服不去自托管 Google Fonts。
发表回复