测试网站打开速度

打开一个网页要等 8 秒，测试用户早就跑了。网站Google 的打开数据摆在那里：加载时间从 1 秒涨到 3 秒，跳出率增加 32%；涨到 5 秒，速度跳出率飙到 90%。测试这不是网站吓唬人，我自己就干过这种事——点开一个教程页面，打开进度条转了三圈还没出来，速度直接关掉去搜别的测试了。后来我自己做站，网站才发现测速这件事比想象中琐碎得多。打开

最早我用的速度是浏览器自带的开发者工具。按 F12，测试切到 Network 面板，网站刷新页面，打开一堆请求像瀑布一样淌下来。每个资源的加载时间、大小、状态码都列得清清楚楚。这方法免费，够直接。但有个问题：它测的是你本地的网络环境。你家宽带快，不代表别人用 4G 打开也快。有次我在公司测一个页面，首屏 1.2 秒，挺得意。回家用手机流量再开，白屏了 6 秒。运营商、DNS 解析、CDN 节点，变量太多。

后来我换了个思路，用在线工具。WebPageTest 是绕不开的一个。它能选测试地点、浏览器型号、网络条件，甚至能模拟 3G 慢速。跑一次会给出一份详细报告：首字节时间、开始渲染时间、DOM 加载完的时间、完全加载时间，还有瀑布图和视频回放。那个视频回放特别直观，你能看到页面一帧一帧怎么长出来的。有次我发现一个字体文件拖了 2 秒，就是因为它在 CSS 里被引用得太深，浏览器要等 CSS 解析完才去下载。把字体改成预加载，时间立刻掉下来。

PageSpeed Insights 我也常用。它给一个 0 到 100 的分数，虽然这个分数不能全信——有时候你明明优化了，分数反而降了，因为它的算法也在变。但它指出的问题很具体：图片没压缩、JS 阻塞渲染、缓存策略不对。照着改，通常都有收益。我印象最深的一次，是它提示我“消除阻塞渲染的资源”。我一看，一个统计脚本放在了 head 里，同步加载。挪到 body 底部加个 defer，首屏时间从 3.4 秒变成 1.8 秒。就这么一个小动作。

测速这件事，最怕的是只测一次。网络有波动，服务器有负载，CDN 有缓存命中率。我现在的习惯是：同一页面，不同时段测三次，取中间值。早上八点、下午两点、晚上十点，结果经常不一样。晚上十点那次往往最慢，因为服务器那边可能在做备份。你要是只测一次就下结论，很容易被误导。

还有一点，别只盯着首页。用户真正访问的是内页、是文章页、是产品详情页。那些页面往往有更多图片、更多第三方脚本。我见过一个站，首页 1.5 秒，点进一篇文章要 7 秒。问题出在评论区——它加载了一个外部的表情包库，那个库的服务器在境外。这种事，不逐个页面测根本发现不了。

说到底，测速不是目的，是手段。你测出来 4 秒，然后呢？得去查是什么拖慢了它。是图片太大？是 JS 太多？是服务器响应慢？还是 DNS 查询绕了远路？每个原因对应的解法都不一样。我自己的经验是，八成的问题出在图片和第三方脚本上。把图片转成 WebP，把非关键的脚本延迟加载，通常能砍掉一半时间。剩下的两成，可能是服务器配置或者数据库查询，那就得另说了。

工具就在那里，用不用、怎么用，差别很大。别等用户跑了才想起来测。