您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

Web性能评价指标

时间:2023-03-31 12:04:18  来源:微信公众号  作者:Thoughtworks洞见

作者 | 李玲

同一个网站,有的用户说好用,有的用户投诉慢,Web性能差吗?

从用户角度出发,收集用户的使用反馈,很多吐槽都提到了慢,经调研用户最关注的是速度,所以Web性能主要指网站加载、响应速度。它包括客观的指标和用户在访问应用时所感受到的性能情况。主观的用户性能感知受到用户设备、网速快慢和用户的主观感受影响,导致性能是相对的。

而谈论性能,重要的是精确,并且根据能够进行定量测量的客观标准来论及性能。通过什么信息来分析系统性能,如何判定好坏?google提供了思考性能问题的方法论,以用户为中心的性能模型 - RAIL。

RAIL性能模型

 

用户感知到的“性能”是什么?

  • 0 - 16ms 动画流畅
  • 0 - 100ms 即时响应
  • 1s + 慢,用户失去耐心
  • 10s 以上 非常慢,用户可能放弃使用

将用户体验根据关键动作分为4个独立的模块:response (响应)、animation(动画)、idle(浏览器空置状态)和load(加载),结合用户对时间的感知,明确了对用户体验影响最大的性能目标。

如果在每个模块上,都可以达到性能优化的目标值,那么最终用户感受到的将会是极致的体验。

目标与准则

 

(1) Response 100ms内完成交互

  • 50ms内处理完事件
  • 对耗时长的操作提供即时反馈,比如说“加载中”的标识。如果用户点击后没有得到任何反馈,用户会质疑系统是否有问题

 

(2) RAnimation 流畅的视觉效果

  • 动画并不止酷炫的效果,只要是视图变化都算动画,包括滚动,拖拽
  • 16ms内生成一帧,达到60fps

 

(3) RIdle 即时响应用户

  • 尽可能增加空闲时间
  • 利用空闲时间
  • 始终以用户操作为最高优先级

 

(4) RLoad 5s内可操作

  • 1s内渲染出主要内容
  • 如果无法快速展示页面全部内容,可以逐步渲染,使其看起来渲染快

与用户体验相关的关键性能指标

 

  • 在 100 毫秒内响应用户输入。
  • 播放动画或执行滚动时,在 10 毫秒内生成一帧。
  • 最大限度延长主线程空闲时间。
  • 在 5000 毫秒内加载交互式内容。

RAIL性能模型提供了分析系统性能的思路,与用户体验相关的关键性能指标和实现目标的准则建议。了解用户对不同关键动作所期望的性能,使用Chrome DevTools对加载或运行时的活动进行深入分析,识别性能问题。

Google又提出了更明细的以用户为中心的性能指标,帮助我们更好的了解真实用户对Web的整体体验。

以用户为中心的性能指标

 

如何定义性能指标?

 

从用户角度出发,考虑以下关键问题,从用户体验和关心的关键节点定义性能指标

  • 是否正在发生?导航是否成功启动?服务器有响应吗? 
  • 是否有用?是否渲染了足够的内容让用户可以深入其中? 
  • 是否可用?页面是否繁忙,用户是否可以与页面进行交互? 
  • 是否令人愉快?交互是否流畅自然,没有延迟和卡顿?

性能指标

 

  •  First contentful paint 首次内容绘制 (FCP):页面开始加载到页面显示任何内容的时间。

 代表服务器有响应,增大用户继续等待的信心

  •  Largest contentful paint 最大内容绘制 (LCP):页面开始加载到最大文本块或图像元素在屏幕上完成渲染的时间。

 代表有用,有助于让用户确信页面有效

  •  First input delay 首次输入延迟 (FID):用户第一次与网站交互(比如单击链接、点按按钮等)直到浏览器实际能够对交互做出响应所经过的时间。

 确保页面的有效性、可交互性

  •  Time to Interactive 可交互时间 (TTI):页面开始加载到能够快速、可靠地响应用户输入所需的时间。

 确保页面的有效性、可交互性

  •  Total blocking time 总阻塞时间 (TBT):FCP 与 TTI 之间主线程被阻塞的总时间,期间无法可靠稳定地响应用户。 

 确保页面的可用性,体现了不可交互程度的严重性。

  •  Cumulative layout shift 累积布局偏移 (CLS):页面在开始加载和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数。

 确保页面令人愉快

