梅州高端建站：优化Google字体性能

2019.08.14 mf_web

可以说谷歌字体很受欢迎。截至撰写时，它们在网络上被浏览超过29万亿次，并且很容易理解为什么 - 该系列可让您访问900多种可在您的网站上免费使用的漂亮字体。如果没有Google字体，您将受限于用户设备上安装的少数“ 系统字体 ”。

系统字体或“Web安全字体”是跨操作系统最常预安装的字体。例如，Arial和Georgia与Windows，macOS和Linux发行版一起打包。

像所有好东西一样，谷歌字体确实带来了成本。每种字体都带有Web浏览器在显示之前需要下载的权重。通过正确的设置，额外的加载时间不明显。但是，如果出错，您的用户可能会在显示任何文本之前等待几秒钟。梅州高端建站

Google字体已经过优化

Google字体API不仅可以为浏览器提供字体文件，还可以执行智能检查，了解它如何以最优化的格式提供文件。

让我们来看看Roboto，GitHub告诉我们常规变体的重量为168kb。

Roboto Regular的文件大小为168kb — 单个字体变体为168kb。（大预览）

但是，如果我从API请求相同的字体变体，我将提供此文件。这只是11kb。怎么可能？

当浏览器向API发出请求时，Google会首先检查浏览器支持的文件类型。我使用的是最新版本的Chrome，就像大多数浏览器支持WOFF2一样，因此字体以高度压缩的格式提供给我。

如果我将用户代理更改为Internet Explorer 11，我将使用WOFF格式的字体。

最后，如果我将用户代理更改为IE8，那么我将获得EOT（嵌入式OpenType）格式的字体。

Google Fonts为每种字体维护30多种优化变体，并自动检测并为每个平台和浏览器提供最佳变体。

- Ilya Grigorik，Web字体优化

这是Google字体的一个很棒的功能，通过检查用户代理，他们能够为支持这些格式的浏览器提供最高性能的格式，同时仍然在旧版浏览器上一致地显示字体。

浏览器缓存

Google字体的另一个内置优化是浏览器缓存。

由于Google字体无处不在，浏览器并不总是需要下载完整的字体文件。例如，SmashingMagazine使用名为“Mija”的字体，如果这是您的浏览器第一次看到该字体，则需要在显示文本之前完全下载，但下次使用该字体访问网站时，浏览器将使用缓存版本。

随着Google Fonts API的广泛使用，您网站或网页的访问者可能已经在浏览器缓存中使用了您设计中使用的任何Google字体。

- 常见问题解答，Google字体

除非更快地清除缓存，否则Google Fonts浏览器缓存将在一年后过期。

注意： Mija不是Google字体，但缓存原则不是特定于供应商的。

进一步优化是可能的

虽然Google在优化字体文件的交付方面投入了大量精力，但您仍可以在实施中进行优化，以减少对页面加载时间的影响。

1.限制字体系列

最简单的优化是简单地使用较少的字体系列。每种字体最多可以增加400kb的页面重量，乘以几个不同的字体系列，突然你的字体比整个页面重量更大。

我建议使用不超过两种字体，一种用于标题，另一种用于内容通常就足够了。通过正确使用字体大小，重量和颜色，您甚至可以使用一种字体实现美观。

显示单个字体系列的三个权重的示例（Source Sans Pro） — 单个字体系列的三个权重（Source Sans Pro）。（大预览）

2.排除变体

由于Google Fonts的高质量标准，许多字体系列包含全部可用的字体权重：

薄（100）
薄斜体（100i）
灯（300）
浅斜体（300i）
常规（400）
普通斜体（400i）
中等（600）
中斜体（600i）
大胆（700）
Bold Italic（700i）
黑色（800）
黑色斜体（800i）

这对于可能需要所有12种变体的高级用例非常有用，但对于常规网站而言，这意味着当您可能只需要3或4时，下载所有12种变体。

例如，Roboto字体系列的重量约为144kb。但是，如果您只使用常规，常规斜体和粗体变体，则该数字可降至~36kb。节省75％！

实现Google字体的默认代码如下所示：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

如果您这样做，它将仅加载“常规400”变体。这意味着所有浅色，粗体和斜体文本都无法正确显示。

要改为加载所有字体变体，我们需要在URL中指定权重，如下所示：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

一个网站很少使用从Thin（100）到Black（900）的所有字体变体，最佳策略是仅指定您计划使用的权重：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

这在使用多个字体系列时尤为重要。例如，如果您使用Lato作为标题，则仅请求粗体变体（可能是粗体斜体）是有意义的：

