CSS性能优化：可以试一试内联CSS？

在互联网的早期，网站主要用于显示基于文本的信息。慢慢地，我们的连接速度得到了提高，用户能够相当快地下载高分辨率图像和视频。现在，网站做的不仅仅是以文本形式提供必要的信息。随着CSS和JavaScript框架、插件的很多等等，网站变得越来越复杂。在播放所有这些操作后，加载所有这些所需的所有文件可能需要一些时间。

更快的网站可以带来更好的用户体验，这可以使一个网站的成功产生巨大的变化。开发人员可以做什么来开始改进性能？开发人员可以做的一件事非常有帮助，就是内联关键CSS和异步加载非关键CSS。在这篇文章中，我们将一个个讨论这些要点，并帮助您提高网站的性能。

什么是关键 CSS？

项目中的关键 CSS 是用于设置网站以上内容样式的 CSS。以上内容是用户首先在您的网站上看到的，其中可以包括导航和其他元素。因此，尽快调整网站的样式和呈现这一部分非常重要。

有一件事，我想在这里提到，你的访问者可能使用无数的设备与不同的视口访问您的网站。因此，上述内容本身不会有太大帮助。要解决此问题，您还应考虑与基本布局和排版相关的任何 CSS 也至关重要。

现代 Web 开发实践通常建议您将关键 CSS 内联。它会被放置在您的网页，像这样：

<!doctype html>
<html><head><title>An Optimized Web Page</title><style type="text/css"> (Your minified critical CSS would be here) </style></head><body>(Your markup)</body>
</html>

为什么内联是必要的？

如果您前往 Google PageSpeed Insights 并分析您的网页之一，您可能会看到有关通过内联关键 CSS 和异步加载渲染阻止样式表来优化 CSS 交付的警告。

浏览器不会呈现网页的上述内容，除非它们已加载所有 CSS 文件。当需要加载大量文件时，这可能是一个大问题。

并非所有用户都有快速的互联网连接，等待库、CSS 和 JavaScript 加载后，他们才能实际访问他们来的内容，这会非常令人沮丧。即使快速互联网的用户在某些情况下也可能会失去连接，例如当他们通过隧道时。此时，如果您的网站已将关键 CSS 中装，并且在显示主要内容之前不加载其他文件，则他们仍然能够访问主要内容。

下图说明了常规网页和优化网页的区别。如您了解，优化版本将允许用户提前 0.5 秒访问内容。当需要加载大量额外的库时，改进将更为明显。

您应该内联关键 CSS 吗？

这取决于情况。如果您没有使用任何繁重的框架或库，并且您自己的 CSS 文件也具有小尺寸，则您可能不需要内联您的 CSS。

如果使用像 Bootstrap 这样的框架，则可能没有使用框架提供的所有功能。在这种情况下，您只需从框架的样式表中提取关键 CSS，然后异步加载实际框架。这将显著提高您的网站速度。

内联时，可以缓存样式表。HTML 通常不缓存（这样做通常不是个好主意！这意味着两者之间偶尔会有区别。更新时请记住这一点！此外，每次用户加载您的网站时，输入的 CSS 都会产生一些额外的页面权重。例如，如果网站的每一页上都有 30kB 的内联 CSS，则单个用户 10 个页面浏览量将花费用户 300kB。这听起来可能没什么大不了的，但数据在世界某些地区（以及一些3G/4G数据计划）非常昂贵。确保您计划内联的CSS对您的网页真正至关重要，并且您并不是内联所有内容。

查找关键 CSS

手动查找关键 CSS 将是一项令人生畏和枯燥的任务。幸运的是，有可用的工具可以帮助您快速完成。

使用grunt

如果你熟悉grunt构建系统，有一个插件，使这个过程更容易 - 流行的咕咕批评插件。如果您喜欢 Gulp 或使用 npm，请参阅以下部分，了解如何使用这些内容执行此过程。

首先，您需要使用以下命令安装插件：

npm install grunt-critical --save-dev

您还需要创建。这将包含所有代码，用于为插件设置各种选项，包括视口维度以及源文件和目标文件的路径。下面是一个示例：Gruntfile.js

module.exports = function(grunt) {grunt.initConfig({critical: {extract: {options: {base: './',width: 1024,height: 768,minify: true},src: 'path/to/initial.html',dest: 'path/to/final.html'}}});grunt.loadNpmTasks('grunt-critical');grunt.registerTask('default', ['critical']);};

