发布于 由admin

HTML的Critical CSS：提取首屏关键样式以优化渲染路径的自动化实践

HTML的Critical CSS：提取首屏关键样式以优化渲染路径的自动化实践

大家好，今天我们来聊聊如何利用Critical CSS来优化网页的首屏渲染速度，并探讨如何将其自动化。首屏渲染速度是衡量用户体验的重要指标，直接影响用户对网站的第一印象。而Critical CSS，作为一种有效的优化手段，可以显著提升首屏加载速度。

1. 什么是Critical CSS？

Critical CSS（关键CSS），也称为Above-the-Fold CSS，是指在浏览器首次渲染页面时，为了呈现给用户最快速度的可视化内容，所必须加载的最小化的CSS集合。它包含了渲染首屏内容所需要的样式规则。

传统的CSS加载方式通常是将所有CSS文件通过<link>标签引入，浏览器会阻塞渲染，直到所有CSS文件下载、解析并应用完毕。这会造成明显的延迟，用户会看到白屏，影响体验。

Critical CSS的理念是将关键CSS内联到HTML文档的<head>标签中，这样浏览器可以立即解析并应用这些样式，从而快速渲染首屏内容。而其他的非关键CSS则可以异步加载，例如通过JavaScript加载或使用<link rel="preload">。

2. 为什么要使用Critical CSS？

使用Critical CSS主要有以下几个优点：

  • 提升首屏渲染速度： 减少首次渲染所需的资源，降低渲染阻塞时间。
  • 改善用户体验： 减少白屏时间，让用户更快看到内容，提升用户满意度。
  • 优化性能指标： 优化First Contentful Paint (FCP)、Largest Contentful Paint (LCP)等性能指标。

3. 如何手动提取Critical CSS？

手动提取Critical CSS是一个耗时且容易出错的过程。它需要分析页面的HTML结构和CSS样式，确定哪些样式是首屏渲染所必需的。

以下是一个简单的示例：

假设我们有以下HTML结构：

<!DOCTYPE html>
<html>
<head>
  <title>Critical CSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2023</p>
  </footer>
</body>
</html>

以及以下CSS样式 (style.css)：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: white;
  text-decoration: none;
}

main {
  padding: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 20px;
}

footer {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

手动提取的关键CSS可能如下所示：

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav a {
  color: white;
  text-decoration: none;
}

main {
  padding: 20px;
}

然后将这段CSS内联到HTML的<head>标签中：

<!DOCTYPE html>
<html>
<head>
  <title>Critical CSS Example</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #333;
      color: white;
      padding: 20px;
    }

    header h1 {
      margin: 0;
    }

    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
    }

    nav li {
      margin-right: 20px;
    }

    nav a {
      color: white;
      text-decoration: none;
    }

    main {
      padding: 20px;
    }
  </style>
  <link rel="stylesheet" href="style.css" onload="if(media!='all')media='all'">
  <noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article content...</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2023</p>
  </footer>
</body>
</html>

同时，我们需要异步加载剩余的CSS。 这里使用了 onload 和 noscript 技巧来确保CSS加载。 onload="if(media!='all')media='all'" 确保在CSS加载完成后将其应用，而 noscript 提供回退方案，如果JavaScript不可用，则仍然加载完整的CSS。

显而易见，手动提取的方式效率低下，而且难以维护。特别是对于大型项目，手动提取几乎是不可能的。

4. Critical CSS的自动化工具

为了解决手动提取的难题，出现了许多自动化工具，它们可以自动分析HTML和CSS，提取关键CSS并进行优化。

以下是一些常用的Critical CSS自动化工具：

  • Critical: 一个Node.js模块，用于提取、缩小和内联Critical CSS。
  • Penthouse: 另一个Node.js模块，使用Puppeteer进行渲染，可以处理动态内容。
  • CriticalCSS (grunt/gulp plugin): Grunt和Gulp的插件，方便在构建流程中集成Critical CSS。
  • Online Critical CSS Generators: 许多在线工具可以生成Critical CSS，例如Sitelocity Critical CSS Generator。

我们将重点介绍Critical，因为它使用广泛且易于集成。

5. 使用Critical自动化提取Critical CSS

首先，我们需要安装Critical：

npm install critical --save-dev

然后，我们可以通过命令行或Node.js API使用Critical。

5.1 命令行使用

critical --base . --inline style.css --extract --minify --width 1300 --height 900 --target index.html
  • --base .: 指定基础目录，用于解析相对路径。
  • --inline style.css: 指定要内联到HTML中的CSS文件。
  • --extract: 从HTML中提取CSS规则。
  • --minify: 缩小生成的Critical CSS。
  • --width 1300 --height 900: 指定视口大小，用于模拟浏览器渲染。
  • --target index.html: 指定要处理的HTML文件。

这个命令会将style.css中的Critical CSS提取出来，内联到index.html中，并缩小CSS。

5.2 Node.js API使用

在gulpfile.js中使用Gulp集成Critical：

const gulp = require('gulp');
const critical = require('critical');

gulp.task('critical', () => {
  return critical.generate({
    inline: true,
    base: '.',
    src: 'index.html',
    target: 'index.html',
    minify: true,
    extract: true,
    width: 1300,
    height: 900,
  });
});

