如何保持CSS不被渲染阻止我的网站？

Question

我正在尝试优化我的移动网页的加载速度，为此我正在使用该网站：

• https://developers.google.com/speed/pagespeed/insights

这个网站评估我的来源并告诉我我可以改进什么。在我的网站上我下载了一个字体：

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

并且显然这阻止了我的页面的渲染。现在，如果这是JavaScript，我可以在标签中使用async字，它可以解决问题，但这不是我正在加载的javascript文件！

反正有没有阻止我的浏览器阻止我的浏览器，并迫使它等待下载？

Answer 1

你可以用JavaScript做到这一点：

<script>
(function() {
    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "//fonts.googleapis.com/css?family=Open+Sans:400,700";
    document.querySelector("head").appendChild(link);
})();
</script>

该字体将在主渲染的带外加载。当然，这意味着当字体完成加载时会有视觉上的变化......如果用户禁用了JavaScript，它将根本不加载字体。

---

或者，正如dandavis指出的那样，你可以在style末尾使用body元素，就在关闭</body>标记之前：

<style>
@import "//fonts.googleapis.com/css?family=Open+Sans:400,700"
</style>

那是现在有效的HTML（截至HTML 5.2的20170808草案），但是如果你把style放在body中甚至在它生效之前，我就永远不会遇到一个关心它的浏览器。

使用JavaScript的优点是：

1. 理论上，浏览器的预取扫描程序可能会找到style元素并提前开始下载（尽管如果将JavaScript放在head中，这并不是特别有可能），
2. 即使用户禁用了JavaScript，它也能正常工作。

或者，您可以将link元素移动到body的末尾，但是目前，这是无效的并且scoped属性（但是？）似乎不适用。 （为什么它适用于style而不是link[rel=stylesheet]？我不知道，也许这只是一个没有到达那里的问题......）

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,700,400italic,700italic']
    }
  });
</script>