利用Lighthouse提升网站性能
Lighthouse 是一个开源的自动化工具，用于测试页面性能，并提供一套完整的站点评分标准，我们可以依据此标准对站点进行基准测试，从而达到优化的效果。
1. 使用Lighthouse生成报告
- 打开自己项目页面控制台，使用快捷键
command+shift+p打开选项搜索lighthouse，选择lighthouse后边显示移动端还是 PC 端，左边点击Generate report进行报告生成。 - 在 Chrome 浏览器中打开你需要测试的网站，按
f12进入开发者调试模式，找到 Lighthouse- 点击generate report，它会对页面进行相关性能的检查，最终生成报告。
2. 关注性能指标
- FCP (First Contentful Paint)：首次内容渲染时间，标识网页首次渲染出首个文本、图片（页面上的图像、非白色 canvas 元素和 SVG 视为 DOM 内容。不包括 iframe 内的任何内容）的时间。
- SI (Speed Index)：速度指数表明了网页内容的可见填充速度。
- LCP (Largest Contentful Paint)：最大内容绘制，标识网页渲染出最大文本或图片的时间。
- TTI (TimetoInteractive)：可交互时间是指网页需要多长时间才能提供完整交互功能。
- CLS (Cumulative Layout Shift)：累积布局偏移旨在测量可见元素在视口内的移动情况。CLS 值越小越好。
3. 针对性的性能优化
- 减少未使用的 JavaScript、CSS 代码：可以通过异步加载、Tree-Shaking 优化、babel 降低适配版本等方式减少未使用的 JavaScript、CSS 代码。
- 优化体积、消除重复代码：可以通过压缩合并操作、修改服务器进行 gzip 压缩、使用 lerna 和 yarn 处理重复包等方式优化体积、消除重复代码。
- 加载方式优化：尽量使用预加载，对于一些站外 js 比如广告，或者一些 js 特效，我们可以对其进行延时加载的操作。
- 图片文件优化：所有图片最好都采用新的图片格式 Webp，用以减少其体积。对于特定的图片，比如 Logo，使用 svg 格式图片。
- 声明宽高属性：并且使用支持 lazyload.js 组件推迟对屏幕外图片的加载。
4. 结论
- Lighthouse 提供了丰富的性能指标，帮助我们了解网站的性能状况，并提供了多种优化方案，通过不断地优化和测试，可以显著提升网站的性能。
以上步骤和方法均基于搜索结果中的信息，实际操作中还需要结合具体的项目情况进行调整和优化。
原创文章，作者：Ur47000，如若转载，请注明出处：https://wyc.retuba.cn/6270.html
