专栏首页黑客下午茶Sentry Web 性能监控 - Web Vitals

Sentry Web 性能监控 - Web Vitals

系列

目录

  • 核心 Web Vitals
    • 最大内容绘制 (LCP)
    • 首次输入延迟 (FID)
    • 累积布局偏移 (CLS)
  • 其它 Web Vitals
    • 首次绘制 (FP)
    • 首次内容绘制 (FCP)
    • 首字节时间 (TTFB)
  • 阈值
  • 分布直方图
  • 浏览器支持

Web Vitals 是谷歌定义的一组度量指标,用于度量渲染时间(render time)、响应时间(response time)和布局偏移(layout shift)。每个数据点都提供了关于应用程序总体性能的见解。

  • https://web.dev/vitals/

浏览器内的 Sentry SDK 收集 Web Vitals 信息(如果支持)并将该信息添加到前端事务(transaction)中。然后将这些重要信息汇总在几个图表中,以便快速了解每个前端事务(transaction)对您的用户的执行情况。

核心 Web Vitals

这些 Web Vitals 被谷歌认为是最重要的,直接衡量用户体验。Google 报告称,截至 20215 月,这些指标也会影响您的搜索排名。

  • Google reports that as of May 2021, these metrics also impact your search ranking
  • https://developers.google.com/search/blog/2020/11/timing-for-page-experience

最大内容绘制 (LCP)

Largest Contentful Paint (LCP) 测量最大内容出现在视口中的渲染时间。这可以是来自文档对象模型(DOM)的任何形式,例如 imageSVGtext block。它是视口中最大的像素区域,因此具有最直观的定义。LCP 帮助开发人员了解用户看到页面上的主要内容需要多长时间。

  • https://web.dev/lcp/

首次输入延迟 (FID)

First Input Delay (FID) 测量用户尝试与视口交互时的响应时间。操作可能包括单击按钮、链接或其他自定义 Javascript controllerFID 提供有关应用程序页面上成功或不成功交互的关键数据。

  • https://web.dev/fid/

累积布局偏移 (CLS)

Cumulative Layout Shift (CLS) 是渲染过程中每个意外元素偏移的单个布局偏移分数的总和。想象一下导航到一篇文章并尝试在页面完成加载之前单击链接。在您的光标到达那里之前,链接可能由于图像渲染而向下移动。CLS 分数代表了破坏性和视觉不稳定转变的程度,而不是使用持续时间来表示此 Web Vital

使用影响(impact)和距离(distance)分数计算每个布局偏移分数。影响分数是元素在两个渲染帧之间影响的总可见区域。距离分数测量它相对于视口移动的距离。

Layout Shift Score = Impact Fraction * Distance Fraction
布局移位得分 = 影响分数 * 距离分数

让我们看一下上面的例子,它有一个不稳定的元素——主体文本(body text)。影响部分大约是页面的 50%,并将主体文本向下移动 20%。布局偏移得分为0.1,等于 0.5*0.2 的乘积。因此,CLS0.1

其它 Web Vitals

这些 Web Vitals 通常不太容易被用户看到,但对于排除 Core Web Vitals 的问题很有用。

首次绘制 (FP)

First Paint (FP) 测量第一个像素出现在视口中所花费的时间,呈现与先前显示内容相比的任何视觉变化。这可以是来自文档对象模型 (DOM) 的任何形式,例如 background colorcanvasimageFP 可帮助开发人员了解渲染页面是否发生了任何意外。

首次内容绘制 (FCP)

First Contentful Paint (FCP) 测量第一个内容在视口中渲染的时间。这可以是来自文档对象模型 (DOM) 的任何形式,例如 imageSVGtext blockFCP 经常与 First Paint (FP) 重叠。FCP 帮助开发人员了解用户在页面上看到任何内容更改需要多长时间。

首字节时间 (TTFB)

Time To First Byte (TTFB) 测量用户浏览器接收页面内容的第一个字节所需的时间。TTFB 帮助开发人员了解他们的缓慢是由初始响应(initial response)引起的还是由于渲染阻塞内容(render-blocking content)引起的。

阈值

Google 的 “好(Good)”“需要改进(Needs Improvement)”“差(Poor)”阈值用于将数据点分类为绿色、黄色和红色,用于对应的 Web Vitals“Needs improvement”Sentry 中被称为 “Meh”

Web Vital

Good

Meh

Poor

最大内容绘制 (LCP)

<= 2.5s

<= 4s

> 4s

首次输入延迟 (FID)

<= 100ms

<= 300ms

> 300ms

累积布局偏移 (CLS)

<= 0.1

<= 0.25

> 0.25

首次绘制 (FP)

<= 1s

<= 3s

> 3s

首次内容绘制 (FCP)

<= 1s

<= 3s

> 3s

首字节时间 (TTFB)

<= 100ms

<= 200ms

> 600ms

一些 Web Vitals(例如 FPFCPLCPTTFB)是相对于 transaction 的开始进行测量的。与使用其他工具(如 Lighthouse)生成的值相比,值可能会有所不同。 lighthouse:https://github.com/GoogleChrome/lighthouse

分布直方图

Web Vitals 直方图显示数据分布,它可以通过揭示异常来帮助您识别和诊断前端性能问题。

默认情况下,将从直方图中排除异常值,以提供这些重要信息的更详细视图。离群值(Outlier)是使用上外框(upper outer fence a)作为上限来确定的,高于上限的任何数据点都被视为离群(outlier)值。

  • upper outer fence:https://en.wikipedia.org/wiki/Outlier#Tukey's_fences

