自动化网站性能衡量

艾迪·奥斯曼
Addy Osmani

网站性能会对您的整体用户体验产生巨大影响。如果您最近一直在考虑如何改进自己网站的性能,那么您可能听说过 PageSpeed Insights,这是一款用于分析网页并根据移动网站和桌面版网站性能最佳做法提供关于如何提高网页速度的建议。

PageSpeed 的得分取决于多种因素,包括您的脚本的最小化效果、图片优化程度、内容经过 Gzip 压缩、点按目标的大小是否适当以及避免了着陆页重定向。

由于 40% 的用户可能会放弃加载时间超过 3 秒的网页,因此关注网页在用户设备上的加载速度正逐渐成为我们开发工作流程中不可或缺的一部分。

构建流程中的性能指标

尽管手动访问 PageSpeed Insights 来了解您的得分如何,许多开发者一直在询问是否可能在构建流程中获得类似的性能评分。

答案是:当然可以。

介绍 Node 版 PSI

今天,我们非常高兴地推出适用于 Node 的 PSI。这个新模块可与 GulpGrunt 和其他构建系统完美配合使用,并且可以连接到 PageSpeed Insights 服务,并返回网站性能的详细报告。我们来预览一下它启用的报告类型:

效果报告屏幕

以上结果有助于您了解有待改进的类型。例如,如果将内容大小调整为视口大小,该值设为 5.92 意味着“某些”工作仍然可以完成,而 24 值表示最大限度地减少会阻塞渲染的资源,则意味着您需要使用 async 属性延迟加载 JS。

降低使用 PageSpeed Insights 的门槛

如果您以前尝试过使用 PageSpeed Insights API,或尝试使用我们以它为基础构建的任何工具,您可能需要注册一个专用的 API 密钥。我们知道,虽然这只需要几分钟的时间,但您可以在日常工作流程中关闭获取数据分析功能。

我们很高兴地通知您,PageSpeed Insights 服务支持在不使用 API 密钥的情况下最多每 5 秒发出 1 个请求(这对任何人来说都足够了)。为获得更频繁的使用或更严格的生产构建,您可能需要注册密钥。

PSI 模块既支持 nokey 选项(用于在几分钟内完成设置),也支持 key 选项(用于持续时间稍长)。我们记录了有关如何注册 API 密钥的详细信息。

开始使用

您可以通过两种方式将 PSI 集成到工作流中。您可以将其集成到构建流程中,也可以将其作为系统上全局安装的工具运行。

构建流程

在 Grunt 或 Gulp 构建过程中使用 PSI 非常简单。如果您正在处理 Gulp 项目,可以直接安装和使用 PSI。

安装

使用 npm 安装 PSI 并传递 --save-dev 以将其保存到 package.json 文件中。

npm install psi --save-dev

然后,在您的 gulpfile 中为其定义一个 Gulp 任务(我们的 Gulp 示例项目也对此进行了介绍):

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

在上述情况下,您可以使用以下命令运行任务:

gulp psi

如果您使用的是 Grunt,则可以使用 James Cryer 的 grunt-pagespeed,它现在使用 PSI 来生成其报告。

安装

npm install grunt-pagespeed --save-dev

然后在 Gruntfile 中加载任务:

grunt.loadNpmTasks('grunt-pagespeed');

并将其配置为可供使用:

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

然后,您可以使用以下命令运行该任务:

grunt pagespeed

作为全局工具安装

您还可以将 PSI 作为一种全局可用的工具安装到您的系统上。我们同样可以使用 npm 安装该工具:

$ npm install -g psi

通过任何终端窗口,请求针对网站的 PageSpeed Insights 报告(使用 nokey 选项或 API 特定的 key,如下所示):

psi http://www.html5rocks.com --nokey --strategy=mobile

或者,对于具有已注册 API 密钥的对象:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

大功告成!

继续努力,将性能融入您的文化

我们需要开始更多地考虑我们的设计和实现对用户体验的影响。

PSI 等解决方案可以监测您的网站在桌面设备和移动设备上的性能,在常规的部署后工作流中使用时非常有用。

我们非常希望了解您的看法,并希望 PSI 能帮助改善您的团队的性能文化。