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

待我称王封你为后i 2022-11-25 10:15 141阅读 0赞

# 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 并][PageSpeed Insights]分析您的网页之一，您可能会看到有关通过内联关键 CSS 和异步加载渲染阻止样式表来优化 CSS 交付的警告。

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70][]

### 您应该内联关键 CSS 吗？ ###

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

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

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

### 查找关键 CSS ###

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

### 使用grunt ###

如果你熟悉grunt[构建][Link 2]系统，有一个插件，使这个过程更容易 - 流行的[咕咕批评][Link 3]插件。如果您喜欢 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.initConfig``minify``true``src``dest`

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

现在，您可以通过键入控制台来运行插件：`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朗特，实现类似的壮举 -[咕咕][Link 5]批评[和咕咕笔的纸。][Link 6]但是，使用这些插件时，您必须指定从中提取关键 CSS 的样式表。

## ##

### 使用 npm 模块 ###

[关键是][Link 7]由艾迪·奥斯马尼创建的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包的文档找到][npm]。优化网页的标记将类似于咕咕插件的输出。`true``width``height`

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

## ##

### 使用Gulp ###

如果您更乐于使用 Gulp，Addy Osmani 建议 Gulp 用户直接使用关键 npm 模块。他在"关键[GitHub"页面上为][Link 7]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 项目，显示了][Gulp]这一点。

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

# #

## 更多资源 ##

另一个可用的工具[是乔纳斯·奥尔森的][Link 8]"关键路径CSS"生成器。您只需输入页面 URL，然后提供要从中提取关键 CSS 的所有 CSS。单击"创建关键路径 CSS"按钮后将输出您的 CSS。

关于CSS-Tricks的文章概述了如何使用[CSS预处理器来编写关键折叠CSS。][CSS_CSS]此外，SitePoint 还发表了一篇关于优化[关键][Link 9]呈现路径的优秀文章，您可以阅读该文章，以便更深入地了解该主题。

# #

## 结论 ##

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

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

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

[PageSpeed Insights]: http://developers.google.com/speed/pagespeed/insights/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FyaWFfTWlhenp5_size_16_color_FFFFFF_t_70]: /images/20221124/1e0d5bd1d95a41a1b90fb16667612b35.png
[Link 1]: http://calendar.perfplanet.com/2011/why-inlining-everything-is-not-the-answer/
[Link 2]: http://gruntjs.com/
[Link 3]: https://github.com/bezoerb/grunt-critical
[Link 4]: https://github.com/addyosmani/critical#options
[Link 5]: https://github.com/filamentgroup/grunt-criticalcss
[Link 6]: https://github.com/fatso83/grunt-penthouse
[Link 7]: https://github.com/addyosmani/critical
[npm]: https://www.npmjs.com/package/critical
[css]: https://www.npmjs.com/package/critical-css
[Gulp]: https://github.com/addyosmani/critical-path-css-demo
[css 1]: https://www.npmjs.com/package/gulp-critical-css
[Link 8]: https://jonassebastianohlsson.com/criticalpathcssgenerator/
[CSS_CSS]: https://css-tricks.com/authoring-critical-fold-css/
[Link 9]: https://www.sitepoint.com/optimizing-critical-rendering-path/