javascript - 为 Google Insights 加载谷歌字体的非阻塞方式

标签 javascript html css google-pagespeed

我正在尝试通过 Google 页面速度洞察,但我无法通过“消除首屏内容中阻止呈现的 JavaScript 和 CSS”来实现,因为正在加载 Google 字体。 Google Insights 的所有建议似乎都不适用于这种情况:内联 css、使用媒体查询等。我什至尝试使用 WebFontLoader 异步加载网络字体。但它仍然被 Insights 捕获。

我想应该有一个非常简单的修复而不用做愚蠢的事情,例如设置加载字体的超时时间(用于记录类型的作品 ;-))。

更新

用 Webpack 打包网络字体显然也可行,但我不确定这是“正确”的解决方案。

最佳答案

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

你设置的例子:

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

将其加载为 .js 文件

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

关于javascript - 为 Google Insights 加载谷歌字体的非阻塞方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39347694/

相关文章:

css - 为什么我的 css 更改没有得到反射(reflect)?

javascript - 如何从NodeJS下载Mongodb Collection

javascript - 是否有义务运行 Node 服务器以执行基于 Angular 的应用程序

javascript - Jquery 根据选择值创建输入元素数量

javascript - 如何使整个div可点击

javascript - 使用javascript更改 body 背景图像

css - Sass:对具有特定类的 body 标签使用 Ampersand '&'

Javascript 数组高阶函数

javascript - 如何使用 angularJS 制作虚拟卷轴?

html - 在网页中嵌入 SSRS 报告查看器