前端性能监控:从Lighthouse到Real User Monitoring

2024-05-16 14:44

本文主要是介绍前端性能监控:从Lighthouse到Real User Monitoring,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端性能监控是确保Web应用程序提供良好用户体验的关键组成部分。Lighthouse 和 Real User Monitoring (RUM) 是两种不同的工具和技术,它们关注的焦点不同,但都对优化前端性能至关重要。

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

Lighthouse

Lighthouse 是一个自动化工具,主要用于离线评估网页性能和质量。它通过模拟真实用户的行为来执行测试,提供审计报告,包括加载性能、最佳实践、可访问性、PWA(渐进式Web应用)特性和SEO等方面。Lighthouse 能够帮助开发者发现性能瓶颈并提供改进建议。

使用 Lighthouse 的基本步骤:

1. 在 Chrome 浏览器中:
打开开发者工具(快捷键 F12 或者右键点击页面,选择检查)。
导航到 Lighthouse 标签页(在 Audits 或 Performance 面板中)。
运行审计,Lighthouse 将生成一份详细的报告。

2. 通过 CLI:
安装 Lighthouse CLI(如果尚未安装):

     npm install -g lighthouse

3. 对网站运行 Lighthouse:

     lighthouse https://example.com --output=json --output-path=report.json
Lighthouse 报告中的关键指标:
  • First Contentful Paint (FCP): 页面首次绘制内容的时间。
  • Time to Interactive (TTI): 页面变得对用户交互响应的时间。
  • Speed Index: 衡量页面内容可视化的速度。
  • Largest Contentful Paint (LCP): 最大内容元素渲染完成的时间。
  • Cumulative Layout Shift (CLS): 页面加载过程中布局的不稳定性。

Real User Monitoring (RUM)

RUM 监控实际用户在生产环境中与网站的互动,收集实时性能数据。它收集的数据包括页面加载时间、资源加载时间、错误日志等,这些数据有助于识别性能问题和用户体验问题。

RUM 实施的一般步骤:
  1. 选择 RUM 工具:如 Google Analytics, New Relic, Datadog, 或 AppDynamics。
  2. 集成 SDK 或 JavaScript 代理:在网站的 或 标签中添加 RUM 供应商提供的 JavaScript 代码片段。
  3. 配置数据收集:设置要收集的性能指标和事件。
  4. 分析数据:在 RUM 平台的仪表板上查看和分析收集到的性能数据。
RUM 数据的关键指标:
  • Page Load Time:从用户请求页面到页面完全加载的时间。
  • Network Requests:页面加载过程中发出的HTTP请求的数量和时间。
  • Error Tracking:捕获和报告运行时错误。
  • User Flows:用户在网站上的导航路径。

结合使用 Lighthouse 和 RUM,开发者可以进行全面的前端性能监控,从开发阶段的静态评估到生产环境中的动态监控,确保网站在各种条件下的性能表现。

使用 Lighthouse 和 RUM 数据改进前端性能

1. 识别性能瓶颈
  • Lighthouse 报告会指出哪些指标低于推荐值,比如 LCP、FCP、TTI 或 CLS。
  • RUM 数据可以揭示用户实际遇到的延迟和错误,帮助定位问题。
2. 优化资源加载
  • 使用懒加载(lazy loading)策略,仅在需要时加载图片和其他非关键资源。
  • 利用预加载(preload)和预读取(prefetch)策略,提前加载重要资源。
  • 压缩和最小化 CSS、JavaScript 和 HTML 文件,减少传输大小。
3. 代码优化
  • 减少 DOM 节点数量,优化布局和样式计算。
  • 使用 Web Workers 分离计算密集型任务,避免阻塞主线程。
  • 优化图像格式,使用 WebP 或 AVIF 格式提高压缩效率。
4. 优化网络性能
  • 使用 CDN(内容分发网络)来缓存静态资源,减少延迟。
  • 利用 HTTP/2 的多路复用,减少连接次数。
  • 设置合理的缓存策略,利用浏览器缓存。
5. 异步加载和按需加载
  • 使用 async 或 defer 属性异步加载外部脚本,避免阻塞 DOM 解析。
  • 对于大型应用,考虑采用路由懒加载,只在用户导航到特定页面时加载相关模块。
6. 修复错误和异常
  • 根据 RUM 数据修复错误,确保用户体验流畅。
  • 实施健康检查,监控服务器和API的响应时间及错误率。
7. 用户体验优化
  • 根据 RUM 数据分析用户行为,优化页面布局和交互设计。
  • 优化首屏加载,确保用户在视觉上看到内容的速度更快。
8. A/B 测试和持续监控
  • 进行 A/B 测试,比较不同优化策略的效果。
  • 定期运行 Lighthouse 审计,持续监控性能变化。

