1. 使用Lighthouse生成性能报告
按 `Ctrl+Shift+P` → 输入“Lighthouse” → 选择“性能”并运行。报告会显示“首次内容绘制（FCP）”和“速度指数（SI）”分数（如FCP超过3秒需优化），并列出关键问题（如未压缩图片、冗余JS）。
2. 检查资源加载顺序
在“Network”面板中刷新页面 → 查看资源加载时间线。若CSS文件（如`style.css`）加载时间过长（如500ms），将其移至head顶部，避免渲染阻塞（如减少白屏时间200ms）。
3. 压缩图片与懒加载
在“Audits”面板找到“未优化图片” → 右键点击资源 → 选择“Show in Network”。替换为WebP格式（如将`image.jpg`转为`image.webp`），节省60%体积。启用懒加载（如添加`loading="lazy"`属性），仅加载视口内图片（如长网页减少80%图片请求）。
4. 合并与延迟JS执行
在“Sources”面板查找外部脚本（如`analytics.js`）→ 右键选择“覆盖（cover）” → 添加`defer`属性。此操作延迟执行非关键JS（如广告代码），避免阻塞DOM解析（如从阻塞1秒降至100ms）。
5. 启用Brotli压缩
在“Network”面板检查响应头 → 若缺少`br`压缩，进入服务器配置（如Nginx添加`brotli on`）。此操作可将HTML/CSS体积减少25%（如从15KB压缩至11KB），但需浏览器支持（Chrome 79+默认开启）。
6. 缓存静态资源
在“Application”面板查看缓存存储 → 设置强缓存策略（如`Cache-Control: max-age=31536000`）。此操作会让浏览器直接从本地读取资源（如Logo图标），减少重复下载（如节省10个请求/次访问）。