gulp.task('default', gulp.series('critical'));

这个Gulp任务会读取index.html，提取Critical CSS，内联到HTML中，并进行缩小。

5.3 代码示例

下面是一个更详细的Node.js 代码示例，展示如何使用Critical API：

const critical = require('critical');
const fs = require('fs').promises;

async function generateCriticalCSS() {
  try {
    const htmlContent = await fs.readFile('index.html', 'utf8');

    const criticalCSSResult = await critical.generate({
      inline: false, // 不内联，而是返回CSS字符串
      base: '.',
      html: htmlContent, // 使用HTML字符串作为输入
      minify: true,
      extract: true,
      width: 1300,
      height: 900,
    });

    const criticalCSS = criticalCSSResult.css; // 获取提取的Critical CSS

    // 将Critical CSS内联到HTML中
    const updatedHtmlContent = htmlContent.replace('<style id="critical-css"></style>', `<style id="critical-css">${criticalCSS}</style>`);

    // 将更新后的HTML写入文件
    await fs.writeFile('index.html', updatedHtmlContent, 'utf8');

    console.log('Critical CSS generated and inlined successfully!');

    // 加载完整 CSS  并且异步加载
    const linkTag = '<link rel="stylesheet" href="style.css" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="style.css"></noscript>';
    const updatedHtmlContentWithAsyncCSS = updatedHtmlContent.replace('</head>', `${linkTag}</head>`);

    await fs.writeFile('index.html', updatedHtmlContentWithAsyncCSS, 'utf8');

    console.log('Full CSS linked asynchronously');

  } catch (error) {
    console.error('Error generating Critical CSS:', error);
  }
}

generateCriticalCSS();

首先，我们读取index.html的内容。然后，使用critical.generate方法提取Critical CSS。这里inline: false 告诉 critical 不要直接内联，而是返回CSS字符串。 我们将HTML内容直接传入 html 选项中，而不是使用 src。提取完成后，我们将Critical CSS内联到HTML的<style id="critical-css"></style>标签中。 为了演示目的，我们假设 HTML 中存在这个空 style 标签，实际项目中可能需要根据情况调整。最后，我们将更新后的HTML写回文件。 接下来，我们添加异步加载完整CSS的逻辑，使用 onload 和 noscript 技巧。

这个示例展示了如何通过Node.js API更灵活地控制Critical CSS的生成和内联过程。

6. Critical CSS的配置选项

Critical提供了许多配置选项，可以根据实际需求进行调整。

以下是一些常用的配置选项：

选项 描述
inline 是否将Critical CSS内联到HTML中。如果为false，则返回CSS字符串。
base 基础目录，用于解析相对路径。
src 要处理的HTML文件路径。
target 输出的HTML文件路径。
html HTML字符串内容，替代src选项。
minify 是否缩小生成的Critical CSS。
extract 是否从HTML中提取CSS规则。
width 视口宽度，用于模拟浏览器渲染。
height 视口高度，用于模拟浏览器渲染。
penthouse 使用Penthouse替代Critical进行CSS提取，可以处理动态内容。
ignore 忽略的CSS选择器或正则表达式。
request 自定义请求选项，用于处理需要认证的页面。
userAgent 自定义User Agent。

7. 最佳实践

  • 选择合适的工具： 根据项目需求选择合适的Critical CSS工具。Critical适用于静态HTML，Penthouse适用于动态内容。
  • 配置视口大小： 设置合适的视口大小，以模拟常见的屏幕尺寸。
  • 忽略非关键样式： 使用ignore选项忽略非关键样式，例如动画、过渡效果等。
  • 定期更新Critical CSS： 随着网站内容的更新，Critical CSS也需要定期更新，以保持最佳性能。
  • 结合其他优化手段： Critical CSS只是优化渲染路径的一种手段，还需要结合其他优化手段，例如代码压缩、图片优化、CDN加速等。
  • 使用 Lighthouse 进行测试： 使用 Chrome Lighthouse 或 PageSpeed Insights 测试你的页面，并根据其提供的建议进行优化。
  • 监控性能指标： 监控 FCP 和 LCP 等关键性能指标，以确保优化效果。

8. Critical CSS的局限性

虽然Critical CSS可以显著提升首屏渲染速度，但它也存在一些局限性：

  • 增加复杂度： 集成Critical CSS会增加构建流程的复杂度。
  • 维护成本： Critical CSS需要定期更新，以适应网站内容的变更。
  • 可能导致FOUC： 如果非关键CSS加载缓慢，可能会导致FOUC（Flash of Unstyled Content），即页面先显示未样式化的内容，然后突然应用样式。可以通过预加载非关键CSS来缓解这个问题。
  • 并非银弹： Critical CSS 只是优化前端性能的一种方式，不能解决所有性能问题。

9. 总结：关键CSS，优化首屏，自动化实践

今天我们深入探讨了Critical CSS的概念、优点、实现方法以及自动化工具。我们学习了如何使用Critical这个Node.js模块来自动提取和内联关键CSS，并了解了它的配置选项和最佳实践。希望通过今天的学习，大家能够掌握Critical CSS的原理和实践，并将其应用到自己的项目中，提升网站的首屏渲染速度，改善用户体验。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注