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	是

总结

经过一上午的优化，用户在使用移动端访问网站会有如下变化：
1. 可交互时间从6800ms降至6600ms
2. 总阻塞时间从540ms降至420ms
3. 最大内容绘制从6400ms降至6000ms
4. 累积布局偏移从0.149降至0.137

网站整体性能提高一个台阶。