这个CSS如何阻止？

Question

我正在尽力遵循Google PageSpeed指南，了解如何设计我的网站以获得最佳效果。

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

保持我的分数低的一个指导方针如下：

消除上层内容中的渲染阻止JavaScript和CSS。

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

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

我已经做了很多工作来解决这个问题。

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

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

(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);

然而，Googe PageSpeed仍然抱怨它被渲染阻塞。

为什么这样，我该如何解决这个问题？

Answer 1

关键部分是“ 首要内容”。

确保您在head加载的CSS仅适用于网页上方部分内的元素。

例如，这不应该包含任何适用于您的页脚的CSS，这可以使用javascript在后期渲染时加载。

---

但是，您不应该在文档末尾加载所有CSS。 如果在渲染后加载CSS，这会影响已经设置样式的HTML元素，那么它们将不得不重新绘制到页面上，这将降低性能。