谷歌字体加载优化和缓存

Question

谷歌字体加载优化和缓存

htmlfontspagespeedgoogle-font-apigoogle-fonts

5

谷歌的页面速度测试只显示一个问题：

消除在以上折叠内容中阻止呈现的JavaScript和CSS 您的页面有1个阻塞CSS资源。这会导致页面呈现延迟。
您页面上的所有以上折叠内容都无法呈现，直到以下资源加载完成。尝试推迟或异步加载阻止资源，或直接在HTML中内联关键部分的资源。
优化以下内容的CSS传递：
https://fonts.googleapis.com/css?family=Roboto:300,400

正在加载字体，如fonts.google.com建议的那样：

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

在<head />标签内。

据我所知，无法控制Google字体的缓存，而且此URL的输出取决于用户代理，因此将字体分发到本地没有意义。所以问题是：我该怎么做？如何满足Google的速度测试？

- stkvtflw

1

你是否看过这个库 https://github.com/typekit/webfontloader？它或许可以帮助到你——谷歌字体的例子在“入门指南”中排在第一位。 - Stanislav Kvitash

你尝试过使用@import方法进行测试吗？这可能对你的应用程序更有效，因为它明确地ping了“above-the-fold content”。如果没有，请检查页面代码中是否有其他问题。请展示更多页面代码。 - Coastal-Cam

显然没有人知道如何使用样式标签。 - Zekrom_Vale

我不确定，但是在我看来，警告消息与<link>标签的位置有关。你可以将它放在结束的</body>之前，然后警告消失了。但是这样会导致网站加载后出现闪烁的效果。 - Eduard Void

可缓存的 Google 字体：https://dev59.com/EV4b5IYBdhLWcg3wdxgv#57073920 - Hamid Sarfraz

5个回答

1

到目前为止，如果您使用Fontloader，我所知道的最佳解决方案是它。它首先加载一个短的.js脚本，然后异步加载字体。
提示：使用font-family：'Roboto'，'sans serif'; 异步加载存在一个问题，即站点呈现后字体类型会切换。因此，用户会看到一个短暂的字体切换，就像闪光灯一样。如果您使用sans serif作为备选项，则切换不会那么大。
或使用.wf-active

- Lovntola

2

请注意：https://fonts.gstatic.com/xxx 被许多浏览器缓存了数月。https://fonts.googleapis.com/xxx 仅支持24小时以快速支持字体更改。 - Lovntola

0

我猜异步加载字体可以解决这个问题。我找到了一篇有趣的文章，也许它可以帮助你异步加载字体。

- vijayscode

0

由于您无法控制Google的标头（包括过期标头），我只能看到一种解决方案-将这两个样式表和字体下载到您自己的托管服务器上，相应更改HTML标记。

然后，您可以根据需要设置过期标头。

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

下载这个 .woff2 文件并将其保存在您的 Web 服务器上的任何位置。复制并粘贴此样式表片段到您自己的 CSS 文件或 HTML 中的任何位置。将链接从 https://fonts.googleapis.com 更改为您的新 URL。

- Vignesh PV

1

不要这样做。这些文件类型取决于浏览器及其字体支持。系统有四种字体类型，根据浏览器进行切换。 - Lovntola

抱歉，今天有五种字体类型：WOFF、OTF、TTF、SVG、EOT。 - Lovntola

这个答案几乎是从 https://dev59.com/EV4b5IYBdhLWcg3wdxgv#29091105 直接复制过来的。 - mechalynx

0

本地托管CSS和字体可以显著提高网站速度，至少对于pagespeed计算的“初始页面加载”视图而言。

在我看来，问题不在CDN上，而在于CSS生成。Googlefonts似乎正在运行一个脚本为用户的浏览器生成唯一的CSS。我猜它被持续的流量淹没了，或者是用PHP编写的。哈哈开玩笑，现在是2023年，肯定是Node啦。

截至2023年3月20日，Woff具有100％的浏览器兼容性得分，因此仅使用woff本身应该没问题，尽管存在5种不同的字体格式。Woff2的得分为92，但IE的支持较低。

如果缺少IE 11浏览器文件，请在curl或其他URL代理中使用以下User-Agent字符串获取带有指向woff文件的链接的CSS。

"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko"

或者使用 google-webfonts-helper，使下载工作变得容易。

- A Boston

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhishek Ghosh · Accepted Answer

需要备用的data:font，在页脚加载。这将得到与我类似的结果：

这是针对一些设备可能会失败的回退示例CSS：

@font-face {
 font-family: 'Arial'; /* Do Proper Naming */
 src: url('Arial.eot'); /* For IE 5-8 */
 src: local('?'), /* It is called smile hack to promote CSS to UTF-16 */
 url(data:font/truetype;charset=utf-8;base64,) format('truetype'), /*base64 encoded font IE9, Safari 3.1+ FF 3.5+ Chrome 4.0+*/
 url('Arial.svg#123XYZ') format('svg'); /* iPad, iPhone with OS less than or equal to 4.1 */
 font-weight: normal;
 font-style: normal;
}

我写过这篇文章 -- https://thecustomizewindows.com/2013/10/base64-encoding-and-font-css/ 这个CSS是由一位专业的字体开发者编写的，我为此付费。阅读我的指南，测试该网站的源代码，并以相同的方式使用。