Yeoman

用于性能优化的 Grunt 和 Gulp 任务

2014 年 3 月 4 日

性能延迟可能影响用户参与度、体验和收入。幸运的是，Google 的“让网络更快”团队推荐了一套最佳实践规则，用于保持页面精简、快速和流畅。这些规则包括压缩 CSS 和 JavaScript 等资源、优化图像、内联和删除未使用的样式等等。

如果您完全控制您的服务器，则存在一个优秀的PageSpeed模块，用于Apache和Nginx，其中包含许多这些任务的过滤器。但是，如果不是这种情况，或者您觉得该模块不太适合您，则存在许多构建任务，您可以使用这些任务来填补空白并进行更细粒度的控制。

下面列出了 Yeoman 团队在项目中定期使用的Grunt和Gulp任务。我们已尽最大努力使此列表保持重点，并排除了不再提供太多价值的先前建议，但这里有很多内容可以帮助您尽可能地缩小页面及其资源的大小。

注意：Yeoman 的Grunt和Gulp webapp 生成器包含用于优化图像以及连接和压缩 HTML/CSS/JS 的任务。我们认为这提供了一个良好的基线，但本文将介绍更进一步的任务。

压缩和优化图像

现在，平均网页的大小超过1.5MB，其中图像占了很大一部分。我们的目标是尽可能地减小图像大小，以减少用户等待该资源加载的时间。

通过适当的压缩和格式化平衡，可以将图像作为页面的一部分进行交付，同时最大限度地减少加载时间。这对使用有限数据计划或连接速度慢的移动用户来说非常重要。

Grunt

为什么有两个任务？好吧，这里有一个关于这两个任务之间差异的优秀细分。选择最适合您的那个。

Gulp

注意：Etsy 发现，仅在移动设备上添加160KB 的图像到其页面，其跳出率就会增加 12%。如果您无法减少页面中使用的图像数量，至少也要通过优化器运行它们。

为<picture>元素生成响应式图像

如果您有一个响应式网站，该网站在多个设备上具有视觉灵活性，那么您需要制定一项策略来使图像也具有灵活性。

向浏览器提供不必要的超大图像可能会影响渲染和加载性能，但这并不是向浏览器发送大图像时唯一可能受到影响的指标。

这就是我们需要响应式图像的原因之一，并且很高兴看到srcset（希望能够完全实现<picture>）已经在 Chrome Beta 中。

有一些可用的 Grunt 任务可以帮助您在构建过程中生成多分辨率图像。

Grunt

此外，如果您只需要调整大小/规范尺寸很大的图像，可以使用grunt-image-resize。

注意：Tim Kaldec 对响应式图像的研究表明，响应式图像策略可以节省高达 72% 的图像重量。虽然现在采用与规范兼容的跨浏览器响应式图像方法还为时过早，但 BBC 和 Guardian 一直在成功地使用 Imager.js 来实现这一点。

压缩 SVG 图像

使用编辑器创建的 SVG 文件通常包含大量冗余信息（元数据、注释、隐藏元素等）。可以在不影响最终呈现的 SVG 的情况下安全地删除或转换为更简洁的形式。

Grunt

Gulp

生成雪碧图

Grunt

Gulp

将图像转换为 WebP

WebP 是一种最近的图像格式，可为网络上的图像提供无损和有损压缩。与 PNG 相比，WebP 无损图像的大小最多可减少 26%，与 JPEG 相比，WebP 有损图像的大小最多可减少 25-34%。这是一个相当大的节省，并且幸运的是，存在用于将 Grunt 和 Gulp 编码为 WebP 的任务。

Grunt

Gulp

注意：来自 WebPageTest 的测试表明，与 JPEG 相比，WebP 编码的图像由于其较小的文件大小而加载得更快。Chrome 网上应用商店发现，切换到 WebP 使字节平均节省了 30%，每天为其节省了几 TB 的带宽。

构建支持各种浏览器的 SVG 雪碧图

Grunt

Gulp

鉴于它们在移动设备上的糟糕性能，我们认为使用 Data URI 内联图像现在是一种反模式。

压缩 CSS

压缩会消除文件中的不必要空格、换行符、缩进和字符，这些字符在生产环境中通常是不必要的。压缩 HTML、CSS 和 JS 可以提高解析、执行和下载时间。对于 CSS，我们建议

Grunt

Gulp

删除未使用的 CSS

