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的优点是：

理论上，浏览器的预取扫描程序可能会找到style元素并提前开始下载（尽管如果您不是这样的话将JavaScript放在head）和
即使用户禁用了JavaScript，它仍然有效。

或者，您可以将link元素移至body的末尾，但目前该元素无效且scoped属性不存在（{1}}但是？）似乎适用。（为什么要将它应用于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>

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

2 个答案: