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

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
文人sec3 小时前
性能测试-jmeter9-逻辑控制器、定时器压力并发
测试工具·jmeter·性能优化·模块测试
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光5 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5205 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js