前端监控性能指标 | 青训营笔记

用户9775167859734
105 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第4天

本文主要介绍前端监控的概念、前端监控的方面和常用性能指标。

前端监控的概念

在浏览器中，尽可能采集从输入URL到页面展示这一过程以及后续用户交互产出的性能指标与发生的异常事件并上报到平台，完成数据消费。

前端监控通过对页面数据的采集和上报，帮助开发者更快速地对质量差的页面进行分析与归因，可以有效监控页面质量。

页面质量差，对应的原因有：

  • 打开网页慢 ———— 页面某个关键资源渲染太慢

  • 交互卡顿 ———— 页面同步计算任务太重，阻塞渲染

  • 资源加载失败 ———— 客户端网络状态差，或上游服务节点异常

  • 页面白屏 ———— 页面脚本执行失败、关键资源加载失败、请求失败等

前端监控的方面

性能指标

  • 重要指标
    • 可交互性
      • 卡顿监控
        • 通常由业务逻辑引起，关联用户行为可定位问题。
      • 请求性能
        • 长期关注，异动分析，以此为基准衡量服务端性能。
    • 服务稳定性
      • 请求成功率
        • 主要关注页面级别和接口级别两个维度。
    • 加载速度
      • 首屏性能
        • 根据timing各阶段耗时，明确得出可优化的阶段，指导优化。
    • 可用性
      • 渲染错误/白屏
        • 关联异常类数据，包括JS错误，静态资源错误，请求错误等。
      • 请求错误
        • 长期关注错误率的变更，衡量产品质量；短期关注波动，关联线上问题。
      • JS错误
        • sourcemap反解&&issue管理。
      • 静态资源错误
        • 着重展示能定位到问题的静态资源，降低噪音。
    • 业务数据
      • PV/UV
        • 用户分析、留存、转化。
      • 自定义事件/打点

异常事件

  • 静态资源错误
  • 请求异常
  • JS错误
  • 白屏异常

用户行为

  • PV/UV（浏览量和点击量）
  • 用户在页面停留的时间
  • 用户访问网页的入口
  • 用户在页面触发的行为
  • ······

常用性能指标

  • Web性能标准
  • 传统的性能指标
  • 以用户为中心的性能指标

创建以用户为中心的指标，把加载速度优化的更快，同时考虑用户的体验感。有四个方面：

  • FP（First Paint）：首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白屏。
  • FCP（First Contentful Paint）：首次有内容渲染的时间点。eg：网页上开始有搜索框了。但存在的问题是通常与用户无关。
  • FMP（First Meaningful Paint）：首次绘制有意义内容的时间点，但存在的问题是非标准化且难以在浏览器之间统一实现。
  • SI（Speed Index）：跟踪在视口中加载内容的视觉进程，衡量页面可视区域加载速度，帮助检测页面的加载体验差异。页面内容渲染率越早达到较高比值，体验感越好。但存在的问题是指标较复杂，计算密集，不可用于线上监控。
  • LCP（Largest Contentful Paint）：最大的内容（页面内容中最有用的元素）在可视区域内变得可见的时间点。

与FCP、FMP、SI相比，LCP的优点是容易理解，给出与FMP相似的结果，容易计算和上报。

  • TTI（Time to Interactive）：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。TTI反映页面的可用性，其值越小，代表用户可更早地操作页面，用户体验就更好。
  • TBT（Total Blocking Time）：量化主线程在空闲之前的繁忙程度，有助于了解在加载期间，页面无法响应用户输入的时间。

长任务：一个任务在主线程上运行超过50ms。超过50ms后的任务耗时，都算作任务的阻塞时间。一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间之和。

  • FID（First Input Delay）：测量从用户首次与页面交互，直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。
  • CLS（Cumulative Layout Shift）：量化在页面加载期间，视口中元素的移动程度。

总结

学习了前端监控性能指标这方面的具体内容，深刻认识到前端监控对页面质量有多重要，开发好一个SDK有助于保障页面的质量。

avatar
文章
阅读
粉丝