如何为Google字体"利用浏览器缓存"？
J82*_*J82 43 browser-cache google-font-api
我通过Pingdom测试了我的网站,得到了这个:
我搜索但无法找到解决方案.有谁知道我怎么能得到14到100？
Mar*_*ark 48
不是一个完整的解决方案,但您可以通过将两个请求合并为一个来改善这种情况:
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
我在我的一个网站上为两个字体做了这个,并且对你的14分得86.重要的是,这是一个真正的加速,而不仅仅是减少任意分数的黑客.
- 这种方法是真正的加速(我认为).将字体放在您自己的服务器上的替代方法(在您的服务器上放置更多负载)将更有可能减慢速度,同时在测试中显示"100".真实表现>考试成绩. (4认同)
- 请记住,您应该将管道字符"|"更改为URL编码的字符串†相当于`%7c`,不这样做会在某些情况下抛出错误‡.因此,上面的示例将显示为"https://fonts.google.com/css？family = Montserrat%7cOpen + Sans`†:[reference](https://www.w3schools.com/TAGs/ref_urlencode.asp) ‡:[参考](/sf/ask/1535857851/-url-spring-rest-cxf) (2认同)
Den*_*nko 26
由于您无法控制Googles标头(包括过期标头),我只能看到一个解决方案 - 将这两个样式表和字体下载到您自己的托管服务器,相应地更改HTML标签.
然后,您可以根据需要设置过期标题(Pingdom称为"生命周期").
例如,打开第一个链接:
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.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, U+E0FF, U+EFFD, U+F000;
}
下载此.woff2文件并将其保存在您的网络服务器上的任何位置.将此样式表复制并粘贴到您自己的CSS文件或HTML中.将fonts.gstatic.com的链接更改为新URL.
Google提供的这些字体的截止时间为1天.您现在可以轻松将其设置为30天.
- 请不要这样做.CSS文件的内容因用户代理而异!如果您使用Chrome打开文件并保存内容,则只能使用Chrome等!如果要从自己的服务器提供CSS文件,则需要提供Crossbrowser解决方案.http://www.localfont.com/有一个选项可以为您生成任何来自谷歌字体的CSS.如果您愿意,也可以下载所有浏览器格式的字体文件,并为您的主机提供服务. (60认同)
- 谢谢,我希望我不必下载字体,但我想这是唯一的方法.我想知道为什么积极鼓励PageSpeed的谷歌甚至都不会缓存他们自己的字体.无论如何,谢谢.我会在2分钟内接受你的回答. (12认同)
- 仅供参考 - 我使用此工具下载谷歌字体以供离线使用.这节省了时间:https://google-webfonts-helper.herokuapp.com/fonts (8认同)
- @udondan确定吗？当我打开这些CSS文件中的任何一个时，都看不到任何与浏览器相关的内容。此外，如果Google认为1天的缓存还可以-可能不涉及用户代理调整吗？ (2认同)
小智 23
首先,澄清缓存Google Fonts CSS文件与实际字体文件之间的区别非常重要.根据谷歌字体常见问题解答,他们的字体文件实际缓存了一年.这是缓存24小时的CSS文件:
对CSS资产的请求缓存1天.这允许我们在更新时更新样式表以指向新版本的字体文件,并确保使用Google Fonts API托管的字体的所有网站将在每个版本的24小时内使用每种字体的最新版本.
字体文件本身的缓存时间为一年,累积起来可以使整个网站更快:当数百万个网站都链接到相同的字体时,它们会在访问第一个网站后被缓存并立即显示在所有其他随后访问的网站上.我们有时会更新字体文件以减小文件大小,增加语言覆盖率并提高设计质量.结果是网站访问者向Google发送的请求非常少:我们每个浏览器每天只能看到每个字体系列1个CSS请求.
我建议不要自己托管这些CSS文件,因为你会落后并且在更新时不使用最新版本的字体.
但是,有几种方法可以加快CSS请求:
- 正如Mark在他的回答中提到的,您可以将两个webfonts组合成一个请求:
https://fonts.googleapis.com/css?family=Montserrat|Open+Sans - 如果您只使用某种字体的某种样式,则只能加载实际使用的样式.在这里我们加载蒙特塞拉特的全部,但只加载三种样式的Open Sans; 常规(400),斜体(400i)和粗体(700):
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">
| 归档时间： |
|
| 查看次数： |
59104 次 |
| 最近记录： |