关键 CSS 提取

关键渲染路径优化：提取首屏必需 CSS，内联到 HTML，其余 CSS 异步加载。

问题背景

HTML

<!-- 传统方式阻塞渲染 -->
<link rel="stylesheet" href="app.css">  <!-- 阻塞渲染直到加载完成 -->

大 CSS 文件会阻塞首屏渲染，用户看到白屏。

优化方案

步骤一：提取关键 CSS

识别首屏可见内容所需的样式。

HTML

<!DOCTYPE html>
<html>
<head>
  <!-- 内联关键 CSS -->
  <style>
    /* 首屏必需样式 */
    .header { height: 60px; background: #fff; }
    .hero { min-height: 400px; }
    .nav { display: flex; }
    /* 仅包含首屏可见元素 */
  </style>
</head>

步骤二：异步加载非关键 CSS

HTML

<!-- 方式一：preload + onload 切换 -->
<link rel="preload" href="app.css" as="style" onload="this.rel='stylesheet'">

<!-- 方式二：media 属性欺骗 -->
<link rel="stylesheet" href="app.css" media="print" onload="this.media='all'">

<!-- 方式三：动态加载 -->
<script>
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'app.css';
  document.head.appendChild(link);
</script>

工具实现

Critical

Bash

npm install -g critical

# 提取关键 CSS
critical src/index.html --base src/ --inline > dist/index.html

PurgeCSS（按需剔除）

JavaScript

// purgecss.config.js
module.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/**/*.css'],
  output: './dist/css/'
};

Webpack 插件

JavaScript

// webpack.config.js
const Critters = require('critters-webpack-plugin');

module.exports = {
  plugins: [
    new Critters({
      preload: 'swap',
      pruneSource: false
    })
  ]
};

内联大小控制

内联大小	影响
< 14KB	最佳，TCP 慢启动范围内
14-50KB	可接受，权衡取舍
> 50KB	过大，考虑进一步拆分

关键 CSS 内联大小建议控制在 14KB 以内。

验证效果

Chrome DevTools → Lighthouse：

First Contentful Paint (FCP)
Largest Contentful Paint (LCP)

优化前后对比：

text

优化前 FCP: 2.5s
优化后 FCP: 0.8s

要点总结

提取首屏必需 CSS 内联到 HTML
非关键 CSS 异步加载，避免阻塞渲染
使用 Critical、PurgeCSS 等工具自动化处理
内联 CSS 控制在 14KB 以内最佳
通过 Lighthouse 验证优化效果