这个CSS是如何阻塞渲染的？

Question

我正在尽力遵循Google PageSpeed指南，以便为我的网站设计最佳性能。

分析网站后，Google会根据这些指南给出一个得分或排名。

其中一个使我的得分低的指南是：

消除阻止呈现以上折叠内容的JavaScript和CSS。

您的页面有1个阻止CSS资源。这会延迟页面的呈现。

http://www.my-website.com/bundles/styles/125/core

我已经尽了很大努力来解决这个问题。

这包括将CSS的部分嵌入到HTML本身中（仅需要第一次渲染的部分），并尝试通过内联脚本加载CSS。

我在我的HTML body末尾添加了这段代码：

(function (document) {
    if(!document) return;
    var stylesheet = document.createElement('link');
    stylesheet.href = 'http://www.my-website.com/bundles/styles/125/core';
    stylesheet.rel = 'stylesheet';
    stylesheet.type = 'text/css';
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(stylesheet);
})(document);

然而，Google PageSpeed 仍然抱怨它是渲染阻塞的。为什么会这样，我该如何解决这个问题？

- Matias Cicero

---

请查看以下链接：link - Lorena Pita

Answer 1

重点是“above-the-fold content.”

确保在中加载的CSS仅适用于网页above-the-fold部分中的元素。

例如，这不应包括任何用于页脚的CSS，可以使用javascript在渲染后加载。

---

然而，你不应该把所有的CSS都加载在文档末尾。如果CSS在渲染后加载并影响到已经有样式的HTML元素，那么它们将需要重新绘制到页面上，这会降低性能。

- Curtis