在使用 Bootstrap、Foundation 等 CSS 框架的项目中，您通常不会使用所有可用的样式。与其将完整的框架交付到生产环境，不如使用 UnCSS 删除页面中未使用的样式。一些开发人员发现样式表文件大小节省了高达 85%。

Grunt

Gulp

注意：开发人员经常问的一个问题是，UnCSS 或删除未使用的 CSS 的过程是否也可以与动态注入到页面中的样式一起使用。答案是“是的”。UnCSS 与 PhantomJS 协同工作以实现此目的。开发人员在典型的 Bootstrap 页面上看到了10-120KB之间的节省，并且 UnCSS 也适用于其他框架。

内联 CSS

如果特定页面的外部 CSS 资源很小，则可以将其直接内联到标记中以节省额外的请求。通过这种方式内联小型 CSS 允许浏览器继续渲染页面。

Grunt

Gulp

合并媒体查询

这不是 PageSpeed 建议，但允许您将匹配的媒体查询合并到单个媒体查询定义中。我们发现它对处理预处理器生成的可能使用嵌套媒体查询的 CSS 很有用。

Grunt

Gulp

JavaScript

压缩 JS

Grunt

Gulp

RequireJS（通过 r.js 优化）

Grunt

Gulp

压缩 HTML

Grunt

Gulp

简单的连接

Grunt

Gulp

文件/文件夹的通用压缩

Grunt

Gulp

Zopfli 压缩

Zopfli 压缩算法是一个开源压缩库，它生成的输出通常比 zlib 在最大压缩时小 3-8%。它最适合那些只压缩一次数据然后多次通过网络发送数据的应用程序。

Grunt

Gulp

注意：当 Google Fonts 切换到使用 Zopfli 时，字体平均缩小了约 6%，在某些情况下缩小了高达 15%。根据Ilya Grigorik的说法，对于 Open Sans，它缩小了 10% 以上，从而加快了渲染和加载速度。但是，Zopfli 图像的解码时间可能比 JPG 长，因此在决定是否使用 WebP 时，请衡量对您而言重要的指标。

内联关键路径 CSS

关键路径表示渲染页面中“折叠以上”内容（即用户加载页面时首先看到的内容）所需的代码和资源。PageSpeed 建议内联关键路径 CSS 以提高性能。虽然mod_pagespeed等工具在实现这一点方面非常高效，但使用其他工具优化关键路径则更加困难。

您可能可以使用 PhantomJS 以及来自speedreport的折叠以上脚本，以了解哪些 CSS 位于折叠以上，然后手动对其进行优化。

注意：Paul Kinlan 为估算页面的折叠以上 CSS 编写了一个书签，也值得一试。

资产管道（自动处理所有优化）

在“需要关注的工具”列表中是AssetGraph。

AssetGraph 将项目视为一组图问题，其中节点被视为资产（HTML、CSS、图像、JS），边被视为它们之间的关系（图像标签、锚标签、脚本标签等）。

由于 AssetGraph 可以确定项目资产之间的关系，因此它可以自动执行开发人员可能想要自己实现的许多常见的性能优化。这在较小的项目中特别有效，并且正在努力支持更大的项目。

Grunt

Gulp

Gulp 用户应该直接使用 AssetGraph。

基准测试

以下基准测试任务有助于将其集成到持续集成中。尽管以下内容目前仅适用于 Grunt，但您可以使用gulp-grunt从 Gulp 运行 Grunt 任务。我们建议

  • grunt-pagespeed - 非常适合在 CI 中自动检查您的 PageSpeed 分数。

  • grunt-topcoat-telemetry - 从 Telemetry 获取流畅度、加载时间和其他统计数据作为 CI 的一部分。这可以帮助您设置类似于 TopCoat 使用的性能基准测试仪表板。
  • grunt-wpt - 用于 WebPageTest 分数的 CI
  • grunt-phantomas - 请求、响应的响应时间，首张图像/CSS/JS 加载时间，onDOMReady 等。

框架优化

Grunt

Gulp

Misch

结论

性能延迟可能影响用户参与度、体验和收入。花时间尝试可用的性能优化任务，了解它们可以为您的项目带来哪些实际收益。

更快的体验将使访问您网页的访客感到更满意，更快的网络对所有人都有益。

~ Addy Osmani

感谢 Sindre Sorhus、Pascal Hartig 和 Stephen Sawchuk 的审阅

« 查看更多文章