CSS `Critical CSS` (关键CSS) 提取与内联：优化首屏渲染时间 (FCP) - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，早上好！今天咱来聊聊让网页嗖嗖快的秘密武器：Critical CSS（关键CSS）的提取与内联。这玩意儿能帮你优化首屏渲染时间（FCP），让用户更快看到你的网站，而不是对着白花花的屏幕发呆。

啥是首屏渲染时间（FCP）？

想象一下，你去饭馆吃饭，服务员慢吞吞半天不上菜，你饿得前胸贴后背，是不是想掀桌子？首屏渲染时间就是这个“上菜时间”，指的是浏览器从请求页面到首次在屏幕上渲染内容的时间。时间越短，用户体验越好，你的网站就越受欢迎。

为啥要优化首屏渲染时间？

原因很简单，用户没耐心！如果你的网站半天打不开，用户会毫不犹豫地关掉走人。优化首屏渲染时间可以：

提升用户体验： 用户更快看到内容，感觉你的网站速度很快。
提高搜索引擎排名： 谷歌很重视网站速度，速度快的网站排名更高。
降低跳出率： 用户更快看到内容，留在网站上的时间更长。
提高转化率： 用户体验好，更愿意购买你的产品或服务。

CSS 为啥会影响首屏渲染时间？

浏览器在渲染网页时，需要先下载、解析 CSS 文件，然后才能应用样式。如果 CSS 文件太大，下载和解析时间就会很长，导致首屏渲染时间变慢。

Critical CSS：英雄登场！

Critical CSS，顾名思义，就是“关键的”CSS。它指的是渲染首屏内容所需的最小 CSS 集合。换句话说，就是让用户第一眼看到的内容所需要的 CSS。

Critical CSS 的作用：

减少阻塞渲染： 将关键 CSS 内联到 HTML 中，浏览器可以直接使用，无需等待外部 CSS 文件下载和解析。
更快地渲染首屏： 用户更快看到内容，提升体验。

提取与内联 Critical CSS 的步骤：

分析页面结构： 确定哪些内容是首屏内容。
提取关键 CSS： 从你的 CSS 文件中提取出渲染首屏内容所需的 CSS。
内联关键 CSS： 将提取出的 CSS 直接嵌入到 HTML 的 <head> 标签中。
异步加载剩余 CSS： 使用非阻塞的方式加载剩余的 CSS 文件，比如使用 rel="preload" 或 JavaScript。

提取 Critical CSS 的方法：

提取 Critical CSS 的方法有很多，手工提取虽然可行，但是效率太低。推荐使用自动化工具。

在线工具：
- Critical CSS Generator: https://criticalcss.com/ (举例，可能需要付费)
- Sitelocity Critical CSS Generator: https://www.sitelocity.com/critical-path-css-generator (举例，可能需要付费)
这些工具可以直接输入网址，它们会自动分析页面，提取关键 CSS。但是，这些工具通常需要付费，而且可能无法处理复杂的页面结构。

Node.js 库：

critical: 这是一个非常流行的 Node.js 库，可以自动提取关键 CSS。

安装：

npm install critical --save-dev

使用示例：

const critical = require('critical');

critical.generate({
  inline: false, // 不要内联 CSS，而是生成一个单独的文件
  src: 'index.html', // 你的 HTML 文件
  target: 'critical.css', // 输出文件
  minify: true, // 压缩 CSS
  extract: false, // 提取 CSS
  width: 1300, // 视口宽度
  height: 900, // 视口高度
}).then(output => {
  console.log(output.css); // 提取的 CSS 内容
}).catch(err => {
  console.error(err);
});

这个例子会从 index.html 文件中提取关键 CSS，并保存到 critical.css 文件中。你可以根据需要调整配置选项。

penthouse: 另一个强大的 Node.js 库，用于生成关键 CSS。

安装：

npm install penthouse --save-dev

使用示例：

const penthouse = require('penthouse');

penthouse({
  url: 'http://localhost:3000/', // 你的网站 URL
  css: 'public/style.css', // 你的 CSS 文件
  output: 'public/critical.css', // 输出文件
  width: 1300,
  height: 900,
}).then(criticalCSS => {
  console.log('Critical CSS generated!');
}).catch(err => {
  console.error(err);
});

这个例子会从指定的 URL 和 CSS 文件中生成关键 CSS，并保存到 public/critical.css 文件中。

webpack 插件：

critical-css-webpack-plugin: 这是一个 webpack 插件，可以在构建过程中自动提取关键 CSS。

安装：

npm install critical-css-webpack-plugin --save-dev

webpack 配置示例：

const CriticalCssWebpackPlugin = require('critical-css-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CriticalCssWebpackPlugin({
      base: './dist/',
      inline: false, // 不要内联 CSS，而是生成一个单独的文件
      src: 'index.html',
      dest: 'critical.css',
      minify: true,
      extract: false,
      width: 1300,
      height: 900,
    })
  ]
};