图片

图片来源:https://www.lambdatest.com/blog/core-web-vitals-expert-tips-to-improve-website-performance/

程序员角度解读

 

下图展示了加载一个页面,浏览器主线程和网络的使用情况,以及各个指标的耗时。

  • 用户访问页面,导航开始,浏览器与服务器建立连接,获取html资源,再发出数个网络请求来获取所需的js,css资源。
  • 这些资源下载完毕后,会在主线程上解析处理执行。这就导致主线程会阶段性地处于忙碌状态(图中米黄色任务块)。
  • DOM树构建完成后,开始绘制,页面渲染出部分内容。首次内容绘制节点即为FCP。
  • 如果用户在FCP后尝试与页面进行交互(例如单击一个按钮),由于主线程正处于忙碌状态,响应会有一段延迟,延迟的这段时间即为首次输入延迟FID。用户会将较长的延迟认为页面响应缓慢或者页面已损坏,因此很可能直接离开。
  • 5秒安静窗口:没有长任务切不超过两个正在处理的网络GET请求,此时浏览器主线程空闲并能可靠地响应用户。
  • 可交互时间TTI是安静窗口前的最后一个长任务的结束时间,是页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需的时间。TTI越小越好,说明用户等待的时间短。
  • 用户收到的阻塞程度则由TTB来体现,每当出现长任务(在主线程上运行超过 50 毫秒的任务)时,主线程都被视作"阻塞状态",浏览器无法中断正在进行的任务,长任务超过 50 毫秒的部分为阻塞时间,总阻塞时间是在 FCP 和 TTI 之间发生的每个长任务的阻塞时间总和,体现了不可交互程度的严重性。

 

图片

 

图片来源:https://web.dev/fid/

指标阈值

 

Google将用户体验的质量分为三个等级:好、需要改进或差,并设置了以下阈值:

 

图片

图片来源:https://developers.google.com/speed/docs/insights/v5/about

 

这些阈值可以作为行业性能基线,比较我们系统性能指标得分和这些阈值可以了解我们系统对应性能指标的好坏。

自定义性能指标

 

以用户为中心的性能指标提供了很好的性能基线,但很多情况我们需要测量更多的指标来刻画网站的完整体验。例如:

加载资源的缓存命中率 :缓存机制设置的是否合理

  • 长任务 :运行开销大的代码是否阻塞主线程,比如频繁计算/过滤50M的数据
  • 元素渲染时间:长列表需要多久能绘制到页面上
  • 服务器响应时间:CDN是否正确设置
  • API的耗时:在用户使用应用的生命周期中,增删改查操作占据很大的比例。用户也许能忍受用5分钟打开一个页面,但无法接受每次提交都要等很久。API也是我们分析性能的重点。

根据系统和需要评估的性能,自定义性能指标,更全面地衡量系统性能。

小结

 

遇见用户抱怨性能时,不要先入为主地判定性能差,逐个排查系统可能有的性能问题,优化非最佳实践。而应该理性地以用户为中心,收集真实用户数据,衡量系统性能好坏。

从RAIL性能模型中我们了解用户眼中的性能意味着什么。用户对性能延迟的感知,Web应用生命周期中的关键动作响应、动画,空闲,加载的期望阈值,与用户体验相关的关键性能指标。

以用户为中心的性能指标更深入地展示了用户在访问页面各个阶段的体验和预期。

还可以自定义性能指标,定制化衡量我们系统的性能。

性能的好坏并不能由某一个性能指标所决定,它是综合复杂的,需要结合所有性能指标并基于权重来计算最终性能得分。

