/ 月溅星河长路漫漫 / 前端性能测试工具介绍

前端性能测试工具介绍

2016-11-07 posted in [How To Do]

本文重点讲解WebPagetest的使用方法,其它工具略提一二。

测试网站以国内最大的跨境电商平台shein为例。

1. 雅虎Yslow

下载地址:雅虎Yslow,选择对应的浏览器下载安装插件使用。重启浏览器,按F12,在Firebug中可以看到安装好的Yslow,点击Run Test,可以得到分析后的结果。

2. 谷歌page speed

下载地址:谷歌pageSpeedNot recomended

前面的一篇文章Chrome WebInspector对网页前端性能的简单的分析也对Chorme自带的分析工具的使用进行了简单的介绍,有兴趣的同学可以看看。

3. showslow

测试地址:showslow,在线测试web应用。

4. HttpWatch和DynaTrace’s Ajax

据说还有这两个测试工具,不过我不熟,有机会找来试试。

5. WebPagetest

测试地址:WebPagetest,在线测试web应用。

直接输入需要测试的网页,点击run test,等待一段时间后,就能得到测试结果。

下面是测试结果中一些不是很好理解的词汇进行了说明:

First View: 第一次无缓存打开页面

This is the view of the page for someone who has never been to the Lonely Planet site before (or has cleared their cache since their last visit).

Repeat View:只访问过一次的页面,重新再打开该页面

This is the view of a page if a user goes only to the page, closes their browser,and then reopens the browser and goes only to that page again as the first page they hit on the site.

Flow View:之前至少访问过一次其它页面

This is the view of the page when a customer has previously visited at least one other Lonely Planet page.

3.1. 测试结果分析

我们直接来看web page test给出的性能测试结果,因截图较长,放在文末。

截图中,右上角是页面速率指标,使用的是Yslow的字母分级格式。可以看到第五项Cache static content给出了很低的F级,在下方的清单列表中也给出了一系列的红X,表示这一块做得并不好。

继续往下看测试结果,在Detail部分,则指出了不同的速率指标的合格度,并详细地指出了所有可以改进的地方。截图中用红框框住的部分是特别需要进行优化的地方。非常的详细,对于网站开发人员来说,是非常有用的。

3.2. 针对性的优化手段

Use Progressive JPEGs

使用递增式编码来存储JPEG文件的好处可以从两个角度来说明:

压缩工具
设置缓存过期头

3.3. shein.com测试结果

shein测试结果