优化 CSS 发送过程

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

概览

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

建议

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

内嵌较小 CSS 文件的示例
请勿内嵌较大数据 URI
请勿内嵌 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。