LightHouse 性能优化

https://zhuanlan.zhihu.com/p/376925215

https://segmentfault.com/a/1190000041524121

Lighthouse 是一个开源的自动化工具,由 Google 开发,用于改善 Web 应用的性能和质量。它已经被集成到 Chrome DevTools 中,并且可以作为一个 Chrome 扩展程序运行,或者从命令行运行。Lighthouse 对 Web 页面运行一系列自动化测试,并生成关于页面性能的报告,开发者可以根据这些报告来优化页面。

Lighthouse 性能指标

Lighthouse 的性能测试报告主要关注以下几个方面:

  1. First Contentful Paint (FCP):首次内容渲染,即页面首次渲染出文本或图片的时间。
  2. Largest Contentful Paint (LCP):最大内容绘制,标识网页渲染出最大文本或图片的时间,与首次有效绘制(First Meaningful Paint, FMP)相似,但是 LCP 是一个通用固定计算规则。
  3. Time to Interactive (TTI):可交互时间,即页面达到可交互状态所需的时间。
  4. Cumulative Layout Shift (CLS):累计布局偏移,衡量页面上内容意外偏移的程度。
  5. Total Blocking Time (TBT):累计阻塞时间,标识网页首次内容渲染和可交互时间之间的所有超时任务的超时累计时间。

Lighthouse 优化建议

根据 Lighthouse 提供的报告,以下是一些常见的性能优化建议:

  1. 减少未使用的 JavaScript 和 CSS 代码

    • 使用懒加载(例如,使用 import() 语法异步加载组件)。
    • 通过摇树优化(Tree-Shaking)删除未使用的代码。
    • 设置合理的 .browserslistrc 文件,减少不必要的 polyfills。
  2. 优化体积和消除重复代码

    • 启用 Gzip 压缩并设置资源缓存策略。
    • 使用 CDN 来提供资源,并确保压缩和缓存。
    • 消除重复的依赖包,使用工具如 lerna 进行依赖管理。
  3. 缩短执行时间和链路,避免阻塞主线程

    • 优化 JavaScript 代码执行速度,例如通过减少循环的层数和正确使用数组方法。
    • 减少串行代码,例如避免滥用 asyncawait
    • 避免过时的代码实践,如 document.write
  4. 其他注意事项

    • 确保 CSS 优化,可以考虑使用异步加载。
    • 对第三方库进行二次封装,以减少体积。
    • 正确区分 v-ifv-show,确保组件没有被实际实例化。
    • 使用 Chrome DevTools 的 Coverage 工具来查看未执行的代码,减少浪费。

总结

性能优化是一个持续的过程,需要开发者根据实际情况不断调整和改进。Lighthouse 提供了一个方便的工具来识别性能瓶颈,并提供了一系列的优化建议。通过实施这些建议,可以显著提高 Web 应用的加载速度、响应性和用户体验。记住,优化的目标不仅是提高性能指标,还包括提供更快、更可靠的用户体验。

相关推荐
万少31 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL37 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00001 小时前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试