开源GitHub地址:https://github.com/sitespeedio/sitespeed.io
安装
终端使用npm安装
代码语言:javascript复制$ npm i -g sitespeed.io && sitespeed.io https://www.sitespeed.io/
安装失败问题解决
果不其然,逢安装必报错:
代码语言:javascript复制AttributeError: 'NoneType' object has no attribute 'groups'
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:336:16)
gyp ERR! stack at emitTwo (events.js:126:13)
gyp ERR! stack at ChildProcess.emit (events.js:214:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Darwin 18.0.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /usr/local/lib/node_modules/sitespeed.io/node_modules/sse4_crc32
gyp ERR! node -v v8.11.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
1、Google发现了N多结果,发现我不是一个人,大家统一的说法:更新node版本
2、因为使用的nvm版本管理,配置大于v8.11.1
版本
nvm use v10.11.0
3、重新install,尴尬的事儿出现了,仍然报错 一看,发现报错中的仍然显示:
代码语言:javascript复制gyp ERR! node -v v8.11.1
gyp ERR! node-gyp -v v3.6.2
4、仔细一想,这只能是跟nvm有关了。查看nvm命令,发现有这样一条命令
nvm alias default 0.10.32 Set default node version on a shell
看着这么可疑,那就试试(设置默认node版本)
nvm alias default 10.11.0
5、神奇的事儿发生了,修改npm版本后安装成功了
基本使用
满心欢喜的以为能用了吧,果然天真了
代码语言:javascript复制$ sitespeed.io --browsertime.connectivity.engine throttle -c cable https://www.sitespeed.io/
/usr/local/lib/node_modules/sitespeed.io/node_modules/bindings/bindings.js:121
throw e;
^
Error: The module '/usr/local/lib/node_modules/sitespeed.io/node_modules/sharp/build/Release/sharp.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 57. This version of Node.js requires
NODE_MODULE_VERSION 64. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
at Object.Module._extensions..node (internal/modules/cjs/loader.js:718:18)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at bindings (/usr/local/lib/node_modules/sitespeed.io/node_modules/bindings/bindings.js:112:48)
at Object.<anonymous> (/usr/local/lib/node_modules/sitespeed.io/node_modules/sharp/lib/constructor.js:10:34)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/usr/local/lib/node_modules/sitespeed.io/node_modules/sharp/lib/index.js:3:15)
报错信息里,果然又是node版本搞得鬼
代码语言:javascript复制NODE_MODULE_VERSION 57
NODE_MODULE_VERSION 64
查了下:https://nodejs.org/en/download/releases/
NODE_MODULE_VERSION 57
,对应的npm版本6(最高对应至npm v6.4.1,node版本是:Node.js 10.2.1
)
NODE_MODULE_VERSION 64
,对应的node版本10(最高对应值npm版本v6.4.1,node版本是:Node.js 8.16.0
)
仔细回想一下,最初安装时使用的npm版本是Node.js 版本为8.1.1(57),虽然切换nvm版本后重新下载了,但应该是没有卸载干净
6、卸载
(1)npm uninstall -g sitespeed.io
(2)删除模板包
/usr/local/lib/node_modules/sitespeed.io
/Users/wangpingyang/node_modules/sitespeed.io
(3)确认默认node版本
nvm alias default 10.11.0
(4)重新安装
npm install sitespeed.io -g
7、开始使用
sitespeed.io https://www.sitespeed.io/
终于可以正常使用
8、测试结果报告样式
测试结果部分参数解释
1、Summary页面
Overall score:
Coach的平均综合表现,可访问性和最佳实践得分。
Total size(transfer):
传输总页面大小。
Image size(transfer):
传输总图片大小。
CSS size(transfer):
传输总CSS大小。
Total requests:
总请求个数。
Image requests:
页面上的图像请求数。
CSS requests:
页面上的CSS请求数。
Cache time:
缓存时间。
Time since last modification:
据上次修改间隔时间。
Page Load Time:
页面加载时间。
2、Detail Summary页面:包含最小、最大、平均、90%的请求时间
200 responses:
接口返回状态为200的个数
First Paint:
首次出现画布时间
ackEndTime:
网络和服务器生成并开始发送HTML所需的时间。使用Navigation Timing API收集定义:responseStart - navigationStart
domContentLoadedTime:
浏览器解析文档并执行延迟和解析器插入脚本所花费的时间,包括从用户位置到服务器的网络时间。使用Navigation Timing API收集定义:domContentLoadedEventStart - navigationStart
frontEndTime:
浏览器解析和创建页面所需的时间。使用Navigation Timing API收集定义:loadEventStart - responseEnd
pageDownloadTime:
下载页面需要多长时间(HTML)。使用Navigation Timing API收集定义:responseEnd - responseStart
serverConnectionTime:
连接服务器需要多长时间。使用Navigation Timing API收集定义:connectEnd - connectStart
serverResponseTime:
服务器发送响应所需的时间。使用Navigation Timing API收集定义:responseEnd - requestStart
3、Toplist (1)占比较大的JavaScript files; (2)占比较大的图片文件 (3)时间较长的请求返回时间。 备注:点击具体链接按钮进入详细信息页面
4、Assets 资源文件