优化 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。