如何防止 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 指出的那样，您可以在 body 的末尾使用 style 元素，就在结束 </body> 标记之前：

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

现在这是有效的 HTML（截至 HTML 5.2 的 20170808 草案），但如果您在 style 中放置 style 甚至在它生效之前，我从来没有遇到过关心它的浏览器。

与使用 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>