在这个2 MB的网页时代,性能预算已成为我们Web开发流程中必不可少的部分。 与项目的利益相关者一起工作,为网站性能设定目标已经成为每个人(设计人员和开发人员)的责任。
您可以为许多不同的指标设置预算:例如,目标页面权重为500 KB,项目中的任何页面都不能超过该大小。 需要将要添加到页面中的元素超过500kb的元素与页面上的其他元素进行比较,以确定它们是否包含在设计中。 正如Tim Kadlec所述 ,您的决定必须采用以下三种方法之一:
- 优化页面上的现有功能或资产
- 从页面中删除现有功能或资产
- 不要添加新功能或资产
您还可以根据WebPageTest.org为下载的图像总数(以千字节为单位),每个请求的产品图像数或网站的平均下载时间设置预算 。
不过,一旦设定好预算,这是一项额外的任务,只是衡量整个开发阶段的网站性能。 如何在不增加质量检查流程繁琐的手动测试的情况下实现这一目标? 输入Grunt.js!
Grunt.js + WebPageTest.org =自动化性能测试极乐
尽管有许多Grunt插件可以帮助您衡量网站的性能 ,但我将重点介绍我发现的最准确的插件 : Grunt Perfbudget 。 这个出色的Grunt任务使用WebPageTest.org API根据大量有用的指标(例如页面权重,图像大小,脚本权重和渲染时间)来衡量您的网站。 您还可以为这些指标设置明确的预算,然后插件将根据这些预算来衡量您的网站!
获取API密钥
在设置Grunt任务之前,您需要向WebPageTest.org发送电子邮件,以获取要包含在Gruntfile中的API密钥 。 (好消息:作品中还有此过程的替代方法 !)
安装Grunt Perfbudget插件
如果这是您第一次使用Grunt,请查看有关使用Grunt 入门和运行的教程 。
如果您已经在计算机上安装了 Grunt,则只需安装Perfbudget插件,然后再进行性能测试。 通过命令行导航到您的项目文件夹并运行:
npm install grunt-perfbudget --save-dev
或者,如果您想使用一个示例项目,请派生我的Github存储库, grunt-perfbudget-demo并运行npm install
进行操作。
配置Perfbudget任务
一旦安装了插件,就需要设置插件选项并在Gruntfile.js中创建一个任务。 我已经创建了一个演示Gruntfile ,它作为默认Grunt命令的一部分运行perfbudget任务,只有很少的开始选项–一个要测试的URL和您的API密钥:
module.exports = function(grunt){
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
perfbudget: {
default: {
options: {
url: 'http://cfarman.com',
key: 'APIKEY'
}
}
}
});
grunt.registerTask('default', ['perfbudget']);
};
当我使用API密钥集运行默认的grunt
任务时,会在控制台中获得以下输出:
为什么我的任务失败了? 因为我的网站未通过默认预算:在不到1000毫秒的时间内呈现。 它也因“ SpeedIndex ”指标而失败。 如何查找有关网页性能的更多信息? 幸运的是,WebPageTest有一个我可以引用的非常详细的URL,可以直接从我的Perfbudget测试中的控制台链接!
为了使我的网站通过并且不导致Grunt任务失败(因此在自动构建环境中停止任何网站构建),我有两个选择:我可以编辑预算直到通过(可以用于测试,不需要太多)以获得性能!),也可以遵循我的性能预算规则:优化,删除内容或停止添加内容,直到我通过默认指标为止。 现在,让我们玩一下Grunt任务,看看通过测试的样子。
Perfbudget选项和WebPageTest指标
像大多数Grunt任务一样,Perfbudget任务使我可以自定义一系列选项。 而且由于WebPageTest衡量的指标非常详细,因此我可以为性能预算测试各种指标,以查看是否通过。
首先,我将更改选项,以使我的网站停止失败,并且Grunt任务报告我预算不足。 这在我的预算任务中需要一个名为“预算”的附加属性:
perfbudget: {
default: {
options: {
url: 'http://cfarman.com',
key: 'APIKEY',
budget: {
render: '3000',
SpeedIndex: '5500'
}
}
}
}
我的网站目前很慢,因此为了通过测试,我的价值很高。
结果? 我通过了!
这意味着Grunt任务不会失败,并且如果我的Gruntfile中还有其他任务,它们将照常进行-成功!
除了默认指标外,我们还能衡量什么? 各种东西 ,包括:
- loadTime:总加载时间(以毫秒为单位)
- 请求:请求的文件总数
- bytesIn:页面总权重(以字节为单位)
最后一个指标是我最常报告的指标,并希望出于预算目的进行跟踪,因此让我们看一下如何衡量它:
perfbudget: {
default: {
options: {
url: 'http://cfarman.com',
key: 'APIKEY',
budget: {
render: '3000',
SpeedIndex: '5500',
bytesIn: '2000000'
}
}
}
}
我选择的总字节预算为200万,因为此时的平均页面权重徘徊在2兆字节左右。 编辑预算选项后,可以再次运行grunt
任务来查看操作方法:
我的网站时钟超过3兆字节,超出预算! 看起来我有一些工作要做。 但是,掌握这些信息对于我作为开发人员来说非常有用。 没有其他Grunt插件以这种轻便,易于测试的方式提供有关页面总重量的信息。 衡量这些重要指标可以使我在编写代码时看到开发决策的实际影响,从而帮助我提高性能。
From: https://www.sitepoint.com/automate-performance-testing-grunt-js/