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仅适用于网页above-the-fold部分内的元素。

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

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

这个CSS如何阻止？

1 个答案: