自动化网站性能衡量

网站性能可能会对整个用户体验产生巨大影响。如果您最近一直在考虑如何提升自己网站的性能,可能已经听说过 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 构建的任何工具,可能需要注册专用 API 密钥。我们知道,虽然这只需要几分钟的时间,但如果您在常规工作流程中需要获取数据分析,则可能会觉得此操作很麻烦。

我们很高兴地通知您,PageSpeed Insights 服务支持在不使用 API 密钥的情况下发出请求,每 5 秒最多 1 次请求(对于任何人来说都足够了)。对于更常规的使用情形或严肃的正式版 build,您可能需要注册密钥。

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 能帮助您团队改善绩效文化。