文档中心 >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