无论您是使用界面库还是自行设计样式,交付大量 CSS 都会延迟渲染,因为浏览器必须先下载并解析 CSS 文件,然后才能显示网页。
此自适应冰淇淋图库是使用 Bootstrap 构建的。引导加载程序等界面库可以加快开发速度,但往往是以臃肿和不必要的 CSS 为代价,而 CSS 会拖慢加载时间。引导加载程序 4 的大小为 187 KB,而另一个界面库语义界面在未压缩时的大小高达 730 KB。即使进行缩减和 gzip 压缩,引导加载程序的大小仍然约为 20 KB,远高于首次往返的 14 KB 阈值。
严重工具用于提取、缩减和内嵌首屏 CSS。这样一来,即使页面其他部分的 CSS 尚未加载,首屏内容也能尽快呈现。在此 Codelab 中,您将学习如何使用 Critical 的 npm 模块。
测量
- 如需预览网站,请按查看应用。然后按
全屏
。
如需在此网站上运行 Lighthouse 审查,请执行以下操作:
- 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 点击移动设备。
- 选中性能复选框。
- 清除“审核”部分中的其余复选框。
- 点击 Simulated Fast 3G, 4x CPU Slowdown。
- 选中清除存储空间复选框。选择此选项后,Lighthouse 不会从缓存中加载资源,缓存中会模拟首次访问者对网页的使用体验。
- 点击运行审核。
在计算机上运行审核时,具体结果可能会有所不同,但在幻灯影片视图中,您会发现该应用在最终呈现内容之前显示有相当长的空白屏幕。正因如此,First Contentful Paint (FCP) 表现较高,而总体性能得分却较低。
Lighthouse 可帮助您解决效果问题,因此请在优化部分查找解决方案。可以将消除阻塞渲染的资源列为优化机会,这也是“关键”的优点!
优化
- 点击 Remix to Edit 以使项目可修改。
为了加快速度,Codelab 中已安装 Critical,但此 Codelab 中包含一个空配置文件。
在配置文件 critical.js
中,添加对 Critical 的引用,然后调用 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 |
数组 | 包含具有宽度和高度属性的对象。这些对象表示您要使用首屏 CSS 定位的视口。如果您的 CSS 中有媒体查询,则可以生成涵盖多种视口尺寸的关键 CSS。 |
inline |
布尔值 | 如果设为 true,生成的关键 CSS 将内嵌在 HTML 源文件的 中。 |
minify |
布尔值 | 如果此政策设为 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。“Essential”会先读取 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
<ph type="x-smartling-placeholder">![成功消息“生成了关键 CSS”在控制台中](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/success-message-saying-g-e2359b437448f.png?authuser=5&hl=ro)
现在,在 index.html
的 <head>
标记中,将生成的关键 CSS 内嵌在 <style>
标记之间,后跟一个脚本,用于异步加载其余 CSS。
![带有内嵌关键 CSS 的 index.html](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/indexhtml-inlined-criti-9c5e8661497d1.png?authuser=5&hl=ro)
再次测量
按照此 Codelab 开头部分的步骤再次运行 Lighthouse 性能审核。您得到的结果将如下所示: