1. 使用Chrome内置开发者工具测试
- 按`F12`打开开发者工具→切换到“Network”面板→刷新页面→查看“Load”时间（即总加载时长）→对比不同资源（如JS、图片）的加载耗时（颜色越深代表耗时越久）。
- 关键指标：关注“First Contentful Paint”（首次内容渲染时间）和“Time to Interactive”（可交互时间）→数值越低表示速度越快。
2. 通过Lighthouse生成性能报告
- 在开发者工具→点击“Lighthouse”→选择“Performace”模式→点击“生成报告”→查看评分（满分100）及优化建议（如减少主线程任务、压缩图片）。
- 自动化测试：在命令行输入`chrome --headless --enable-lighthouse`→生成HTML格式报告（适合定期检测）。
3. 对比不同网络环境下的速度
- 在Chrome设置→“隐私与安全”→“更多”→启用“离线模式”→模拟弱网环境（如限速至50kb/s）→观察页面加载是否出现超时或资源加载失败（适合测试移动端页面）。
- 自定义网络参数：安装扩展“Network Conditions”→手动设置延迟、丢包率→测试极端网络下的表现。
4. 分析第三方脚本对速度的影响
- 在Network面板→筛选“js”文件→禁用疑似拖慢速度的外部脚本（如广告追踪代码）→重新加载页面对比加载时间→定位性能瓶颈（如某SDK导致延迟2秒）。
- 强制同步加载：在HTML头部添加script src="example.js" async→避免阻塞渲染（适合广告类脚本）。
5. 使用WebPageTest深度检测
- 访问`https://www.webpagetest.org/`→输入目标URL→选择测试地点（如国内节点）→开始测试→查看“Fully Loaded”时间及瀑布图（标注各资源加载顺序）。
- 高级设置：开启“Enable advanced configuration”→模拟移动设备（如iPhone X）→检测响应式设计下的加载速度。