什么是关键CSS？
对CSS文件的请求可以显著增加网页呈现所需的时间。 原因是默认情况下，浏览器将延迟页面呈现，直到它完成加载、解析和执行所有在“页面”中引用的CSS文件。 这样做是因为它需要计算页面的布局。
不幸的是，这意味着如果我们有一个非常大的CSS文件，并且需要一段时间才能完成下载，我们的用户将在浏览器开始呈现页面之前等待整个文件被下载下来。 幸运的是，有一个巧妙的技术，使我们能够优化我们的CSS的传输并减轻阻塞。这种技术被称为优化关键渲染路径。 关键渲染路径表示浏览器呈现页面的所有必须步骤。 我们想要找到最小的阻塞CSS集合 ，或者关键 CSS，以使页面显示给用户。 关键资源是可能阻塞页面首屏呈现的所有资源。 这背后的想法是，网站应该在前几个TCP数据包响应中为用户获取第一个屏幕的内容（或“首屏”内容）。 想要简要了解如何在网页上工作，请查看下面的图片。
理解什么是关键的
关键 CSS是向用户呈现第一屏的内容所需CSS的最少集合。
在上面的示例中，网页的关键部分只是用户在首次加载页面时可以看到的内容。 这意味着我们只需要加载最小量的CSS来渲染页面顶部的内容。 对于CSS的其余部分，我们不需要担心，因为我们可以异步加载它。
我们如何确定关键CSS？ 确定页面的关键CSS是相当复杂的，需要您浏览网页的DOM。 接下来，我们需要确定当前应用于视图中每个元素的样式列表。 手动执行此操作将是一个繁琐的过程，但是一些很棒的工具可以自动执行这个过程。
在本文中，我将向您展示如何使用关键的CSS提高您的网页呈现速度，并介绍一个可以帮助您自动执行此过程的工具。
关键CSS实践
使用关键CSS，我们需要改变我们处理CSS的方式 – 这意味着将其分成两个文件。 对于第一个文件，我们仅提取渲染上述内容所需的最小CSS集，然后将其内联在网页中。 对于第二个文件或非关键的CSS，我们异步加载它，以免阻塞网页。
一开始似乎有点奇怪，但是通过将关键的CSS集成到HTML中，我们可以消除关键路径中的额外的请求。 这使我们能够在一次请求中提供关键的CSS，以尽快向用户展示页面。
下面的代码给出了一个基本的例子。
JavaScript
<!doctype html>
<head>
<style> /* 内联CSS */ </style>
<script> loadCSS('non-critical.css'); </script>
</head>
<body>
…body goes here
</body>
</html>
如上，我们将关键CSS内联在style 标签中。然后,使用 loadCSS(); 异步加载非关键的CSS。 这很重要，因为我们在展示首屏后加载繁重的(非关键) CSS。
起初，这似乎是一场噩梦。 为什么要手动在每个页面内嵌CSS片段？ 但是有一个好消息，这个过程可以自动化，在这个例子中，我将运行一个名为Critical 的工具。 Addy Osmani 创造,它是一个允许您自动提取和内联关键路径CSS到HTML中的的Node.js包。 我将把这个工具和 Grunt 一起介绍, Grunt是一个JavaScript 任务执行器, 自动处理CSS。 如果你之前没听过Grunt, 这个网站有一些非常 详细文档, 以及配置项目的各种解释。
开始
我们先从Node.js控制台开始，并导航到您的网站的路径。 通过在您的控制台中输入以下命令来安装Grunt命令行界面：
npm install -g grunt-cli
这将把grunt命令放在你的系统路径中，允许从任何目录运行它。 接下来，使用以下命令安装Grunt任务运行程序：
npm install grunt --save-dev
然后安装 grunt-critical 插件.
npm install grunt-critical --save-dev
接下来，您需要创建项目任务配置的Gruntfile。 看起来有点像下面的代码。
module.exports = function (grunt) {
grunt.initConfig({
critical: {
dist: {
options: {
base: ‘./’
},
// The source file
src: ‘page.html’,
// The destination file
dest: ‘result.html’
}
}
});
// Load the plugins
grunt.loadNpmTasks(‘grunt-critical’);
// Default tasks.
grunt.registerTask(‘default’, [‘critical’]);
};
在上面的代码中，我配置了 Critical 插件来查看我的page.html文件。 然后它会根据给定的页面处理CSS来计算关键的CSS。 接下来，它将内联关键的CSS并相应地更新HTML页面。