<link href="https://fonts.googleapis.com/css?family=Lato:700,700i" rel="stylesheet">

3.结合请求

我们上面使用的代码片段调用了Google的服务器（fonts.googleapis.com），称为HTTP请求。一般来说，您的网页需要进行的HTTP请求越多，加载所需的时间就越长。

如果要加载两种字体，可以执行以下操作：

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

这样可行，但这会导致浏览器发出两个请求。我们可以通过将它们组合成单个请求来优化它，如下所示：

<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

单个请求可以容纳多少字体和变体没有限制。

4.资源提示

资源提示是现代浏览器支持的功能，可以提高网站性能。我们将看看两种类型的资源提示：“ DNS预取 ”和“ 预连接 ”。

注意：如果浏览器不支持现代功能，它将忽略它。因此，您的网页仍将正常加载。

DNS预取

DNS预取允许浏览器fonts.googleapis.com在页面开始加载后立即开始连接到Google的字体API（）。这意味着，当浏览器准备好发出请求时，一些工作已经完成。

要为Google字体实施DNS预取，只需将此单行添加到您的网页<head>：

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

PRECONNECT

如果您查看Google字体嵌入代码，它似乎是一个HTTP请求：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

但是，如果我们访问该URL，我们可以看到另外三个请求到另一个URL，https：//fonts.gstatic.com。每个字体变体的一个额外请求。

这些额外请求的问题在于，在第一个请求https://fonts.googleapis.com/css完成之前，浏览器不会开始创建它们的进程。这是Preconnect的用武之地。

预连接可以描述为预取的增强版本。它是在浏览器要加载的特定URL上设置的。它不仅仅执行DNS查找，还完成了TLS协商和TCP握手。

就像DNS预取一样，它可以用一行代码实现：

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

只需添加此行代码即可将页面加载时间缩短100毫秒。这可以通过在初始请求旁边启动连接而不是等待它首先完成来实现。

5.本地主机字体

Google字体根据“Libre”或“免费软件”许可证授予许可，允许您在未经许可的情况下自由使用，更改和分发字体。这意味着如果您不想使用Google主机，则无需使用 - 您可以自行托管字体！

所有字体文件都可以在Github上找到。一个zip文件包含所有的字体也可以（387MB）。

最后，有一个帮助程序服务，使您可以选择要使用的字体，然后它提供执行此操作所需的文件和CSS。

在本地托管字体有一个缺点。下载字体时，您将保存它们。如果它们得到改进或更新，您将不会收到这些更改。相比之下，从Google Fonts API请求字体时，您始终可以获得最新版本。

显示上次修改日期的Google字体API请求 — Google字体API请求。（大预览）

请注意lastModifiedAPI中的参数。字体会定期修改和改进。

6.字体显示

我们知道浏览器下载Google字体需要时间，但文字在准备好之前会发生什么？很长一段时间，浏览器会显示文本所在的空白区域，也称为“FOIT”（不可见文本的Flash）。

推荐阅读：“ FOUT，FOIT，FOFT ”由克里斯·Coyier

什么都不显示对最终用户来说可能是一种不和谐的体验，更好的体验是最初将系统字体显示为后备，然后在字体准备好后“交换”字体。这可以使用CSS font-display属性。

通过添加font-display: swap;@ font-face声明，我们告诉浏览器显示后备字体，直到Google字体可用。

    @font-face {
    font-family: 'Roboto';
    src: local('Roboto Thin Italic'),
  url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2)
  format('woff2');
    font-display: swap;
  }

在2019年谷歌宣布他们将增加对字体显示的支持：swap。您可以通过向字体URL添加额外参数来立即开始实现此功能：

https://fonts.googleapis.com/css?family=Roboto&display=swap

7.使用Text参数

Google Fonts API的一个鲜为人知的功能是text参数。这个很少使用的参数允许您只加载您需要的字符。

例如，如果您的文本徽标需要是唯一字体，则可以使用该text参数仅加载徽标中使用的字符。

它的工作原理如下：

https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

显然，这种技术非常具体，只有一些现实的应用。但是，如果您可以使用它，它可以减少最多90％的字体重量。

注意：使用该text参数时，默认情况下仅加载“普通”字体粗细。要使用其他权重，您必须在URL中明确指定它。

https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

包起来

估计前100万个网站中有53％使用谷歌字体，实施这些优化可能会产生巨大影响。

你有多少尝试过？

梅州高端建站