使用 Lighthouse CLI

谷歌浏览器提供了多种测试网页加载速度的方法,以下是主要方法及详细步骤：

使用 Chrome DevTools（开发者工具）

基本步骤：

1. 打开 DevTools

   • 按 F12 或 Ctrl+Shift+I (Windows/Linux) / Cmd+Opt+I (Mac)
   • 右键点击页面 → 选择“检查”

2. 网络面板分析

   • 切换到 Network 选项卡
   • 刷新页面（Ctrl+R 或点击刷新按钮）
   • 查看瀑布图，分析每个资源的加载时间

3. 关键指标查看

   • DOMContentLoaded：DOM 加载完成时间
   • Load：页面完全加载时间
   • 资源大小和加载时间

性能面板详细分析：

1. 切换到 Performance 选项卡
2. 点击录制按钮 → 刷新页面
3. 查看详细的性能时间线，包括：
   • 脚本执行时间
   • 渲染时间
   • 绘制时间

使用 Lighthouse（内置审计工具）

使用方法：

1. 打开 DevTools → 切换到 Lighthouse 选项卡
2. 选择测试类别（性能、SEO、无障碍等）
3. 选择设备类型（移动端/桌面端）
4. 点击“生成报告”
5. 查看详细的性能评分和建议

其他实用方法

Chrome 任务管理器

• 按 Shift+Esc 打开
• 查看各标签页的内存和CPU使用情况

性能监视器

• DevTools → More tools → Performance monitor
• 实时监控 CPU、JS堆大小、DOM节点数等

网页分析插件

• PageSpeed Insights 插件
• Web Vitals 插件

在线工具（辅助使用）

推荐工具：

1. PageSpeed Insights (Google官方)
2. WebPageTest.org (深度测试)
3. GTmetrix
4. Pingdom Tools

重要性能指标

核心 Web Vitals：

• LCP (最大内容绘制)：应在2.5秒内
• FID (首次输入延迟)：应在100毫秒内
• CLS (累积布局偏移)：应小于0.1

实用技巧

测试建议：

1. 清理缓存测试：使用 Ctrl+Shift+R 硬刷新
2. 模拟网络条件：DevTools → Network → 选择3G/4G等
3. CPU节流模拟：Performance面板可模拟低端设备
4. 多次测试取平均值：避免单次测试的偶然性

优化检查点：

• 图片优化
• 代码压缩
• 减少重定向
• 启用缓存
• 使用CDN

自动化测试

对于开发人员：

lighthouse https://example.com --output=html

注意事项：

1. 测试时关闭不必要的浏览器扩展
2. 在不同网络环境下测试
3. 测试移动端和桌面端
4. 关注真实用户数据（可通过CrUX报告）

这些方法可以帮助你全面了解网页加载性能,并找到优化方向。