系列

目录

  • 核心 Web Vitals

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

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

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

核心 Web Vitals

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

最大内容绘制 (LCP)

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

首次输入延迟 (FID)

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

累积布局偏移 (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)值。

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

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

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

浏览器支持

Web Vital Chrome Edge Opera Firefox Safari IE
最大内容绘制 (LCP) - - -
首次输入延迟 (FID)
累积布局偏移 (CLS) - - -
首次绘制 (FP) - - -
首次内容绘制 (FCP) -
首字节时间 (TTFB)
公众号:黑客下午茶

Sentry Web 性能监控 - Web Vitals的更多相关文章

  1. Sentry Web 性能监控 - Metrics

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  2. Sentry Web 性能监控 - Trends

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  3. [转]Web性能监控自动化探索之路–初识WebPageTest

    本文转自:http://www.webryan.net/2013/01/use-webpagetest-to-analyze-web-performance/ 无论是从Velocity 2012还是在 ...

  4. web性能监控与分析

    注:原文为:andyguo: <web性能监控与分析> 性能测试需要使用不同的工具,结合系统日志,监控服务器.应用等方面的多项指标.以下阐述监控指标.监控工具.瓶颈分析. 服务端监控指标 ...

  5. [转]基于phantomJS实现web性能监控

    1.web性能监控背景描述 上期分享的<Web性能监控自动化探索之路–初识WebPageTest>从依赖webpagetest的角度给出了做性能日常检查的方案,但由于依赖结构相对复杂我们需 ...

  6. [原创]HTML5 web性能监控策略

    web性能重要指标--时长 通常在监控前端页面性能的时候,我们会需要获取到很多的时间戳,比如用户按下回车的时候开始计时,但这个时候,我们统计的js代码并没有加载过来,也无法读取到相关的信息.在HTML ...

  7. 性能监控系统 | 从0到1 搭建Web性能监控系统

    工具介绍 1. Statsd 是一个使用Node开发网络守护进程,它的特点是通过UDP(性能好,及时挂了也不影响主服务)或者TCP来监听各种数据信息,然后发送聚合数据到后端服务进行处理.常见支持的「G ...

  8. 实用|从0到1 搭建Web性能监控系统

    工具介绍 1. Statsd 是一个使用Node开发网络守护进程,它的特点是通过UDP(性能好,及时挂了也不影响主服务)或者TCP来监听各种数据信息,然后发送聚合数据到后端服务进行处理. 常见支持的「 ...

  9. 应用性能监控-web系统

    1 系统规划 参考https://mp.weixin.qq.com/s/UlnHOaN0xaA0jfg5CEmLRA 1.1 数据采集的原则: 数据采集,说起来比较简单,只要把数据报上来就行,具体怎么 ...

随机推荐

  1. vsCode开发flutter项目

    Visual Studio Code 安装: 下载链接:https://code.visualstudio.com/ 下载完成后根据步骤自行安装.     使用vsCode开发flutter项目需要部 ...

  2. thinkphp 初始化

    public function _initialize(){ //$top_img = M('adv')->where(array('adv_id'=>1057))->find(); ...

  3. 面试官:展开说说,Spring中Bean对象是如何通过注解注入的?

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 章节目录(手写Spring,让你了解更多) [x] 第 01 章:开篇介绍,我要带你撸 Spr ...

  4. 跟Waf斗智斗勇的一天

    差点心态爆炸 幸亏整出来了... 最近快放寒假了..临近高考不到最后一星期绝对不学习.. 挖下SRC 这家自带的waf头疼死我了 想几次Fuzz全都撞壁了 然后发现了这家waf的规则 信息搜集不说了 ...

  5. 干了快3年Android了,感觉自己的职业生涯已经快凉了

    背景 首先我是个菜鸡,工资也低的一笔. 刚毕业时候在一家国企上班干 app 开发,干了快两年的时候,跳槽到了一家伪大厂干安全.投了不少简历都没有回音,只有这加伪大厂要我就来了.当时说好了会接触一些底层 ...

  6. [C++]-map 映射

    map用来存储排序后的由键和值组成的项的集合.键必须唯一,不同的键可以对应同一个值,在map中键保持逻辑排序后的顺序(以键为标准). 代码 #include<iostream> #incl ...

  7. 模拟退火 Simulated annealing

    模拟退火 Simulated annealing 看看有空把图片完善一下好了 模拟退火算法的一些背景 既然要说模拟退火算法,就应该说一下模拟退火算法的背景,模拟退火算法是局部搜索算法的一种扩展,该算法 ...

  8. 流动的观察者模式 | Flutter 设计模式

    观察者模式,又称发布订阅模式,是一种行为设计模式--你可以定义一种订阅机制,可在对象事件发生时通知多个 观察 该对象的其他对象. 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主 ...

  9. Kurento实战之四:应用开发指南

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. NOIP 模拟 10 考试总结

    T1 一道很妙的题,打暴力分也很多,但是考试的时候忘开 long long 了. 题解 T2 一道挺水的题,不过...(打挂了) 题解 T3 此题甚妙,转化真多,不过对思维是一个非常大的扩展 题解 考 ...