6 个工具帮您了解网站加载速度
研究表明,如果您的网页加载时间超过5 秒,您将失去 50% 的浏览者和销售额。作为一名 UNIX 管理员,最终用户和 Web 开发人员经常抱怨网站的加载速度和时间。通常,我的服务器或服务器群没有问题。花哨的 Java 脚本和图像/Flash 会使网站非常慢。这些工具对于系统管理员、开发人员和最终用户调试性能问题很有用。以下六种工具可以分析网页并告诉您它们为什么很慢。使用以下工具可以:
- 让您的网站更快。
- 调试站点问题,特别是客户端和服务器端的问题。
- 更好的用户体验。
- 改善网络。
#1:雅虎! Yslow
Firefox 的 Firebug 扩展允许您调试、编辑和监控任何网站的 CSS、HTML、DOM 和 JavaScript。YSlow 与 firebug 扩展配合使用:
YSlow 会分析网页,并根据一套高性能网页规则提出改进网页性能的方法。YSlow 是与 Firebug 网页开发工具集成的 Firefox 插件。YSlow 根据三个预定义规则集之一或用户定义的规则集对网页进行评分。它提供改进页面性能的建议,总结页面的组件,显示有关页面的统计信息,并提供性能分析工具,包括 Smush.i 和 JSLint。
图 01 Yahoo! Yslow 为 example.com 提供的总体评分(点击放大)
如果您应用 YSlow 提供的提示,您的公司网站或个人博客的加载速度将比旧版本更快。
图 02:YSlow 组件级别报告(点击放大)
这对于查明 Apache 或 Lighttpd 是否压缩(gzip)文件很有用。
图 03:YSlow!各种组件的图形表示
- 下载Firebug和Yslow
- 开发者主页:Yahoo YSlow
#2:Google页面速度
Page Speed 是一款开源的 Firefox/Firebug 插件。您可以使用 Page Speed 评估您网页的性能并获得改进建议。
图 4:Google Page Speed 实际运行情况(点击放大)
图 05:Google 页面速度建议
- 下载Firebug和Page Speed
- 开发者主页:Google Page Speed
#3:Pagetest(IE 专用工具)
此工具仅适用于 MS Internet Explorer。来自项目网页:
Pagetest 是一款开源工具,可直接从您的 Web 浏览器测量和分析网页性能。AOL 内部开发了 Pagetest,用于自动测量其众多网站的加载时间,它已发展成为 Web 开发人员和软件工程师测试其网页并获得即时反馈的强大工具。我们决定将其发布给更大的 Web 开发社区,以进一步帮助它发展成为一款更加有用且免费的 Web 性能工具。
图 06:使用瀑布图查看我的网页加载性能(点击放大)
- 下载适用于 MS-IE 的 Pagetest
- pagetest 的在线版本可在pagetest.org上找到。
#4:HTTP 服务器基准测试工具
ab 是一个用于对 Apache 超文本传输协议 (HTTP) 服务器进行基准测试的工具。它旨在让您了解当前 Apache 安装的性能。它特别向您展示了 Apache 安装每秒能够处理多少个请求。了解如何使用ab 命令。
httperf 是一种测量 Web 服务器性能的工具。它使用 HTTP 协议的 HTTP/1.0 和 HTTP/1.1 版本,并提供各种工作负载生成器。以下命令使 httperf 创建与主机 www.example.com 的连接、发送和接收回复、关闭连接,然后打印一些性能统计数据。
$ httperf --hog --server www.example.com
示例输出:
httperf --hog --client=0/1 --server=www.example.com --port=80 --uri=/ --send-buffer=4096 --recv-buffer=16384 --num-conns=1 --num-calls=1 httperf: warning: open file limit > FD_SETSIZE; limiting max. # of open files to FD_SETSIZE Maximum connect burst length: 0 Total: connections 1 requests 1 replies 1 test-duration 0.236 s Connection rate: 4.2 conn/s (236.0 ms/conn, <=1 concurrent connections) Connection time [ms]: min 236.0 avg 236.0 max 236.0 median 235.5 stddev 0.0 Connection time [ms]: connect 47.0 Connection length [replies/conn]: 1.000 Request rate: 4.2 req/s (236.0 ms/req) Request size [B]: 70.0 Reply rate [replies/s]: min 0.0 avg 0.0 max 0.0 stddev 0.0 (0 samples) Reply time [ms]: response 38.0 transfer 151.0 Reply size [B]: header 242.0 content 26976.0 footer 2.0 (total 27220.0) Reply status: 1xx=0 2xx=1 3xx=0 4xx=0 5xx=0 CPU time [s]: user 0.01 system 0.22 (user 6.3% system 93.6% total 99.9%) Net I/O: 112.9 KB/s (0.9*10^6 bps) Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0 Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0
以下是与上面的类似,不同之处在于总共创建了 100 个连接,并且以每秒 10 个的固定速率创建连接:
# httperf --hog --server www.example.com --num-conn 100 --ra 10 --timeout 5
示例输出:
httperf --hog --timeout=5 --client=0/1 --server=www.example.com --port=80 --uri=/ --rate=10 --send-buffer=4096 --recv-buffer=16384 --num-conns=100 --num-calls=1 httperf: warning: open file limit > FD_SETSIZE; limiting max. # of open files to FD_SETSIZE Maximum connect burst length: 1 Total: connections 100 requests 100 replies 100 test-duration 10.089 s Connection rate: 9.9 conn/s (100.9 ms/conn, <=4 concurrent connections) Connection time [ms]: min 186.7 avg 193.6 max 302.3 median 187.5 stddev 20.8 Connection time [ms]: connect 36.4 Connection length [replies/conn]: 1.000 Request rate: 9.9 req/s (100.9 ms/req) Request size [B]: 70.0 Reply rate [replies/s]: min 9.8 avg 9.9 max 10.0 stddev 0.1 (2 samples) Reply time [ms]: response 39.5 transfer 117.7 Reply size [B]: header 242.0 content 26976.0 footer 2.0 (total 27220.0) Reply status: 1xx=0 2xx=100 3xx=0 4xx=0 5xx=0 CPU time [s]: user 0.34 system 9.75 (user 3.4% system 96.6% total 99.9%) Net I/O: 264.1 KB/s (2.2*10^6 bps) Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0 Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0
- 下载适用于类 UNIX 操作系统的httppref 实用程序。
- 有关更多详细信息,请参阅 ab 和 httppref 手册页。
#5:全页测试
全页测试加载完整的 HTML 页面,包括所有对象(图像、CSS、JavaScript、RSS、Flash 和框架/iframe)。它模拟网页在 Web 浏览器中的加载方式。所有对象的加载时间都以时间条的形式直观显示。
图 07:Pingdom 页面测试正在进行中
#6:UNIX wget 或 fetch 实用程序
wget 用于检索命令行上 URL 指向的文件。它可以告诉您下载文件所花费的确切时间:
示例输出:
$ wget http://www.example.com/files/test.pdf
$ wget http://www.example.com/
--2009-07-15 22:09:05-- http://www.example.com/ Resolving www.example.com... 74.86.48.99 Connecting to www.example.com|74.86.48.99|:80... connected. HTTP request sent, awaiting response... 200 OK Length: unspecified Saving to: `index.html' [ <=> ] 26,976 38.0K/s in 0.7s 2009-07-15 22:09:07 (38.0 KB/s) - `index.html' saved [26976]
请注意,wget 并不关心您的 javascript、css 和第三方服务器。这只会给您提供原始想法,没有其他信息。
更新#1:适用于 Apple Safari 4 浏览器的工具
Apple 提供了各种工具来测试你的网站:
“资源”窗格以图表形式显示网站组件在网络上的加载顺序和速度。它也是第一个允许您根据加载参数(例如延迟、响应时间和持续时间)对数据进行排序的工具。您可以按大小或加载时间绘制页面资源图表。单击左列中的资源会在右侧显示详细数据。对于文本资源(例如文档和脚本),您可以查看文件的文本源。对于图像和字体资源,您可以查看文件的图形预览。