可以使用 Lighthouse 的诊断和 RUM 的实时数据来持续优化前端性能,确保网站或应用提供出色的用户体验。同时,记住性能优化是一个持续的过程,需要定期评估和调整。

使用 Lighthouse 和 RUM 结合持续集成/持续部署 (CI/CD)

1. 集成 Lighthouse 到 CI/CD
  • 在 CI/CD 流程中运行自动化测试,包括 Lighthouse 审计。
  • 例如,在 GitHub Actions、Jenkins 或 CircleCI 中设置脚本,每次提交或部署时运行 Lighthouse。
  • 如果性能评分低于阈值,让构建失败,强制开发者解决性能问题。
2. 自动化性能报告
  • 使用工具(如 lighthouse-ci)生成性能报告,并将其存储在版本控制系统中。
  • 邮件通知团队成员关于性能下降的情况。
3. RUM 数据集成
  • 将 RUM 数据集成到监控工具,如 Grafana 或 Prometheus,以便实时可视化性能指标。
  • 设置警报,当关键性能指标超出预设阈值时自动通知团队。
4. 使用数据驱动决策
  • 分析 Lighthouse 和 RUM 数据,找出性能瓶颈和用户痛点。
  • 根据这些数据制定优化策略,优先处理影响最大的问题。
5. 代码审查
  • 在代码审查流程中,要求提交的代码必须通过 Lighthouse 的性能测试。
  • 这有助于确保新功能或修复不会引入性能问题。
6. 持续监控和反馈循环
  • 创建一个持续的反馈循环,确保性能优化是开发流程的一部分。
  • 定期审查性能指标,讨论可能的改进措施。

通过将 Lighthouse 和 RUM 数据整合到 CI/CD 流程中,你可以确保前端性能始终处于关注的焦点,而且随着代码库的增长和变化,性能不会退化。这不仅可以提高用户体验,还可以降低服务器成本,因为更快的页面加载意味着更少的资源消耗。

高级性能优化策略

1. Server-Side Rendering (SSR) 和预渲染 (Prerendering)
  • SSR 使服务器在客户端渲染之前生成完整的HTML,改善SEO和首屏加载速度。
  • Prerendering 为特定URL预先生成静态HTML,适用于SEO友好的静态页面。
2. Service Worker 和离线支持
  • 使用 Service Worker 缓存静态资源,实现离线访问和更快的回访速度。
  • 更新策略(如 SWR)确保缓存的资源是最新的。
3. Code Splitting 和 Tree Shaking
  • 使用 Webpack 或 Rollup 进行代码分割,仅在需要时加载特定模块。
  • Tree Shaking 优化去除未使用的代码,减小包体积。
4. 响应式图片和媒体
  • 使用 srcset 和 sizes 属性提供不同分辨率的图片,适应不同设备。
  • 使用 <picture> 标签或 object-fit CSS 属性优化图片显示。
5. WebAssembly 和 WASM 库
  • 对计算密集型任务,考虑使用 WebAssembly 提高性能。
  • 使用 WASM 库(如 Rust 或 C/C++ 库的绑定)代替 JavaScript。
6. 浏览器缓存策略
  • 使用 HTTP 响应头(如 Cache-Control 和 ETag)来控制缓存行为。
  • 使用 Service Worker 实现更复杂的缓存策略。
7. 性能预算
  • 设定性能指标目标,如 LCP、TTFB、CLS 等。
  • 当性能指标超出预算时,触发警报并采取行动。
8. 异步加载库和框架
  • 如果可能,延迟加载库和框架,直到它们真正需要时才引入。
  • 使用动态导入 (import() 函数) 实现按需加载。

通过这些高级策略,你可以进一步提升前端性能,特别是在处理复杂的应用和大量用户时。然而,需要注意的是,过度优化可能导致代码复杂性增加,因此在实施时要权衡利弊。始终以用户体验为中心,确保优化措施既有效又可持续。

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

这篇关于前端性能监控:从Lighthouse到Real User Monitoring的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/995208

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

性能测试介绍

性能测试是一种测试方法,旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试,可以确定系统是否能够满足预期的性能要求,找出性能瓶颈和潜在的问题,并进行优化和调整。 发现性能瓶颈:性能测试可以帮助发现系统的性能瓶颈,即系统在高负载或高并发情况下可能出现的问题

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

黑神话,XSKY 星飞全闪单卷性能突破310万

当下,云计算仍然是企业主要的基础架构,随着关键业务的逐步虚拟化和云化,对于块存储的性能要求也日益提高。企业对于低延迟、高稳定性的存储解决方案的需求日益迫切。为了满足这些日益增长的 IO 密集型应用场景,众多云服务提供商正在不断推陈出新,推出具有更低时延和更高 IOPS 性能的云硬盘产品。 8 月 22 日 2024 DTCC 大会上(第十五届中国数据库技术大会),XSKY星辰天合正式公布了基于星

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能