如何用Chrome自带工具测试网页加载速度

测试网页加载速度是 Chrome 开发者工具（DevTools）的核心功能之一。你可以根据需求的深度，选择以下三种不同的自带工具：

1. Lighthouse 报告（最全面，推荐初学者）

Lighthouse 是 Chrome 内置的自动审计工具，它不仅能给出加载分数，还会提供具体的优化建议。

• 操作步骤：
  1. 在目标网页按下 F12（或 Ctrl+Shift+I）打开开发者工具。
  2. 点击顶部标签页中的 Lighthouse（如果没看到，点击末尾的 >> 图标）。
  3. 选择 “桌面设备” 或 “移动设备”。
  4. 点击 “分析网页加载情况 (Analyze page load)”。
• 查看结果：你会得到一个 0-100 的评分，重点关注 LCP（最大内容绘制时间）和 Speed Index（速度指数）。红色项表示拖慢网页的元凶。

2. Network 面板（最直观，查看每个资源）

如果你想知道是哪张图片或哪段脚本加载太慢，这个工具最合适。

• 操作步骤：
  1. 打开开发者工具，切换到 Network (网络) 标签页。
  2. 勾选 Disable cache (禁用缓存)（这能模拟用户第一次访问时的真实速度）。
  3. 按 Ctrl + R（或 Cmd + R）刷新页面。
• 查看结果：
  • 底部状态栏：可以看到 Finish（完成总耗时）、DOMContentLoaded（DOM 构建耗时）和 Load（加载总时长）。
  • Waterfall (瀑布图)：查看每一行条状图，颜色越长代表该资源加载时间越久。

3. Performance 面板（最专业，分析性能瓶颈）

这适合开发者分析网页在加载过程中的 CPU 占用、脚本执行和渲染细节。

• 操作步骤：
  1. 切换到 Performance (性能) 标签页。
  2. 点击左上角的 “重新加载并记录 (Start profiling and reload page)” 图标（类似循环箭头）。
  3. 等待页面加载完成，Chrome浏览器会自动生成一份复杂的性能报告。
• 查看结果：你可以看到网页加载的每一毫秒发生了什么。如果在 CPU 一栏看到大量红色，说明网页脚本太重。

如何用Chrome自带工具测试网页加载速度常见问题