chrome => lighthouse => Analyze page load 测试首页前端性能

要在 Chrome 中使用 Lighthouse 分析首页的页面加载性能（Page Load Performance），请按照以下步骤操作：

---

🚀 步骤一：打开 Chrome DevTools

1. 打开 Google Chrome 浏览器。
2. 访问你要测试的网站首页（例如：https://yourwebsite.com）。
3. 右键点击页面任意位置，选择 “检查”（Inspect），或者按快捷键：

• Windows/Linux: Ctrl + Shift + I
• macOS: Cmd + Option + I

---

🧪 步骤二：启动 Lighthouse

1. 在 DevTools 面板顶部标签中，点击 Lighthouse（如果没有看到，请点击 >> 查找）。
2. 在 Lighthouse 面板中，确保分析类型包含 Performance（性能）——这是评估页面加载速度的核心指标。
3. 你可以选择设备类型：

• Mobile（移动端，默认，更严格）
• Desktop（桌面端）

4. 点击 Analyze page load 按钮。

⏱️ Lighthouse 会自动刷新页面、收集数据，并生成一份详细的报告（通常需要 30~60 秒）。

---

📊 步骤三：查看性能报告

报告将包含以下关键指标（Core Web Vitals 及更多）：

指标	说明
First Contentful Paint (FCP)	首次内容绘制时间（用户看到第一块内容的时间）
Largest Contentful Paint (LCP)	最大内容绘制时间（反映页面主要内容加载速度）
Total Blocking Time (TBT)	总阻塞时间（衡量交互响应能力）
- Cumulative Layout Shift (CLS)	累积布局偏移（视觉稳定性）
Speed Index	速度指数（页面内容填充的快慢）

Lighthouse 会给出一个 0–100 的性能评分，并提供优化建议，例如：

• 压缩图片
• 启用文本压缩（如 Gzip/Brotli）
• 减少 JavaScript 执行时间
• 预加载关键资源
• 移除未使用的 CSS/JS

---

💡 提示

• 为获得准确结果，请在 无痕模式（Incognito） 下运行测试，避免扩展干扰。
• 如果是本地开发环境（如 localhost），Lighthouse 仍可正常工作。
• 可导出报告为 HTML 或 JSON，便于团队分享或持续集成（CI）。

---

🔗 补充工具

• 在线版 Lighthouse：https://pagespeed.web.dev/（Google PageSpeed Insights）
• CLI 版本（适合自动化）：

npm install -g lighthouse
lighthouse https://yourwebsite.com --view

---

如果你希望我帮你分析具体的 Lighthouse 报告内容（比如截图或 JSON 数据），可以贴出来，我会为你解读并提供优化建议！chrome lighthouse Analyze page load 测试首页加载速度