教程详情
- 在Chrome右上角点击三个点→选择“更多工具”→点击“开发者工具”→切换到“Lighthouse”面板→点击“生成报告”→查看性能评分（如从50分提升至85分）。
- 通过快捷键`Ctrl+Shift+I`→调出开发者工具→选择“网络”选项卡→观察资源加载顺序→调整CSS和JS位置（如将关键样式提前到head标签内）。
2. 压缩图片并延迟加载
- 在开发者工具中切换到“Sources”面板→找到img标签→添加`loading="lazy"`属性→非可视区域图片延迟加载（如长图文页面减少30%带宽消耗）。
- 通过访问网站源码→修改图片格式为WebP→对比文件大小变化→替换所有JPG/PNG为WebP（需保持视觉质量）。
3. 合并HTTP请求数量
- 在Chrome右上角点击三个点→选择“更多工具”→点击“开发者工具”→切换到“Network”面板→筛选CSS和JS文件→合并重复请求（如减少10个相同文件的加载）。
- 通过命令行添加参数`--disable-split-caches`→阻止缓存分区→提升多标签页共享效率（需重启浏览器生效）。
4. 设置浏览器缓存策略
- 在开发者工具中切换到“Network”面板→筛选静态资源→右键点击文件→选择“修改请求头”→添加`Cache-Control: max-age=31536000`→延长缓存时间（如图标文件一年不更新）。
- 通过访问网站源码→修改`.htaccess`文件→配置服务器端缓存规则→提升重复访问速度（需保持代码正确性）。
5. 启用Brotli压缩算法
- 在开发者工具中切换到“Network”面板→筛选文本资源→查看“Content-Encoding”字段→确认启用`br`压缩（如HTML文件缩小60%）。
- 通过命令行添加参数`--enable-features=Brotli`→强制支持Brotli解码→对比Gzip和Deflate效率（需重启浏览器生效）。