在我们的包装函数中，我们使用方法指定所有配置选项。在这种情况下，我指定了一个基本目录，其中要写入源文件和目标文件。我还将选项设置为。这给了我插件提取的关键CSS的最终分明版本。该属性包含要操作的源文件的位置。属性包含需要保存最终输出的位置。grunt.initConfigminifytruesrcdest

如果文件是样式表，则生成的 CSS 将保存到文件以供将来使用。但是，如果属性是标记文件（HTML、PHP 等），则 CSS 是 inlined，现有样式表被包装在 JavaScript 函数中，以便异步加载它们。还为禁用 JavaScript 的用户添加了一个块。还有其他选项可供选择。您可以访问关键文档上的选项的完整列表。destdestnoscript

现在，您可以通过键入控制台来运行插件：grunt

C:\path\to\project>grunt

如果您的初始文件有以下标记：

<!doctype html>
<html><head><title>The Optimizer</title><link rel="stylesheet" href="link/to/stylesheet"></head><body><div>All the markup stuff</div></body>
</html>

现在看起来像：

<!doctype html>
<html><head><title>The Optimizer</title><style type="text/css">Minified Inlined CSS</style><script id="loadcss">JavaScript to load styles asynchronously...</script><noscript><link rel="stylesheet" href="link/to/stylesheet"></noscript></head><body><div>All the markup stuff</div></body>
</html>

正如你所看到的，这个插件做你所有的工作为你。现在，如果您使用 PageSpeed 分析网页，您应该获得更好的分数。以我的情况来说，比分从86改为95。

还有其他的插件可用于G朗特，实现类似的壮举 -咕咕批评和咕咕笔的纸。但是，使用这些插件时，您必须指定从中提取关键 CSS 的样式表。

使用 npm 模块

关键是由艾迪·奥斯马尼创建的npm包，它包含了咕咕关键插件使用的功能。您可以使用 Grunt 使用它来提取和内联关键路径，或使用 JavaScript 和 npm 从网页的折叠 CSS 上方。要安装该包，您需要运行：

npm install critical --save-dev

安装包后，您需要在项目目录中创建一个 JavaScript 文件，并在中放入以下代码。

var critical = require('critical');critical.generate({inline: true,base: 'initial/',src: 'homepage.html',dest: 'final/homepage.html',width: 1366,height: 768
});

您可以指定一组选项来创建优化的网页。将内联设置为将生成包含 CSS 的 HTML 页面，否则将生成 CSS 文件。和选项设置目标视口的尺寸。还有很多其他选项，如小化内联CSS，你可以在关键的npm包的文档找到。优化网页的标记将类似于咕咕插件的输出。truewidthheight

可供您使用的另一个 npm 模块是关键 css模块。此模块从提供的 URL 生成关键 CSS。生成的CSS可以使用回调函数进一步处理，因为咕咕插件基于此包。

使用Gulp

如果您更乐于使用 Gulp，Addy Osmani 建议 Gulp 用户直接使用关键 npm 模块。他在"关键GitHub"页面上为Gulp 用户提供的示例如下所示：

var critical = require('critical').stream;// Generate & Inline Critical-path CSS
gulp.task('critical', function () {return gulp.src('dist/*.html').pipe(critical({base: 'dist/', inline: true, css: ['dist/styles/components.css','dist/styles/main.css']})).pipe(gulp.dest('dist'));
});

关键团队还有一个示例 Gulp 项目，显示了这一点。

还有一个吞咽临界 css 插件来生成关键 CSS。但是，这一个工作通过从您的CSS中提取某些选择器类型，而不是通过检测上面折叠的元素等。

结论

您是否应该内联关键CSS取决于用户的访问模式和网站的结构。如果您的网站是一个寻呼机，并且访问者不会经常访问它，或者如果您有一个包含框架和插件的复杂网站，则内联关键 CSS 可以显著提高性能。

内联的唯一关注是，它每次访问都会增加额外的页面权重。这可以通过使用 Cookie 和仅在第一次访问期间发送关键 CSS 来缓解，同时仍以异步方式加载完整的 CSS 文件，然后进行缓存。这是有点复杂，但你得到两个最好的两个。

您是否尝试过在您自己的项目中内联 CSS？改进显著吗？你给其他开发者提什么建议吗？让我们知道在评论。