这个插件会在构建过程中自动提取关键 CSS，并保存到指定的文件中。

内联 Critical CSS 的方法：

提取到关键 CSS 后，需要将其内联到 HTML 中。

手动内联： 将提取到的 CSS 代码复制粘贴到 HTML 文件的 <head> 标签中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    /* 关键 CSS 代码 */
    body {
      font-family: sans-serif;
      margin: 0;
    }
    h1 {
      font-size: 2em;
      text-align: center;
    }
  </style>
  <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is some content.</p>
</body>
</html>

这种方法简单粗暴，但是容易出错，而且每次修改 CSS 都需要手动更新 HTML。

使用模板引擎： 如果你使用模板引擎（比如 Jinja2、EJS、Handlebars），可以使用模板引擎的特性来内联 CSS。

例如，使用 Jinja2：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <style>
    {{ critical_css }}
  </style>
  <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is some content.</p>
</body>
</html>

在 Python 代码中，将提取到的 CSS 赋值给 critical_css 变量，然后传递给模板引擎。

使用构建工具： 很多构建工具（比如 webpack、Gulp）都提供了插件，可以自动内联 CSS。

例如，使用 html-webpack-plugin 和 critical-css-webpack-plugin：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CriticalCssWebpackPlugin = require('critical-css-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html'
    }),
    new CriticalCssWebpackPlugin({
      base: './dist/',
      inline: true, // 内联 CSS
      src: 'index.html',
      dest: 'index.html',
      minify: true,
      extract: false,
      width: 1300,
      height: 900,
    })
  ]
};

这个配置会自动将关键 CSS 内联到 HTML 文件中。

异步加载剩余 CSS：

内联关键 CSS 后，还需要异步加载剩余的 CSS 文件，避免阻塞渲染。可以使用以下方法：

rel="preload"：
```
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>
```
rel="preload" 告诉浏览器提前加载 CSS 文件，as="style" 指定加载的资源类型为 CSS。onload 事件处理程序在 CSS 文件加载完成后将 rel 属性改为 stylesheet，应用样式。noscript 标签用于在 JavaScript 被禁用时加载 CSS。

JavaScript：

function loadCSS(url, callback) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  link.onload = callback;
  document.head.appendChild(link);
}

loadCSS('style.css', function() {
  console.log('CSS loaded!');
});

这段代码使用 JavaScript 创建一个 <link> 标签，并将其添加到 <head> 标签中。onload 事件处理程序在 CSS 文件加载完成后执行回调函数。

Critical CSS 的最佳实践：

定期更新 Critical CSS： 随着网站内容的更新，Critical CSS 也需要定期更新，以确保首屏内容始终得到最佳的渲染效果。
测试不同设备和浏览器： 在不同的设备和浏览器上测试 Critical CSS 的效果，确保在各种环境下都能正常工作。
使用 CDN 加速 CSS 文件： 将 CSS 文件放在 CDN 上，可以加快文件的下载速度，提升首屏渲染时间。
压缩 CSS 文件： 压缩 CSS 文件可以减少文件大小，加快下载速度。
避免使用 @import： @import 会阻塞 CSS 文件的下载，影响首屏渲染时间。尽量避免使用 @import。
考虑使用 HTTP/2： HTTP/2 协议支持多路复用，可以同时下载多个文件，减少延迟，提升性能。

总结：

Critical CSS 是一种有效的优化首屏渲染时间的技术。通过提取和内联关键 CSS，可以减少阻塞渲染，更快地渲染首屏内容，提升用户体验。虽然提取和内联 Critical CSS 比较麻烦，但是带来的收益是巨大的。希望今天的讲座能帮助你更好地理解和应用 Critical CSS。

表格总结:

优化方法	优点	缺点	适用场景
Critical CSS	加快首屏渲染，提升用户体验，SEO优化	实现复杂，需要定期维护，可能增加构建复杂度	所有网站，尤其是内容丰富、样式复杂的网站
压缩 CSS/JS	减少文件大小，加快加载速度	需要额外的构建步骤	所有网站
使用 CDN	加快资源加载速度，减轻服务器压力	需要额外费用，可能存在 CDN 故障的风险	所有网站，尤其是用户分布在全球各地的网站
懒加载图片/视频	减少初始加载资源，提升首屏渲染速度	用户需要滚动才能看到内容，可能会影响用户体验	图片/视频较多的网站
浏览器缓存	减少重复加载，提升用户体验	需要配置，可能存在缓存失效的问题	所有网站
代码分割 (JS)	减少初始加载的 JS 文件大小，提升首屏渲染速度	需要重新组织代码，增加维护复杂度	大型单页应用 (SPA)
HTTP/2 多路复用	并行加载资源，减少延迟，提升性能	需要服务器和浏览器支持	所有网站

好了，今天的讲座就到这里。感谢大家的观看！希望大家以后都能做出嗖嗖快的网站！如果有什么问题，欢迎留言讨论。咱们下期再见！

发表回复 取消回复

发表回复取消回复