黄子涵

Lighthouse性能优化——线上项目图像优化报告对比

图像优化前性能报告

查漏补缺——说说怎么使用谷歌浏览器的Lighthouse对网站进行性能评估

图像优化后性能报告

移动端性能报告

image

PC端性能报告

image

表格整理

参数 移动端(前) 移动端(后) 是否优化
首次内容绘制(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

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

posted @   黄子涵  阅读(126)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示