为Google Insights加载Google字体的非阻塞方式

Question

我正在尝试传递Google页面速​​度方面的见解，但由于“正在加载Google字体”，因此无法“消除在首屏内容中出现渲染阻止的JavaScript和CSS”。 Google Insights的建议似乎都不适用于这种情况：内联css，使用媒体查询等。我什至尝试使用WebFontLoader异步加载Web字体，但仍然被Insights抓住。

我想应该有一个彻底的简单修复方法，而不要做愚蠢的细化操作，例如设置超时以加载字体（对于记录类作品；-）。

更新

使用Webpack打包Web字体显然也可以，但是我不确定这是否是正确的解决方案。

Answer 1

我解决此“渲染阻止”通知的方法是使用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>