webpagetest

[编辑]

0
0
webpagetest是一款前端性能分析工具。

如何使用

填写需要测试的URL

填写Test Location,下拉选择即可,可选移动端设备(包括Android、IOS),可选PC端(分地区,每个地区可支持的浏览器不同)

可选支持的浏览器

点击右侧START TEST

剩下的就是工具自己的事情了,你只需要坐等分析结果。

主要的指标数据

First Byte Time

适用对象:访问页面的第一字节时间(后端处理+重定向)

检查内容:目标时间包括DNS寻址时间+建立连接时间(Socket) + SSL认证时间 + 100ms。当超过目标时间每100ms时, 性能评定将降低一个等级

Keep-Alive

适用对象:同一个域名下多个页面对象使用了同一个连接(Socket)

检查内容:响应头文件包含"Keep-Alive"的指令或者在给定的主机中多个对象中使用同一个连接

GZIP Text

适用对象:工具会将MIME 类型为"text/*" 或"*java*"的所有对象

检查内容:检查Transfer-encoding来看是否为GZIP,如果不是则结果中会提供说明该文件是压缩过以及提供压缩比率(因此一个文件可以节省30%的大小,通过压缩即产生了源文件70%大小的文件)

Compress Images

适用对象:JPEG图片

检查内容:对比使用photoshop质量选择为50后的文件大小,尺寸超出10%为达标,10%~50%为警告,超出50%为不达标,总体评分为图片重压缩后占原文件的百分比

Use Progressive JPEGs

适用对象:所有JPEG图片

检查内容:检查每个JPEG图片文件并计算分数,分数为图片的压缩比(压缩文件大小/原文件大小)

Cache Static

适用对象: 符合以下的情况的任意的非html对象数据,这个工具会将MIME类型为"text/*","*java*"或者"image/*",此类没有明确标明过期时间(0或者-1),cache-controlheader设置为private,non-store 或者non-cachepragma header 设置为no-cache

检查内容:存在一个”Expires“ header(而不是0或者-1),或者设置cache-control: max-age并设置为一个小时或超过一个小时。当过期时间设置小于30天,将评定为警告

Use A CDN

适用对象:所有静态的非HTML内容(css, js 以及图片)

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

参考资料

0
收藏0

免责声明:词条为作者独立观点,不代表跨境知道立场。如有侵权,请联系我们。分享至

词条信息

创作者:跨境知道

编辑次数:1

词条浏览:272

最近更新者:跨境知道(2022-09-23)