这个CSS渲染阻塞是怎么回事

How is this CSS render blocking?

本文关键字：怎么回事 CSS 这个      更新时间：2023-09-26

我正在尽我所能遵循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);

然而，谷歌页面速度仍然抱怨它是渲染阻塞。

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

关键部分是"折叠内容上方。"

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

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

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

相关文章：