优化 CSS 发送过程

̇ 当 PageSpeed Insights 检测到以下情形时,就会触发此规则:网页包含会阻止内容呈现的外部样式表(它们会延迟内容的首次呈现时间)。

概览

浏览器必须先处理当前网页的所有样式和布局信息,然后才能呈现内容。因此,浏览器会阻止呈现网页内容,直到外部样式表已下载完毕并处理完毕(这可能需要进行多次往返,因而可能会导致首次呈现时间延迟)。 要想详细了解关键呈现路径,请参阅呈现树结构、布局和着色;要想获取与如何取消阻止呈现以及优化 CSS 发送过程相关的提示,请参阅会阻止内容呈现的 CSS

建议

如果外部 CSS 资源较小,您可将它们直接插入到 HTML 文档中,这称为“内嵌”。以这种方式内嵌较小的 CSS 文件可让浏览器顺畅无阻地呈现网页。 请注意,如果 CSS 文件较大,完全内嵌 CSS 则可能会导致 PageSpeed Insights 通过优先加载可见内容规则向您发出网页首屏部分体积过大的警告。 如果 CSS 文件较大,您便需要确定和内嵌用于呈现首屏内容的 CSS,并暂缓加载其余样式,直到首屏内容显示出来为止。

内嵌较小 CSS 文件的示例

如果 HTML 文档如下所示:
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
并且 small.css 资源如下所示:
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
您就可以按照如下方式内嵌关键的 CSS:
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

当您启用 prioritize_critical_css 过滤条件后,PageSpeed 优化模块可为 nginx、apache、IIS、ATS 和 Open Lightspeed 自动完成这一转换操作(包括确定关键/非关键 CSS、内嵌关键 CSS 以及延迟加载非关键 CSS)。

另请参阅 loadCSS 函数以帮助异步加载 CSS,该函数可与 Critical(一种用于从网页中提取关键 CSS 的工具)搭配使用。

系统会在网页中内嵌用于设置首屏内容样式的关键样式,并会立即将其应用到文档中。待系统完成对网页内容的初次绘制之后,整个 small.css 才会开始加载。一旦 small.css 加载完毕,系统便会将其样式应用到网页中,因而不会阻止初次呈现关键内容。

请注意,网络平台很快就会支持以不阻止内容呈现的方式加载样式表。届时,您可以使用 HTML Imports,而无需再使用 JavaScript。

请勿内嵌较大数据 URI

在 CSS 文件中内嵌数据 URI 时,请务必慎重。您可选择在 CSS 中使用较小数据 URI,毕竟内嵌较大数据 URI 可能会导致首屏 CSS 变大,进而延缓网页呈现时间。

请勿内嵌 CSS 属性

应尽量避免在 HTML 元素(例如 <p style=...>)中内嵌 CSS 属性,因为这经常会导致不必要的代码重复。 此外,在默认情况下,内容安全政策 (CSP) 会阻止在 HTML 元素中内嵌 CSS。