适用环境
桌面 Chrome；Edge 的开发者工具也有相近功能
建立一次干净的观察
- 打开目标网页，按 F12 或 Ctrl + Shift + I，选择 Network（网络）。
- 确认录制开启，清空列表，然后刷新页面。请求通常从打开工具后开始记录。
- 先按平时条件观察；再勾选 Disable cache 做一次对照。该选项在开发者工具打开时生效，不要把它当成所有访客的默认行为。
先看三列
- Status：判断请求成功、跳转、未修改或失败。304 是缓存协商结果，不是页面错误。
- Size：区分实际传输量与资源本身体积，留意来自内存或磁盘缓存的标记。
- Time / Waterfall：看哪个请求迟迟未完成，以及请求之间是否在等待。
按类型定位问题
选择 Doc 看页面文档，选择 Img 看图片，选择 Fetch/XHR 看页面调用的数据接口。比如文档很快，但一张原图有数兆且加载很久，先检查图片尺寸和格式；接口迟迟不返回，则记录接口地址和 Timing，不要只压缩首页图片。
读懂 Timing
点开请求的 Timing。排队、域名查询、连接、等待首字节、下载正文代表不同阶段。等待首字节包含网络往返及服务端准备响应的时间，不能只归因于后端计算。缓存或复用连接时，部分阶段可能不出现。
留下证据并验证修改
修改前后使用同一网络条件、缓存设置和页面地址，对照同一资源的大小与时间。结果至少重复几次；本机命中缓存的一次加载，不能拿来和另一台设备的首次加载直接比较。导出 HAR 或复制请求时，先检查是否包含登录凭据、查询参数和个人信息，再决定是否分享。