网站是开源的,支持开发者下载源文件搭建私人的内部测试站点。开源地址:https://github.com/WPO-Foundation/webpagetest。
打开http://www.webpagetest.org后页面如下,WebpageTest主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四个功能,我们主要关注Advanced Testing。
如何使用
剩下的就是工具自己的事情了,你只需要坐等分析结果。
主要的指标数据
适用对象:访问页面的第一字节时间(后端处理+重定向)
检查内容:目标时间包括DNS寻址时间+建立连接时间(Socket) + SSL认证时间 + 100ms。当超过目标时间每100ms时, 性能评定将降低一个等级
适用对象:同一个域名下多个页面对象使用了同一个连接(Socket)
检查内容:响应头文件包含"Keep-Alive"的指令或者在给定的主机中多个对象中使用同一个连接
适用对象:工具会将MIME 类型为"text/*" 或"*javascript*"的所有对象
检查内容:检查Transfer-encoding来看是否为GZIP,如果不是则结果中会提供说明该文件是压缩过以及提供压缩比率(因此一个文件可以节省30%的大小,通过压缩即产生了源文件70%大小的文件)
适用对象:JPEG图片
检查内容:对比使用photoshop质量选择为50后的文件大小,尺寸超出10%为达标,10%~50%为警告,超出50%为不达标,总体评分为图片重压缩后占原文件的百分比
适用对象:所有JPEG图片
检查内容:检查每个JPEG图片文件并计算分数,分数为图片的压缩比(压缩文件大小/原文件大小)
适用对象: 符合以下的情况的任意的非html对象数据,这个工具会将MIME类型为"text/*","*javascript*"或者"image/*",此类没有明确标明过期时间(0或者-1),cache-controlheader设置为private,non-store 或者non-cachepragma header 设置为no-cache
检查内容:存在一个”Expires“ header(而不是0或者-1),或者设置cache-control: max-age并设置为一个小时或超过一个小时。当过期时间设置小于30天,将评定为警告
适用对象:所有静态的非HTML内容(css, js 以及图片)
检查内容:检查是否托管在一个已知的CDN上(CName映射到一个已知的CDN网络上).超过整体页面80%为静态资源时,则需要考虑使用CDN,将静态资源托管在CDN上,你可以从这里知道当前已知的CDN
用一个例子来看WebPageTest的具体分析数据
使用很简单,数据分析也不需要给出更多说明,大家看着以下截图就都能明白WebPageTest提供的分析内容,对应的一些评级说明在分析结果中链接进去就能看到,这里不做说明了。由于数据过多以下所有截图都是其中部分内容。
不多说了,看图看图看图,图片说明一切,图片带你掌握真知识。
1.设置完毕,点击开始测试
2. 查看分析报告
A. Summary
说明:左上角是你设置的测试信息,右上角是最终的各项分析的评级,提供了原始数据下载,有具体的数据分析,有测试网页的截图以及测试视频回放。各种详细的数据还可以点击链接进去查看。还会提供多次重复测试的结果,可通过重复试验进行对比数据。
B. Details 详细的细节数据
Waterfall View
Connection View
Request Details
Request Headers
提供了所有的请求数据详情,展开即可观看
C. PerformanceReview
提供了一个全优化的检查表Full Optimization Checklist
细节部分
D. ContentBreakdown
按MIME类型分列的内容
E. Domains分析
略…
F. ProcessingBreakdown
G. ScreenShot
略…
H. ImageAnalysis
I. RequestMap
大家看完以上各项数据的截图,想必都能明白WebPageTest提供的功能了,赶快去使用以下吧。
更新注意: 关于测试的视频教程已经做成菜单,点击菜单自动回复相关的下载地址了。
如下图: