优化 CSS 发送过程

<ph type="x-smartling-placeholder">。 当 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>

这种转变包括确定关键/非关键 CSS， 内嵌关键 CSS 和延迟加载非关键 CSS 可以由 PageSpeed 优化模块，适用于 nginx、apache、IIS、ATS 和 Open Lightspeed， prioritize_critical_css过滤器。

另请参阅 loadCSS 函数以帮助异步加载 CSS， 极高： 用于从网页中提取关键 CSS 的工具。

系统会内嵌用于设置首屏内容样式的关键样式，并立即应用于文档。待系统完成对网页内容的初次绘制之后，整个 small.css 才会开始加载。其样式会在网页完成加载后应用于它，而不会阻止关键内容的初始渲染。

请注意，网络平台很快将支持以不阻止内容呈现的方式加载样式表，而不必借助 HTML Imports 来使用 JavaScript。

请勿内嵌较大数据 URI

在 CSS 文件中内嵌数据 URI 时，请务必小心谨慎。虽然在 CSS 中有选择地使用较小的数据 URI 是合理的做法， 大型数据 URI 可能会导致首屏 CSS 变大，进而拖慢网页呈现速度。

请勿内嵌 CSS 属性

在 HTML 元素中内嵌 CSS 属性 （例如，<p style=...>），因为这通常会导致不必要的代码重复。 此外，使用 内容安全政策 (CSP)。

反馈

此页内容对您有帮助吗？

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">