如何防止 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末尾，就在結束</body>標記之前使用style元素：

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

現在這是有效的 HTML（從 HTML 5.2 的 20170808 草案開始），但我從來沒有遇到過一個瀏覽器會關心它，如果你在body放置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>