1. 使用开发者工具查看资源加载详情
按`Ctrl+Shift+I`（Mac为`Cmd+Option+I`）→ 切换到“Network”面板 → 刷新页面观察各资源加载时间。此操作显示每个文件的大小和耗时（如对比图片与脚本的加载顺序），定位瓶颈资源（需记录数据），但无法直接修改内容（可结合其他工具优化）。
2. 开启Lighthouse生成性能报告
在开发者工具中选择“Audits”面板 → 点击“生成报告” → 查看性能评分及建议。此功能分析整体速度（如对比首次与重复加载的分数），提供优化方向（需按建议调整），但可能忽略细节问题（适合全局检查）。
3. 禁用缓存强制重新加载所有资源
在Network面板勾选“Disable Cache” → 刷新页面查看真实加载情况。此策略模拟用户首次访问（如对比启用缓存前后的加载时间），测试资源更新效果（需保持网络稳定），但可能延长测试时间（适合调试新版本）。
4. 检查并优化图片资源格式
在Network面板筛选“Image”类型资源 → 右键点击文件选择“Open in new tab” → 对比不同格式（JPEG/WebP）的加载速度。此方法验证图片压缩效果（如对比原图与优化后的体积），减少带宽占用（需后端支持），但可能影响画质（需平衡清晰度与速度）。
5. 模拟不同网络环境测试稳定性
在Network面板选择“Online”模式 → 调整为“Slow 3G”或自定义限速 → 观察页面在低网速下的崩溃点。此操作检测弱网兼容性（如对比高速与低速环境的加载结果），优化用户体验（需针对性调整），但无法替代真实设备测试（适合初步排查）。