EP04. “Network 面板：找出网站为什么慢、哪个文件载入失败”

• 首页一张 5 MB 的横幅图，就可能让手机用户多等好几秒——Network 面板能把「哪个文件最大、哪个最慢」直接排出来
• 每个请求的状态码（200、301、404、500）、大小、载入时间一目了然，找坏掉的图片和脚本很快
• 勾 Disable cache + 选 Slow 4G，就能模拟「第一次来、用手机网络」的访客体验
• 优化之前先在这里量一次，优化后再量一次，才知道缓存插件、图片压缩到底有没有用

重点内容

基本操作

1. 打开 DevTools → Network 分页
2. ⚠️ Network 只会记录打开之后的请求，所以打开后要按 Ctrl+R（或 F5）重新整理网页
3. 列表会按时间列出网页载入的每一个文件：HTML、CSS、JS、图片、字体、API 请求……

上方工具列

看懂列表的栏位

状态码速查

点进单一请求

• TTFB（等服务器回应）很长：问题在主机端或 PHP，考虑页面缓存、升级主机方案
• 下载（Content Download）很长：文件太大，要压缩图片、精简 CSS/JS

实操示例：首页为什么慢？

1. 打开 Network，勾选 Disable cache，节流选 Slow 4G
2. Ctrl+R 重新整理
3. 点 Img 筛选，按 Size 排序，找出超过 500 KB 的图片 → 压缩或转成 WebP
4. 点 All，按 Time 排序，看有没有特别慢的第三方脚本（聊天插件、广告、追踪码）
5. 点首页 HTML 那一行 → Timing，看 TTFB；很长的话检查缓存插件有没有启用
6. 右键任何请求 → Block request URL，重新整理，看拿掉这个脚本网站快了多少（测试用，不会真的删掉）

其他实用功能

学完你会

• ✅ 用 Network 找出最大、最慢的文件
• ✅ 看懂常见状态码（200、301、404、500）
• ✅ 用 Disable cache + 节流模拟第一次来访的手机用户
• ✅ 用 Timing 分辨是主机慢还是文件太大

常见错误

• ❌ 打开 Network 却是空的：要在打开之后重新整理网页才会记录。
• ❌ 测速时没勾 Disable cache：都从缓存读取，看起来很快，跟新访客的体验差很多。
• ❌ 忘了把节流改回 No throttling：之后上网一直很慢，以为是网络问题。
• ❌ 把 HAR 文件随便分享：里面可能有登录 Cookie。
• ❌ 只看自己电脑的速度：用 Slow 4G 模拟，才接近手机用户的真实感受。

Sources

官方文档：

1. Inspect network activity - Chrome for Developers
2. Network features reference - Chrome for Developers
3. Timing breakdown phases explained - Chrome for Developers
4. HTTP response status codes - MDN Web Docs
5. Cloudflare cache responses - Cloudflare Docs