每个 Web Vital 的垂直标记是观察到的数据点的第 75 个百分位。换句话说,25% 的记录值超过了该数量。

如果您注意到任何直方图上的感兴趣区域,请单击并拖动该区域以放大以获得更详细的视图。您可能还想在直方图中查看与 transaction 相关的更多信息。单击所选 Web Vital 下方的 “Open in Discover” 以构建自定义查询以进行进一步调查。有关更多详细信息,请参阅 Discover Query Builder 的完整文档。

  • Query Builder:https://docs.sentry.io/product/discover-queries/query-builder/

如果您希望查看所有可用数据,请打开下拉菜单并单击 “View All”。单击 “View All” 时,您可能会看到极端异常值。您可以单击并拖动某个区域以放大以获得更详细的视图。

浏览器支持

Web Vital

Chrome

Edge

Opera

Firefox

Safari

IE

最大内容绘制 (LCP)

首次输入延迟 (FID)

累积布局偏移 (CLS)

首次绘制 (FP)

首次内容绘制 (FCP)

首字节时间 (TTFB)

本文分享自微信公众号 - 黑客下午茶(hi-weishao),作者:为少

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-09-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sentry Web 性能监控 - Metrics

    Apdex 是一种行业标准指标,用于根据您的应用程序响应时间(response time)跟踪和衡量用户满意度(satisfaction)。Apdex 分数提供...

    为少
  • Sentry Web 性能监控 - Trends

    在 Performance 主页上,您可以通过切换 Performance 主页右上角的选项卡来找到 Trends View。此页面显示随着时间的推移其性能发生...

    为少
  • 性能优化到底应该怎么做

    TL;DR: 当我们在做性能优化的时候,我们究竟在优化什么?做性能优化需不需要了解底层的东西?需要了解到什么程度?浏览器底层是一个什么架构?浏览器渲染的本质究竟...

    010101011001
  • Docker部署sentry

    sentry概述   Sentry是程序的哨兵,它可以监控我们在生产环境中项目的运行状态,一旦某段代码运行报错或者异常,会第一时间把报错的路由异常文件,请求方式...

    院长技术
  • 超全对照!前端监控的性能指标与数据采集

    ? 导语 | 前端监控可以让你更了解自己的网站,更早地发现和解决存在的问题,再通过优化来提升网站的性能和体验。那么,如何衡量一个网站的好坏?有什么指标?性能数...

    腾小云
  • 使用 web-vitals 对项目的性能进行测试

      web-vitals是Google发起的,旨在提供各种质量信号的统一指南,我们相信这些质量信号对提供出色的网络用户体验至关重要。其可获取三个关键指标(CLS...

    小老鼠
  • 业务日志监控工具Sentry介绍

    “ 我们在完成业务系统上线后除了正常关注系统进程、内存、CPU等这些物理指标并进行监控外,往往也需要观察线上业务日志的运行情况,特别是新系统上线后的业务异常日志...

    用户5927304
  • 前端监控那些事

    Sentry官方服务需要付费,建议自行搭建,可以通过docker去部署搭建,不作详细说明介绍,官方链接 点我?

    树酱
  • 基于 RUM 的前端优化理论与实践 - 性能篇(一)

    作者:李振,腾讯云前端性能监控负责人 前言 对于前端来说,最重要的是体验,而在前端体验中,最为核心的就是性能。 相信大多数用户接入前端性能监控(RUM)都...

    腾讯云监控团队
  • 基于RUM的前端优化理论与实践-性能篇

    ? 前言 对于前端来说,最重要的是体验,而在前端体验中,最为核心的就是性能。  相信大多数用户接入前端性能监控(RUM)都是为了通过RUM质量评价体系来验证...

    腾小云
  • Installing sentry 9.0.0 with postgresql in Centos7

    Sentry是一个开源错误跟踪工具,可帮助您实时监控和修复bug。支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架...

    阿dai学长
  • sentry笔记整理

    使用nginx接受请求并对其进行转发。并使用了ngx_http_realip_module模块转发真实请求IP。

    魔王卷子
  • 记一次sentry部署过程

    程序员同行者
  • 解读新一代 Web 性能体验和质量指标

    衡量一个 Web 页面的体验和质量一直有非常多的工具和指标 ... 每次我们去关注这些指标的时候都会非常痛苦,因为这些指标真的是又多又难理解,测量这些指标的工具...

    ConardLi
  • 从零构建Sentry v10 进行异常上报

    Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。

    w候人兮猗
  • 如何重新认知性能优化及其度量方法

    我是来自 UC 内核团队的林洁伟,海愚是我的花名。今天我将分享的主题是如何重新认识性能优化及其度量方法。

    winty
  • 从零构建Sentry v10 进行异常上报

    Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。

    w候人兮猗
  • Centos7使用docker搭建Sentry

      Sentry 是一款基于 Django实现的错误日志收集和聚合的平台,它是 Python 实现的,但是其日志监控功能却不局限于python,对诸如 Node...

    用户3773636
  • Sentry(v20.12.1) K8S 云原生架构探索,Sentry JavaScript SDK 三种安装加载方式

    Sentry 支持通过 CDN 加载其 JavaScript SDK。通常,我们建议使用 npm 软件包(@sentry/browser)作为 CDN 创建方案...

    为少

扫码关注云+社区

领取腾讯云代金券