用webpagetest.org测试网页性能,最好的前端性能测试分析工具

2018年6月8日08:58:41 1 1,131 阅读

用webpagetest.org测试网页性能,WebPageTest是一个免费的网站性能测试工具, 使用New BSD协议(提供了很大的自由度给开发人员),相对于基于Firefox上Yslow,page speed等网站测速工具,WebPageTest支持IE,Chrome,对于国内大多数只支持IE 的网站,可以优先考虑使用WebPageTest,当然其他工具测试指标会有些不同,这个就按需选择了。

点击“START TEST”,就可以开始测试,测试需要一段时间。

有时候可能还要排队,如下图所示,测试完成后可查看到测试结果。

优化等级分为A~F级别,评分项分别为:

阻塞时间(First Byte Time)、长连接已启动(Keep-alive Enabled)、传输压缩(Compress Transfer)、

压缩图片(Compress Images)、缓存静态内容(Cache Static Content)和使用CDN(Use of CDN)。

用webpagetest.org测试网页性能,最好的前端性能测试分析工具

用webpagetest.org测试网页性能

http://www.webpagetest.org/

WebPageTest是一个免费的网站性能测试工具, 使用New BSD协议(提供了很大的自由度给开发人员),相对于基于Firefox上Yslow,page speed等网站测速工具,WebPageTest支持IE,Chrome,对于国内大多数只支持IE 的网站,可以优先考虑使用WebPageTest,当然其他工具测试指标会有些不同,这个就按需选择了。

该网站从全球不同地点访问网站,是网站测速简单易用的工具,当然也可以下载源文件自行搭建该工具,WebPageTest提供了友好的测试结果报表,包括资源加载瀑布图,网页速度优化检查以及改进的建议。并且针对以下几点做了指标分析:

First byte Time

首字节时间

适用对象 访问页面第一个字节所花费时间 (后台处理 + 重定向时间)
 检查项 目标时间包括DNS寻址时间+建立连接时间(Socket) + SSL认证时间 + 100ms。

当超过目标时间每100ms时, 性能评定将降低一个等级,最好的等级为A,下面截图中可以看到news.163.com 等级评定为F,则比目标时间超出了500ms,当然也可以看细想分析文件。

Keep-Alive

持久连接

适用对象 同一个域名下多个页面对象使用了同一个连接(Socket)
 检查项 响应头文件包含"Keep-Alive"的指令或者在给定的主机中多个对象中使用同一个连接
GZIP text

GZIP压缩

适用对象 MIME 类型为"text/*" 或 "*javascript*"的所有对象
 检查项 检查Transfer-encoding来看是否为GZIP,如果不是则结果中会提供说明该文件是压缩过以及提供压缩比率(因此一个文件可以节省30%的大小,通过压缩即产生了源文件70%大小的文件)
Compress Images

图片压缩

适用对象 JPEG图片
 检查项 对比使用photoshop质量选择为50后的文件大小,尺寸超出10%为达标,10%~50%为警告,超出50%为不达标

总体评分为图片重压缩后占原文件的百分比。

Using progressive

JPEGs

适用对象 所有JPEG图片
 检查项 检查每个JPEG图片文件并计算分数,分数为图片的压缩比(压缩文件大小/原文件大小)
Cache Static

静态缓存

适用对象 符合以下情况的任意的非html对象
MIME类型为 "text/*","*javascript*"或者"image/*",此类没有明确标明过期时间(0或者-1),
cache-control header设置为private,non-store 或者non-cache
pragma header 设置为no-cache
 检查项  存在一个”Expires“ header(而不是0或者-1),或者设置cache-control: max-age并设置为一个小时或超过一个小时。

当过期时间设置小于30天,将评定为警告

Using a CDN

使用CDN

适用对象 所有静态的非HTML内容(css, js 以及图片)
 检查项 检查是否托管在一个已知的CDN上(CName映射到一个已知的CDN网络上).超过整体页面80%为静态资源时,则需要考虑使用CDN,将静态资源托管在CDN上,你可以从这里知道当前已知的CDN

很有意思的事情,看了国内外各新闻网站,CDN使用的评定大部分为X,也就是都用的不好,但是times.com评定很好,有点好奇。

1. Load Time

测量的时间是从初始化请求,到开始执行window.onload事件。

2. First Byte

第一个字节时间(通常缩写为TTFB)被测量为从初始化请求,到服务器响应的第一个字节,被浏览器接收的时间(不包括DNS查询、TCP连接的时间)。

3. Start Render

通过捕获页面加载的视频,并在浏览器第一次显示除空白页之外的其他内容时查看每个帧来衡量的。

4. Speed Index

表示页面呈现用户可见内容的速度(越低越好)。具体可以参考《Speed Index

5. Document Complete Time

和Load Time相同

6. Fully Loaded Time

从初始化请求,到Document Complete后,2秒内(中间几百毫秒轮询)没有网络活动的时间,但这2秒是不包括在测量中的,所以会出现两个差值大于或小于2秒。

7. Requests

浏览器针对页面上的内容(图片,javascript,css等)发出的请求数。

8. Bytes In

浏览器加载页面下载的数据量。它通常也被称为“页面大小”。

9. First View

首次进入页面,无相关资源缓存。

10. Repeat View

再次进入页面,有相关资源缓存

以下为webpagetest的简单的测试结果,测试了http以及https网站:

https://www.ipdrivers.com/mysql-minute-timediff-now.html

为例:

 

用webpagetest.org测试网页性能,最好的前端性能测试分析工具

 

Https网站测试:

看来SSL连接花费的时间还不少:)

后续会继续增加用webpagetest.org测试网页性能,最好的前端性能测试分析工具 各参数设置以及测试比较结果  :) 个别参数还是很好用的,同时也让开发人员更好的人数开发中的各种做法对于性能的影响.

用webpagetest.org测试网页性能,最好的前端性能测试分析工具

      想要进一步优化网站,可以安装ngx_pagespeed模块,仔细请看

如何在Nginx下 配置 ngx_pagespeed

hcyaobin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0   引用   1

    来自外部的引用: 1

    • 近年来全球最优秀的Web性能测试工具 – 文中之舞