使用WebPageTest、Lighthouse和Chrome DevTools评估网站性能

目录

一：使用WebPageTest评估网站性能

二：使用Lighthouse分析性能

1、本地npm安装Lighthouse

2、Chrome DevTools中使用

三：使用Chrome DevTools分析性能

---

一：使用WebPageTest评估网站性能

进入网站首页WebPageTest - Website Performance and Optimization Test，选择Advanced Configuration进行个性化定制

测试结果:

 其中，First Byte表示发出的第一个请求得到的响应所需要的时间；Start Render表示开始渲染的时间；并且此时还需要注意Speed Index的时间

然后我们点进First View中的waterfall查看

 其中，黄色的部分是重定向查找，也是我们后面可以去优化的部分。最下面Long Tasks中红色的表示用户无法进行交互（即阻塞）的部分。

二：使用Lighthouse分析性能

Lighthouse好处在于除了会生成性能报告以外，还有给出针对性的建议

关于Lighthouse的使用，常见的主要有两种方式：

1、本地npm安装Lighthouse

首先进行下全局安装

npm install -g lighthouse

使用非常简单，直接命令行 lighthouse + 测试网址就可以，在这里我们以bilibilli主页为例

lighthouse http://www.bilibili.com

它会自动开启一个chrome窗口进行测试（默认命令是Mobile端），等待片刻，然后我们将结果中的html文件地址拷贝至浏览器打开

 打开后即可看到我们所关心的报告

 其中，Opportunity表示所给出的建议

2、Chrome DevTools中使用

打开谷歌浏览器，在想测试的网站页面打开开发者工具

 根据需要选择合适的选项就可以开始测试了

三：使用Chrome DevTools分析性能

在Network选项卡里每个资源都有一些属性：资源名称、大小、总耗时

 其中，在size这一栏，第一个1.4M代表网络传输资源时的大小，第二个1.4M代表实际资源的大小

这样，我们通过修改代码server.js文件中，添加如下代码就可以实现资源的压缩

const compression = require('compression');
app.use(compression());

 压缩完之后，实际大小虽然是 1.4M，但网络传输时只有 429K，大大减少了网络传输资源的大小

另外在network选项卡也可以自定义设置网络状态

 另一个在Performance选项卡里,点击实心圆开始记录，在这个过程中页面发生的一切包括你的交互，都会被记录下来，直到你点击停止之后，这段过程中发生的一切都会出一个详细的性能报告；还有一种方式是点击刷新按钮，就会刷新我们的页面，记录页面从开始刷新一直到整个所有资源加载完成这个过程所发生的一切，然后进行性能分析

•  Main 主线程，可以看到随着时间推移，主线程都做了哪些任务。它是自上而下类似堆栈结构，每个调用关系都清晰表示出了，比如我们做个 Task，Task 里面会有一些相关的调用，一层层把我们的调用关系都列出来，一直到最后
• Timings 关键事件节点，DCL 就是 DOM 加载完成时间，它发生之前都做了什么