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 应用的加载速度、响应性和用户体验。记住,优化的目标不仅是提高性能指标,还包括提供更快、更可靠的用户体验。

相关推荐
jiangzhihao05157 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI9 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front10 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀10 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻10 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树11 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔11 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
InCerry11 小时前
为 .NET 10 GC(DATAS)做准备
性能优化·c#·.net·gc
程序员小凯11 小时前
Spring Boot性能优化详解
spring boot·后端·性能优化