什么是 Critical CSS
Critical CSS，又称为 Above-The-Fold CSS，是指用于页面加载之前最需要的 CSS，它可以帮助网站实现更快的页面加载速度，从而提高用户体验，减少跳失率。它是在 Web 开发和优化中非常重要的概念之一。
介绍 npm 包 chrome-critical-css
chrome-critical-css 是一个 Node.js 模块，它可以通过 Google Chrome 浏览器生成 Critical CSS，使用方便，可以轻松地集成到 Vue.js、React.js 或任何其他 Node.js 项目中。chrome-critical-css 将关键 CSS 从完整的 CSS 文件中提取出来，以减轻页面负载。
安装与使用
在使用 chrome-critical-css 之前，必须确保您的计算机上安装了 Node.js 和 Google Chrome 浏览器。如果您还没有安装它们，请立即下载并安装。
- 安装 npm 包 chrome-critical-css：
npm install chrome-critical-css --save-dev
现在可以使用 chrome-critical-css 模块来生成 Critical CSS。
-- -------------------- ---- ------- --- ------ - ------------------------------- -------- ------ --------------------- -- --- ----- ------ ------------------------- -- ---- -------- --- --- --- -------- ----- -- ----- --------- --- -- ----- -- ------------- ----- - -------------------- ---
生成的 Critical CSS 数据将能在回调函数内使用，我们可以在回调函数中将其写入一个本地文件：
-- -------------------- ---- ------- --- ------ - ------------------------------- --- -- - -------------- -------- ------ --------------------- ------ ------------------------- -------- ----- --------- --- -- ------------- ----- - -------------------------------------- ----- ------------- - ----------- - ----------------------- ----- ------------------------- --- ------------- ----- ---
接下来，只需在我们的网页中将生成的 Critical CSS 文件用 link 标签链接进去即可：
<link rel="stylesheet" href="path/to/critical.css">
最佳实践
使用 chrome-critical-css 可以轻松地获取网站的 Critical CSS，但请注意以下最佳实践：
- 仅包含当前页面所需的 CSS。不要将整个样式表嵌入到每个页面中。
- 对图片和 JavaScript 多使用延迟加载。
- 尽可能合并和最小化文件。确保每个文件使用压缩的版本。
- 通过使用框架和库尽可能减少脚本加载。
- 使用多个域名来提供资产是一个很好的做法，这样浏览器将同时下载文件，可加快页面加载速度。
总结
使用 chrome-critical-css 可以轻松地获得 Critical CSS，并加快页面的加载速度，提高用户体验。它是一个非常有用的 npm 包，您应该在您的项目中使用。此外，您也应该注意最佳实践，并且总是尝试使用最新的 Web 开发技术来提高您网站的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b181e8991b448e2f12