文档中心 >Google PageSpeed

优先主要CSS

概览

在HTML头部内嵌渲染页面需要的CSS样式,延迟加载所有的CSS资源。

说明

通过内嵌页面使用的CSS样式而延缓加载所有CSS资源,这避免了在开始渲染页面时的任何堵塞CSS请求,收集所有CSS标识和在HTML里以相同的顺序展开,使所有样式规则在网页加载后是可用的。

推迟文档没有使用的样式规则,可以延迟下载不需要的字节和允许浏览器更快地开始渲染。

实例

例如,如果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; }

改写后,HTML文档变成这样

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

small.css在网页加载后加载,通过JavsScript插入所有<style><link>元素到HTML文档里,且保留CSS规则顺序。

本页面中的内容已获得知识共享署名3.0许可,并且代码示例已获得Apache 2.0许可;另有说明的情况除外。

文章源地址:https://developers.google.com/speed/pagespeed/service/PrioritizeCriticalCss