无论您是使用界面库还是自己设计样式，都会造成大量 CSS 延迟渲染，因为浏览器必须先下载并解析 CSS 文件，然后才能显示网页。
这个响应式冰淇淋图库是使用引导构建的。诸如 Bootstrap 之类的界面库可以加快开发速度，但这通常以代价是臃肿和不必要的 CSS，这会拖慢您的加载时间。引导加载程序 4 为 187 KB，而另一个界面库语义界面在未压缩时大小高达 730 KB。即使经过缩减大小和 gzip 压缩，引导加载程序的大小仍然约为 20 KB，远高于首次往返的 14 KB 阈值。
“关键”是一种用于提取、缩减和内嵌首屏 CSS 的工具。这样一来，即使网页其他部分的 CSS 尚未加载，首屏内容也能尽快呈现。在此 Codelab 中，您将学习如何使用 Indic 的 npm 模块。
测量
- 如需预览网站，请按查看应用，然后按全屏
。
若要在此网站上运行 Lighthouse 审核，请执行以下操作：
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
- 点击 Lighthouse 标签页。
- 点击移动设备。
- 选中效果复选框。
- 取消选中“审核”部分中的其余复选框。
- 点击 Simulated Fast 3G, 4x CPU Slowdown。
- 选中清除存储空间复选框。选择此选项后，Lighthouse 将不会从缓存中加载资源，而是模拟首次访问者在该页面方面的体验。
- 点击运行审核。
当您在计算机上运行审核时，确切的结果可能会有所不同，但在幻灯影片视图中，您会注意到，应用在最终呈现内容之前会显示相当长的空白屏幕。这就是 First Contentful Paint (FCP) 较高的原因，以及总体性能得分不太高的原因。
Lighthouse 可帮助您解决性能问题，因此请在优化建议部分查找解决方案。消除阻塞渲染的资源列为一项优化建议，这正是 FORMAT 的亮点！
优化
- 点击 Remix to Edit 使项目可修改。
为了加快速度，此 Codelab 中已经安装了 Manual，并且添加了一个空的配置文件。
在配置文件 critical.js 中，添加对“关键”的引用，然后调用 critical.generate() 函数。此函数接受包含配置的对象。
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
错误处理并非强制性要求，但这是在控制台中衡量操作成功与否的简单方法。
配置关键值
下表列出了一些有用的“关键”选项。您可以在 GitHub 上查看所有可用的选项。
| 选项 | 类型 | 说明 |
|---|---|---|
base |
字符串 | 文件的基本目录。 |
src |
字符串 | HTML 源文件。 |
dest |
字符串 | 输出文件的目标。如果内嵌 CSS，则输出文件为 HTML。否则，输出为 CSS 文件。 |
width、height |
数字 | 视口宽度和高度（以像素为单位）。 |
dimensions |
array | 包含具有宽度和高度属性的对象。这些对象表示您想要使用首屏 CSS 定位的视口。如果您的 CSS 中有媒体查询，那么您可以生成涵盖多种视口尺寸的重要 CSS。 |
inline |
boolean | 如果设置为 true，则生成的关键 CSS 会内嵌到 HTML 源文件中。 |
minify |
boolean | 如果设置为 true，则“严重”会缩减生成的关键 CSS。在为多种分辨率提取关键 CSS 时，可以省略此参数，因为“重要”会自动缩减大小，以避免重复纳入规则。 |
以下是针对多种分辨率提取关键 CSS 的配置示例。将其添加到 critical.js，或试用并调整选项。
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
在此示例中，index.html 既是源文件又是目标文件，因为 inline 选项设置为 true。“关键”部分首先读取 HTML 源文件，提取关键 CSS，然后使用 <head> 中内嵌的关键 CSS 覆盖 index.html。
dimensions 数组指定了两种视口尺寸：300 x 500（适用于超小屏幕）和 1280 x 720（适用于标准笔记本电脑屏幕）。
省略了 minify 选项，因为当指定了多个视口尺寸时，“关键”会自动缩减提取的 CSS 的大小。
运行关键
为 package.json 中的脚本添加“关键”：
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- 点击终端（注意：如果“终端”按钮未显示，您可能需要使用“全屏”选项）。
如需生成关键 CSS，请在控制台中运行以下命令：
npm run critical
refresh
现在，在 index.html 的 <head> 标记中，生成的关键 CSS 会内嵌在 <style> 标记之间，后跟用于异步加载其余 CSS 内容的脚本。
再次测量
按照此 Codelab 开头的步骤，再次运行 Lighthouse 性能审核。您得到的结果应如下所示：