了解Web性能指标,有助于我们理解用户眼中的性能,读懂性能数据,才能发现性能瓶颈。



Tags:Web   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Web Components实践:如何搭建一个框架无关的AI组件库
一、让人又爱又恨的Web ComponentsWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素,这些元素可以在不同的Web应用程序中重复使用,并且...【详细内容】
2024-04-03  Search: Web  点击:(8)  评论:(0)  加入收藏
Web3如何颠覆传统互联网
随着科技的迅速发展,Web3正逐渐成为人们关注的焦点。与传统的Web2相比,Web3代表了一种全新的互联网模式,其潜力和影响力引发了人们对未来的期待和探索。本文将深入探讨Web3如何...【详细内容】
2024-03-29  Search: Web  点击:(7)  评论:(0)  加入收藏
数字生活的未来:探索Web3的全新世界
随着科技的飞速发展,我们正迈向一个数字化的未来。而在这个数字化的时代,Web3技术的崛起正引领着我们进入一个全新的世界。本文将深入探讨Web3技术的特点以及它给我们带来的全...【详细内容】
2024-03-14  Search: Web  点击:(16)  评论:(0)  加入收藏
Web3:数字身份与隐私保护的新篇章
1. 数字身份验证的革新在传统互联网上,个人的数字身份通常由中心化的身份验证机构控制,存在安全性和隐私保护的风险。而在Web3中,基于区块链技术的去中心化身份验证方案正在兴...【详细内容】
2024-03-12  Search: Web  点击:(24)  评论:(0)  加入收藏
GitHub顶流"Web OS"——运行于浏览器的桌面操作系统、用户超100万、原生jQuery和JS编写
Puter 是近日在 GitHub 上最受欢迎的一款开源项目,正式开源还没到一周 ——star 数就已接近 7k。作者表示这个项目已开发 3 年,并获得了超过 100 万用户。根据介绍,P...【详细内容】
2024-03-10  Search: Web  点击:(17)  评论:(0)  加入收藏
详解基于SpringBoot的WebSocket应用开发
在现代Web应用中,实时交互和数据推送的需求日益增长。WebSocket协议作为一种全双工通信协议,允许服务端与客户端之间建立持久性的连接,实现实时、双向的数据传输,极大地提升了用...【详细内容】
2024-01-30  Search: Web  点击:(17)  评论:(0)  加入收藏
Spring Boot虚拟线程的性能还不如Webflux?
早上看到一篇关于Spring Boot虚拟线程和Webflux性能对比的文章,觉得还不错。内容较长,抓重点给大家介绍一下这篇文章的核心内容,方便大家快速阅读。测试场景作者采用了一个尽可...【详细内容】
2024-01-10  Search: Web  点击:(115)  评论:(0)  加入收藏
构建 Web API 的两种流行选择:REST vs GraphQL
在 RESTful 和 GraphQL API 之间的选择取决于您的具体用例。RESTful API 适用于需要高可伸缩性的简单应用程序,而 GraphQL 则适用于具有不同数据需求的复杂应用程序。简介RES...【详细内容】
2024-01-09  Search: Web  点击:(64)  评论:(0)  加入收藏
浅谈ArkUI之Web组件的基础用法
最近研究了ArkUI中的一些常用组件,其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数,以及基本用法。先来一个AI画的Web组件助助兴(好吧,不能说毫无关系,只...【详细内容】
2023-12-29  Search: Web  点击:(97)  评论:(0)  加入收藏
系统掌握破解Web端反爬技术
系统掌握破解反爬技能------------------下栽地址:https://www.itwangzi.cn/2547.html------------------ User-Agent:每个浏览器或爬虫程序都有一个User-Agent标识,服务器可以...【详细内容】
2023-12-27  Search: Web  点击:(71)  评论:(0)  加入收藏
▌简易百科推荐
访问网站显示不安全是什么原因?怎么解决?
访问网站时显示“不安全”,主要原因以及解决办法: 1.没用HTTPS加密:网站还在用老的HTTP协议,数据传输没加密,容易被人偷看或篡改。解决办法是网站管理员启用HTTPS,也就是给网站装...【详细内容】
2024-04-08  JOYSSL爆爆    Tags:网站   点击:(7)  评论:(0)  加入收藏
SSL证书过期后网站还能正常访问吗
当SSL证书过期后,尽管网站的服务器仍然可以处理请求并提供服务,但是浏览器会在尝试建立安全连接时检测到证书已过期,并显示警告信息告知用户该网站的安全证书已过期。这会严重...【详细内容】
2024-03-27    见方天地  Tags:SSL证书   点击:(12)  评论:(0)  加入收藏
HTTPS网站怎么实现
HTTP协议迁移到HTTPS,以提供更加安全的网络环境并增强用户信任。那么,如何将一个使用HTTP的网站安全升级到HTTPS呢?我们需要理解HTTP和HTTPS的区别。HTTP,即超文本传输协议,是一...【详细内容】
2024-03-27  倏然间    Tags:HTTPS   点击:(6)  评论:(0)  加入收藏
SSL证书即将过期,不更新可以吗?
SSL证书是用来保护网站数据传输安全的重要工具,通过数据加密和身份认证两大功能,为网站提供了一个安全、可信的网络环境。由正规CA机构所颁发的SSL证书都具有一定的使用期限,通...【详细内容】
2024-03-27  帝恩思DNS    Tags:SSL证书   点击:(7)  评论:(0)  加入收藏
网站运营的好与坏主要决定因素是内容与seo优化
在这个信息爆炸的时代,网站如雨后春笋般涌现,如何在众多网站中脱颖而出,吸引更多的访问者,成为了每一个网站运营者关心的问题。我们不禁要问,是什么决定了网站运营的好与坏呢?答案...【详细内容】
2024-03-26  易华合讯    Tags:网站运营   点击:(10)  评论:(0)  加入收藏
网站制作不再难:小白也能上手的建站教程
在互联网高速发展的时代,网站已成为企业、个人展示自身形象和实力的重要窗口。过去,网站制作对于许多人来说是一项技术活,需要专业的知识和经验。但随着技术的进步,现在即便是没...【详细内容】
2024-03-24  一度旭展互联网科技    Tags:网站制作   点击:(6)  评论:(0)  加入收藏
想建个网站赚钱?先来看看这篇建站指南吧
随着互联网的飞速发展,越来越多的人希望通过建立自己的网站来实现创业梦想或者赚取额外的收入。但建站并非一蹴而就的简单事情,它需要综合策划、设计、技术和运营等多方面的知...【详细内容】
2024-03-21  一度旭展互联网科技    Tags:网站   点击:(5)  评论:(0)  加入收藏
个人站长的出路在哪?
个人站长的出路在于不断适应互联网的发展趋势,积极寻求创新和变革。以下是一些个人站长可以考虑的出路: 转型为内容创作者:随着内容营销的兴起,越来越多的企业和个人开始注重内...【详细内容】
2024-02-29    简易百科  Tags:个人站长   点击:(39)  评论:(0)  加入收藏
网络环境和用户需求不断变化,个人站长该怎么办?
个人站长是一个相对特殊的群体,他们通常以个人身份独立运营网站,没有大型企业或组织的支持。由于缺乏资源和大企业的光环,个人站长需要更加注重策略和技巧,才能在竞争激烈的网络...【详细内容】
2024-02-29    简易百科  Tags:个人站长   点击:(36)  评论:(0)  加入收藏
AI时代 个人站长还有出路吗?
AI时代,个人站长依然有出路,但需要进行一些调整和转型。首先,利用AI工具可以帮助个人站长提高效率和产出质量。例如,利用AI进行内容创作、智能推荐、用户画像分析等,可以大大提升...【详细内容】
2024-02-29    简易百科  Tags:个人站长   点击:(45)  评论:(0)  加入收藏
站内最新
站内热门
站内头条