一、基础性能检测
1. 使用开发者工具：按F12打开开发者工具→切换到Lighthouse面板→生成网页性能报告。
2. 检查网络请求：在Network面板刷新页面→查看所有资源加载状态和耗时情况。
3. 分析渲染时间：在Performance面板录制页面加载→观察首次内容绘制（FCP）和可交互时间（TTI）。
二、资源优化方案
1. 压缩图片文件：在Audits面板查看图片优化建议→使用WebP格式替换高分辨率图片。
2. 合并CSS文件：在Sources面板检查样式表→将分散的CSS规则合并为单一文件。
3. 延迟加载JS：在Console输入`window.addEventListener('load', function() {...})`→将脚本执行移至页面完全加载后。
三、缓存策略配置
1. 设置强缓存：在Headers面板修改响应头→添加Cache-Control: max-age=31536000。
2. 配置服务工作：注册Service Worker脚本→通过Workbox库实现资源预缓存。
3. 清理旧缓存：在Application面板删除过期缓存数据→确保用户获取最新资源。
四、网络协议优化
1. 启用HTTP/2：在实验性功能页面强制使用HTTP/2协议→实现多路复用传输。
2. 设置TCP优化：在启动参数添加`--flag-switches-to-nkb=true`→使用最新的拥塞控制算法。
3. 预连接服务器：在Console输入`document.createElement('link').href='//example.com'`→提前建立连接通道。
五、渲染效率提升
1. 优化关键CSS：在覆盖层面板提取首屏样式→内联到HTML头部减少阻塞。
2. 移除阻塞脚本：将非必要JS移至页面底部→避免延迟渲染流程。
3. 使用字体显示：在Styles面板设置font-display: swap→防止自定义字体阻塞文本显示。