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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)