1. 使用Lighthouse生成报告
- 在Chrome右上角点击三个点→选择“更多工具”→点击“开发者工具”→切换到“Lighthouse”面板→点击“生成报告”→查看性能评分（如网页得分从50提升至85）。
- 通过快捷键`Ctrl+Shift+I`→调出开发者工具→选择“网络”选项卡→观察资源加载顺序→调整CSS和JS位置（如将关键样式提前到head）。
2. 优化图片懒加载策略
- 在开发者工具中切换到“Sources”面板→找到img标签→添加`loading="lazy"`属性→延迟非可视区域图片加载（如长图文页面减少30%带宽消耗）。
- 通过命令行添加参数`--enable-features=ImageLazyLoad`→强制启用实验功能→测试不同格式图片效果（需重启浏览器生效）。
3. 压缩关键CSS文件
- 在开发者工具中切换到“Audits”面板→查看“CSS统计信息”→合并重复选择器→减少冗余代码（如样式表从15KB降至6KB）。
- 通过右键点击页面元素→选择“Inspect”→在“Styles”面板中删除无用规则→实时预览效果（需手动操作）。
4. 设置缓存控制头
- 在开发者工具中切换到“Network”面板→筛选静态资源→右键点击文件→选择“修改请求头”→添加`Cache-Control: max-age=31536000`→延长缓存时间（如图标文件一年不更新）。
- 通过访问网站源码→修改`.htaccess`文件→配置服务器端缓存规则→提升重复访问速度（需保持代码正确）。
5. 启用Brotli压缩算法
- 在开发者工具中切换到“Network”面板→筛选文本资源→查看“Content-Encoding”字段→确认启用`br`压缩（如HTML文件缩小60%）。
- 通过命令行添加参数`--enable-brotli`→强制支持Brotli解码→对比Gzip和Deflate效率（需重启浏览器生效）。