Lighthouse性能优化——线上项目图像优化报告对比
图像优化前性能报告
查漏补缺——说说怎么使用谷歌浏览器的Lighthouse对网站进行性能评估
图像优化后性能报告
移动端性能报告
PC端性能报告
表格整理
| 参数 | 移动端（前） | 移动端（后） | 是否优化 |
|---|---|---|---|
| 首次内容绘制（First Contentful Paint） | 3.6s | 3.6s | |
| 可交互时间（Time to Interactive） | 6.8s | 6.6s | |
| 速度指标（Speed Index） | 4.8s | 4.3s | |
| 总阻塞时间（Total Blocking Time） | 540ms | 420ms | |
| 最大内容绘制（Largest Contentful Paint） | 6.4s | 6.0s | |
| 累积布局偏移（# Cumulative Layout Shift） | 0.149 | 0.137 | |
| 总评分 | 46 | 52 |
| 参数 | PC端（前） | PC端（后） | 是否优化 |
|---|---|---|---|
| 首次内容绘制（First Contentful Paint） | 0.8s | 0.9s | |
| 可交互时间（Time to Interactive） | 1.3s | 1.3s | |
| 速度指标（Speed Index） | 1.6s | 1.4s | |
| 总阻塞时间（Total Blocking Time） | 10ms | 30ms | |
| 最大内容绘制（Largest Contentful Paint） | 1.3s | 1.5s | |
| 累积布局偏移（# Cumulative Layout Shift） | 0.161 | 0.146 | |
| 总评分 | 46 | 90 |
总结
2. 总阻塞时间从540ms降至420ms
3. 最大内容绘制从6400ms降至6000ms
4. 累积布局偏移从0.149降至0.137
