文档中心 >Google PageSpeed

优先主要CSS

概览

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

说明

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

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

实例

例如，如果HTML文档是这样的

  1. <html>
  2.   <head>
  3.     <link rel="stylesheet" href="small.css">
  4.   </head>
  5.   <body>
  6.     <div class="blue">
  7.       Hello, world!
  8.     </div>
  9.   </body>
  10. </html>

而small.css的代码如下

  1.   .yellow {background-color: yellow;}
  2.   .blue {color: blue;}
  3.   .big { font-size: 8em; }
  4.   .bold { font-weight: bold; }

改写后，HTML文档变成这样

  1. <html>
  2.   <head>
  3.     <style>
  4.       .blue{color:blue;}
  5.     </style>
  6.     </head>
  7.   <body>
  8.     <div class="blue">
  9.       Hello, world!
  10.     </div>
  11.   </body>
  12. </html>
  13. <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