为Google Insights加载谷歌字体非阻止方式

时间:2016-09-06 11:14:18

标签: javascript html css google-pagespeed

我正在尝试传递Google页面速​​度的见解,而我无法通过“消除渲染阻止JavaScript和CSS的首屏内容”,因为正在加载Google字体。 Google Insights中的所有建议似乎都不适用于此上下文:内联css,使用媒体查询等。我甚至尝试与WebFontLoader异步加载网络字体,但它仍然被Insights捕获。

我认为应该有一个简单的修复,而不会做愚蠢的事情,例如:设置加载字体的超时(用于记录种类的工作;-))。

更新

使用Webpack打包Web字体显然也有效,但我不确定这是“正确”的解决方案。

1 个答案:

答案 0 :(得分:0)

我解决此“渲染阻止”通知的方法是使用javascript / jquery加载google字体网址。

例如设置:

$('head').append("<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>);

到.js文件中,您将加载为

<script src="your.js" async></script>