WebPagetest:新手一眼看懂使用教程

1、工具介绍

这是一个非常详细且专业的web页面性能分析工具,而且开源的!如果你打不开其官网,或者担心安全问题,你可以自己拿源码搭建这个平台工具。

性能分析极其详细,包含你所知道的所有新能参数指标,还有一些这个工具自己的指标参数,比如speed index,更能从人的角度看待一个页面体验是否良好。提供了多种主流浏览器的访问性能,提供了全球多个地点的测试性能,还有视频录像功能可以返回体验。这个视频功能极好的用于直观的对比演示。总之,优点非常之多,没有理由不尝试一下。

入口在 这里,长这样,

上面三输入框,,,第一行,输入你的页面url。

第二行,选择你的访问点,比如你想测一下北京的用户访问速度,那么你选择北京。

第三行,选择什么浏览器访问。

右边,点击START TEST,,,,耐心等待。

分析的结果时存下来的,比如,我的三个url分析结果如下,可以反复进入查阅。

页面1:https://test.igame.qq.com/pvp/acts/a201807/herotool.php?op=2,分析结果

页面2:http://134.175.16.24/vuessr/act/act1/index/hero,分析结果

页面3:http://134.175.16.24/newcss/act/act1/index.html/hero,分析结果

2、结果使用和分析

分析完后,结果长这样,

总共跑了三次。每一次都是First View(就是相当于新用户,首次打开页面,没有任何缓存)。

Performance Result 就是指标总览,列举了一些主要的新能指标的平均值。


指标解析: 从输入url按enter开始的,达到下面节点的时间。

▲ Load Time

页面完全加载完时间(不等待图片下载,iframe下载,css更新完),此时,window.onload 事件此时触发。同 Document complete time.

▲ DOM Content Loaded

HTML DOM 骨架完全下载和解析,包括<script>元素。(等待图像下载,css更新,iframe更新等)。此时,DOMContentLoaded 事件触发。(你在预加载数据的时候,可以在这个事件时会更合适些,而不是上面的dom ready)

▲ Time to First Byte

首字节时间。浏览器接收到第一个字节的时间。包括服务器处理以及网络传输,DNS寻址时间+建立连接时间(Socket) + SSL认证时间等。

▲ Start Render

白屏后首次出现内容的时间。

▲ Speed Index

速度指数,页面呈现出来的平均时间。比Start Render更人性化的指标。详细计算方式参考:Speed Index 。主要

▲ Time to Interactive

首次可交互时间。页面可以开始响应用户输入事件。(因为页面呈现过程中,其实还是不可交互的。)

▲ Requests

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

▲ Bytes In

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


过程详细:

中间的Waterfall可以看到瀑布流图,点进去,跟你使用chrome tool一样。不多介绍。

▲ Screen Shot,网页快照,保存了从输入url到页面fully loaded的全称快照。

▲ Video 整个过程的视频。这个非常好,你可以和几个视频放在一起,非常直观的看哪一个快哪一个慢。

▲ 各种 breakdown 拆分统计,包括 Contents,Processing,Domains等等,,,,,比如,Contents 拆分统计如下,

▲ domains breakdown,and, request map,,,可统计请求域名情况,域名越多,明显对时间要求更多。

▲ 性能表现总量,可以优化性能的指标完成情况。

这里面列出了可使用的性能点,如:

  • First Byte Time (back-end processing): 51/100
  • Use persistent connections (keep alive): 100/100
  • Use gzip compression for transferring compressable responses: 42/100
  • Compress Images: 100/100
  • Leverage browser caching of static assets: 14/100
  • Use a CDN for all static assets: 0/100

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习算法与Python学习

让你高效工作的六大Windows应用

让你高效工作的六大windows应用 今 天我将给大家介绍一些我个人用到的这些Windows平台上的效率神器们。 page 1 Wox ? Wox官网 用 Ma...

3638
来自专栏章鱼的慢慢技术路

使用Unity中的Box Collider组件完成游戏场景中的碰撞检测功能

1574
来自专栏携程技术中心

干货 | 如何一步步打造基于React的移动端SPA框架

作者简介 喻珍祥,携程港澳研发高级经理,2004年接触互联网开发,见证前端开发从美工到全栈开发的全过程。2014年加入携程,主要负责永安旅游APP移动前端架构和...

42810
来自专栏前端架构与工程

前后端分离和模块化-58到家微信首页重构之路

微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题: 每个城...

2328
来自专栏Debian社区

PHP 7.2 Beta 的测试:PHP 仍然越来越快

PHP 7.2 Beta 1 实现了更多的 Sodium 扩展,针对现代和易于使用的加密、改进 opcache、无效 UTF-8 数据更好的 JSON 解码这些...

912
来自专栏向治洪

关于React Native项目在android上UI性能调试实践

我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到。要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是...

3085
来自专栏DannyHoo的专栏

iOS开发抠psd文件中的图

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1274
来自专栏程序猿DD

如何将Markdown文章轻松地搬运到微信公众号并完美地呈现代码内容

相信有很多童鞋跟我一样,热衷于用Markdown来编写文章。由于其简单的语法和清晰的渲染效果,受到广大码农朋友们的推崇。但是,当我们想维护起自己的公众号时,公众...

4297
来自专栏iOSDevLog

Xcode 10

Xcode 10包含为所有Apple平台创建出色应用所需的一切。现在Xcode和Instruments在macOS Mojave上的新Dark Mode中看起来...

1202
来自专栏知晓程序

手把手教你用上微信小程序,看完必懂!

1222

扫码关注云+社区