当前位置: 首页 > Web前端 > HTML5

性能指标介绍

时间:2023-04-04 22:57:55 HTML5

在PerformanceGuide中介绍了以用户为中心的指导模型,然后看了一些实测中的性能指标。原来User-centricperformancemetrics前段时间还在WebFundamentals下,今天去看的时候变成外链了,不过中文版还在WebFundamentals下。以下是个人理解的部分翻译。以用户为中心的性能指标原始最后更新时间:2019年11月8日翻译时。OriginMyGitHubText我们都听说过性能的重要性。但是,当我们谈论性能和使网站“快速”时,我们究竟指的是什么?事实上,性能是相对的:一个站点可能对一个用户来说很快(在具有强大设备的快速网络上),但对另一个用户来说可能很快(在具有低端设备的慢速网络上)。慢的。两个站点可能会在完全相同的时间内完成加载,但一个似乎加载速度更快(如果它以增量方式加载内容,而不是等到最后才显示任何内容)。网站可能看起来加载速度很快,但随后对用户交互的响应却很慢(或根本不响应)。因此,当谈到绩效时,使用精确和可量化的客观标准来衡量它很重要。这些标准称为指标。但是仅仅因为一个指标是基于客观标准并且可以定量测量的,并不一定意味着这些测量是有用的。定义指标从历史上看,Web性能在早期是通过加载事件来衡量的。然而,虽然加载是页面生命周期中定义明确的时刻,但这个时刻不一定对应于用户关心的任何事情。例如,服务器可以响应一个立即触发加载事件的最小页面,然后异步获取页面上的所有内容并显示它,可能在加载事件触发几秒后显示。虽然该页面在技术上具有快速加载时间,但这个时间与用户实际体验页面加载的方式不符。在过去几年中,Chrome团队成员与W3C网络性能工作组合作,一直致力于标准化一组新的API和指标,以更准确地衡量用户如何体验网页性能。为了帮助确保指标与用户相关,我们围绕几个关键问题构建了指标:问题描述它正在发生吗?导航启动成功了吗?服务器有响应吗?有用吗?是否有足够的内容供用户使用?可以用吗?用户是否可以与页面交互,或者页面是否繁忙?赏心悦目吗?互动是否流畅自然,没有滞后和干扰?Howmetricsaremeasured(如何衡量指标)衡量性能标准通常采用以下方式:在实验室中:使用工具在一致且受控的环境中模拟页面加载在现场:真实用户实际加载页面并与之交互。这些选项中的任何一个都不一定比另一个好或坏,事实上,您通常希望同时使用这两个选项以确保良好的性能。在实验室(inthelaboratory)开发新功能时,需要在实验室进行性能测试。在产品中发布新功能之前,不可能在真实用户身上测量新功能的性能特征,因此在功能发布之前在实验室中对其进行测试是防止性能退化的最佳方法。在现场另一方面,虽然在实验室中测试性能是一种合理的方法,但它不一定反映所有用户在现场对您网站的体验。站点性能可能会因用户的设备功能及其网络状况而有很大差异。用户是否(以及如何)与页面交互也很重要。此外,页面加载可能是不确定的。例如,加载个性化或广告的站点可能会在用户之间体验截然不同的性能特征。实验室测试不会捕获这些差异。真正了解您的网站对用户的表现如何的唯一方法是衡量其在用户加载和与之交互时的性能。这种类型的测量通常称为Realusermonitoring,简称RUM。指标类型还有一些其他类型的指标与用户如何看待性能有关。感知加载速度:页面加载并将其所有视觉元素呈现到屏幕的速度。加载响应:页面加载和执行任何必要的JavaScript代码的速度,以便组件快速响应用户交互。运行时响应能力:页面加载后,页面响应用户交互的速度。视觉稳定性:页面上的元素是否以用户不期望的方式移动并可能干扰他们的交互?平滑度:过渡和动画是否以一致的帧速率呈现并从一种状态平滑过渡到另一种状态?从上面提供的几种性能指标可以清楚地知道,没有任何一种指标可以捕捉到页面的所有性能特征。要衡量的重要指标(关键指标)Firstcontentfulpaint(FCP):衡量从页面开始加载到页面任何部分呈现在屏幕上的时间。(lab,field)Largestcontentfulpaint(LCP):测量从页面开始加载到最大文本块或图像元素呈现到屏幕的时间。(实验室,现场)首次输入延迟(FID):测量从用户第一次与您的站点交互到浏览器可以实际响应该交互的时间。(字段)交互时间(TTI):测量从页面开始加载到呈现可视化、加载其初始化脚本(如果有)并且能够可靠快速地响应用户输入的时间。(lab)总阻塞时间(TBT):测量FCP和TTI之间的总时间,长时间阻塞主线程导致输入响应阻塞。(实验室)累积布局偏移(CLS):测量从页面开始加载到其生命周期状态更改为“隐藏”之间发生的所有意外布局偏移的累积分数。(实验室、现场)虽然此列表包括与用户相关的许多不同方面的指标,但它并未涵盖所有方面(例如,当前未涵盖运行时响应性和流畅性)。在某些情况下,将引入新的指标来填补缺失的部分,但在其他情况下,最好的指标是为您的网站定制的。自定义指标上面列出的性能指标提供了对Web上大多数站点的性能特征的全面了解。他们还可以为站点提供一组通用指标,以将其性能与竞争对手进行比较。然而,有时一个站点在某些方面是独一无二的,需要额外的指标来捕捉性能全景。例如,在Largestcontentfulpaint(LCP)中,最大元素可能不是页面主要内容的一部分,因此LCP可能不相关。针对这种情况,WebPerformanceWorkingGroup还标准化了对实现自定义指标有用的低级API:UserTimingAPILongTasksAPIElementTimingAPINavigationTimingAPIResourceTimingAPIServertiming可以在CustomMetricsintroduction中更详细地查看。参考以用户为中心的性能指标