Google 的页面速度测试只显示一个问题:
Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
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 的输出取决于用户代理，因此在本地分发字体没有意义。所以，问题是:我想用它做什么？我如何满足谷歌的速度测试？
最佳答案
到目前为止，我知道如果您使用 Fontloader 是目前最好的解决方案.它首先加载一个简短的 .js 脚本，然后异步加载字体。
提示:Use font-family: 'Roboto', 'sans serif'; async 存在网站呈现后字体类型切换的问题。所以用户看到一个简短的字体切换就像一闪而过。如果您使用无衬线字体作为回退，则开关不会太大。
或者使用 .wf-active
关于html - 谷歌字体加载优化和缓存，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44216622/