查漏补缺——说说怎么使用谷歌浏览器的Lighthouse对网站进行优化

问题

如题所示

答案与实践

参考答案

vue项目你一定会用到的性能优化！

实践

一般来说，本地项目会比线上的项目的分数要低，所以我们现在首要任务是把本地项目的评分提高。

由于这篇文章：

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

已经记录好我们性能优化之前的一个重要的参数。在做完性能优化之后，与它进行对比就知道哪些性能得到了优化。第一步，我们先从最简单的开始入手：

性能优化——优化图像

这里它给我们的提示是：优化后的图像加载更快，消耗更少的蜂窝数据。

PC端优化结果

移动端优化结果

优化结果对比

参数	移动端（前）	移动端（后）	是否优化
首次内容绘制（First Contentful Paint）	23.5s	23.5s
可交互时间（Time to Interactive）	28.5s	28.1s	是
速度指标（Speed Index）	23.5s	23.5s
总阻塞时间（Total Blocking Time）	1010ms	1090ms	否
最大内容绘制（Largest Contentful Paint）	27.5s	27.5s
累积布局偏移（# Cumulative Layout Shift）	0.133	0.149	否
总评分	20	19	否

参数	PC端（前）	PC端（后）	是否优化
首次内容绘制（First Contentful Paint）	4.0s	4.0s
可交互时间（Time to Interactive）	4.5s	4.9s	否
速度指标（Speed Index）	4.0s	4.0s
总阻塞时间（Total Blocking Time）	160ms	180ms	否
最大内容绘制（Largest Contentful Paint）	4.8s	4.8s
累积布局偏移（# Cumulative Layout Shift）	0.161	0.161
总评分	46	44	否

总结

从上面的表格，我们不难发现只有移动端的可交互时间得到了优化，移动端和PC端的总阻塞时间不但没有得到优化，反而性能变差了？这到底是为什么呢？性能变差的还有移动端的累积布局偏移和PC端的可交互时间。总评分反而下降了？是什么原因导致这些参数下降的呢？欲知后事如何，请听下回分解。