3

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

在分析网站后，谷歌会根据这些准则给我一个分数或排名。

使我的分数保持低的一项准则是以下准则：

消除首屏内容中的渲染阻塞 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 仍然抱怨它被渲染阻塞。

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

4

1 回答 1

1

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

确保您加载的 CSShead仅适用于网页首屏部分中的元素。

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

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

于 2015-11-27T14:05:34.203 回答