首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

什么是第一输入延迟(First Input Delay)

2019年03月07日 翻译 阅读(680) 作者:懒炖

我们都知道给人留下良好的第一印象是多么重要。 这对于结识新朋友非常重要,而且在网络上构建体验时也很重要。

在网络上,良好的第一印象可以使某人成为忠实用户或他们离开并永不回头。 问题是,是什么造成了良好的印象,以及如何衡量您可能对用户产生何种印象?

在网络上,第一印象可以采用许多不同的形式 - 我们对网站的设计和视觉吸引力有第一印象,以及对其速度和响应性的第一印象。

虽然使用Web API很难测量用户对网站设计的喜好程度,但测量其速度和响应能力并非如此!

用户可以使用 First Paint(FP)First Contentful Paint(FCP) 等指标来衡量用户对网站加载速度的第一印象 。 但是,您的网站在屏幕上绘制像素的速度只是故事的一部分。 同样重要的是当用户尝试与这些像素进行互动时,您网站的响应能力如何!

为了帮助衡量用户对网站交互性和响应能力的第一印象,我们引入了一个名为First Input Delay的新指标。

什么是第一次输入延迟?

第一输入延迟(FID)测量用户首次与您的站点交互时的时间(即,当他们单击链接,点击按钮或使用自定义的JavaScript驱动控件时)到浏览器实际能够的时间回应这种互动。

作为编写响应事件的代码的开发人员,我们经常假设我们的代码将在事件发生后立即运行。 但作为用户,我们经常遇到相反的情况 - 我们在手机上加载了一个网页,试图与它进行交互,然后在没有任何反应时感到沮丧。

通常,输入延迟(或输入延迟)发生是因为浏览器的主线程忙于执行其他操作,因此它无法(尚未)响应用户。 可能发生这种情况的一个常见原因是浏览器正忙于解析并执行应用程序加载的大型JavaScript文件。 虽然它正在这样做,它不能运行任何事件监听器,因为它加载的JavaScript可能会告诉它做其他事情。

请考虑典型网页加载的以下时间表:

页面加载跟踪

上面的图表显示了一个页面,该页面正在对资源进行一些网络请求(很可能是CSS和JS文件),并且在这些资源完成下载后,它们将在主线程上进行处理。 这导致主线程暂时忙碌的时间段(由图表上的红色表示)。

现在让我们添加另外两个指标: 我在上面提到的 First Contentful Paint(FCP)Time to Interactive(TTI) ,你可能在 LighthouseWebPageTest 等工具中看到过 :

使用FCP和TTI进行页面加载跟踪

如您所见,FCP测量从导航开始到浏览器将内容绘制到屏幕的时间(在这种情况下,直到下载和处理样式表之后)。 并且TTI测量从导航开始到加载页面资源并且主线程空闲(至少5秒)的时间。

但是您可能已经注意到,内容首次绘制到屏幕之间以及浏览器的主线程始终处于空闲状态并因此能够快速响应用户输入之间存在相当长的时间。

如果用户在此期间尝试与页面交互(例如,单击链接),则在点击发生和主线程能够响应之间可能会有延迟。

让我们将FID添加到图表中,这样您就可以看到它的外观:

使用FCP,TTI和FID的页面加载跟踪

这里,浏览器在主线程忙时接收输入,因此它必须等到它不忙于响应输入。 它必须等待的时间是此页面上此用户的FID值。

注意: 在此示例中,用户恰好在主线程最繁忙时段的开头与页面进行交互。 如果用户刚刚(在闲置期间)与页面进行了交互,则浏览器可能立即做出响应。 输入延迟的这种差异强调了在报告度量时查看FID值分布的重要性。 您可以在下面关于 分析和报告FID数据 的部分中阅读更多相关 信息

为什么我们需要另一个交互性指标?

交互时间(TTI)是衡量应用加载所需时间并能够快速响应用户交互的指标,而第一输入延迟(FID)是衡量用户与用户交互时遇到的延迟的指标页面虽然尚未交互。

那么为什么我们需要两个衡量类似事物的指标呢? 答案是两个指标都很重要,但它们在不同的背景下很重要。

TTI是一种可以在没有任何用户在场的情况下进行测量的度量标准,这意味着它非常适合像Lighthouse或WebPageTest这样的实验室环境。 不幸的是,实验室指标本质上无法衡量真实的用户痛苦。

另一方面,FID直接表示用户痛苦 - 每个FID测量是用户必须等待浏览器响应事件的实例。 当等待时间很长时,用户会感到沮丧并经常离开。

出于这些原因,我们建议使用这两个指标,但我们建议您在实验室中测量TTI,并使用分析工具在野外测量FID。

事实上,我们计划在Google上使用我们的性能工具。 我们的实验室工具如Lighthouse和WebPageTest已经报告了TTI,我们正在探索将FID添加到我们的真实用户监控(RUM)工具,如 Chrome用户体验报告 (CrUX)。

此外,虽然这些 不同的指标,但我们的研究发现它们彼此关联良好,这意味着您为提高TTI所做的任何工作都可能会改善您的FID。

注意: 虽然TTI和FID确实关联良好,但可能存在具有良好TTI分数的网站可能具有不良FID分数的情况(反之亦然)。 例如,站点可能具有非常高的TTI,但如果大多数用户在完全加载之前不尝试与站点交互,则这些用户将不会遇到高TTI的痛苦。 另一方面,站点可能具有相对较低的TTI,但如果站点很早就看起来是交互式的,则用户可能会尝试与其进行交互,但却发现没有任何反应。 这就是为什么我们建议优化两个指标(以及使用实验室和RUM工具)。

为什么只考虑第一个输入?

虽然任何输入的延迟都可能导致糟糕的用户体验,但我们主要建议您测量第一个输入延迟,原因如下:

  1. 第一个输入延迟将是用户对您网站响应能力的第一印象,第一印象对于塑造我们对网站质量和可靠性的总体印象至关重要。
  2. 我们今天在网上看到的最大的交互性问题发生在页面加载期间。 因此,我们认为最初专注于改善网站的 首次 用户互动将对提高网络的整体互动性产生最大的影响。
  3. 关于站点如何解决高首次输入延迟(代码拆分,预先加载较少JavaScript等)的推荐解决方案不一定是在页面加载后修复慢速输入延迟的相同解决方案。 通过分离这些指标,我们将能够为Web开发人员提供更具体的性能指南。

什么算作第一次输入?

第一输入延迟是衡量页面在加载期间的响应性的度量。 因此,它仅关注来自点击,点按和按键等离散操作的输入事件。

其他交互(如滚动和缩放)是连续操作,并且具有完全不同的性能约束(此外,浏览器通常能够通过在单独的线程上运行它们来隐藏其延迟)。

换句话说,FID侧重于 RAIL性能模型中 的R(响应性) ,而滚动和缩放与A(动画)更相关,并且应该分别评估它们的性能质量。

如果用户从不与您的网站互动,该怎么办?

并非所有用户每次访问时都会与您的网站进行互动。 并非所有交互都与FID相关(如上一节所述)。 此外,一些用户的第一次交互将处于不良时期(当主线程忙于一段延长的时间时),并且一些用户的第一次交互将处于良好的时间(当主线程完全空闲时)。

这意味着一些用户将没有FID值,一些用户将具有低FID值,并且一些用户可能具有高FID值。

如何跟踪,报告和分析FID可能与您可能习惯的其他指标有很大不同。 下一节将介绍如何做到最好。

在JavaScript中跟踪FID

今天所有浏览器都可以用JavaScript测量FID。 为了方便起见,我们甚至创建了一个JavaScript库,可以为您跟踪和计算它: GoogleChromeLabs / first-input-delay

有关完整用法和安装说明,请参阅库的自述文件,但要点是:

  1. <head> 文档中 包含一个缩小的代码片段, 用于添加相关的事件侦听器(必须尽早添加此代码,否则您可能会错过事件)。
  2. 在应用程序代码中,注册一个回调,一旦检测到第一个相关输入,就会使用FID值(以及事件本身)调用该回调。

获得FID值后,您可以将其发送到您使用的任何分析工具。 例如,使用Google Analytics,您的代码可能如下所示:

  1. // The perfMetrics object is created by the code that goes in <head>.
  2. perfMetrics.onFirstInputDelay(function(delay, evt) {
  3. ga('send', 'event', {
  4. eventCategory: 'Perf Metrics',
  5. eventAction: 'first-input-delay',
  6. eventLabel: evt.type, // Event values must be an integer.
  7. eventValue: Math.round(delay), // Exclude this event from bounce rate calculations.
  8. nonInteraction: true, });
  9. });

分析和报告FID数据

由于FID值的预期变化,在报告FID时,您需要查看值的分布并关注较高的百分位数,这一点至关重要。 事实上,我们建议专注于第99个百分点,因为这将对应于用户对您网站的首次体验。 它将向您展示需要最大改进的领域。

即使您按设备类别或类型细分报告,也是如此。 例如,如果您为桌面和移动设备运行单独的报告,那么您在桌面上最关心的FID值应该是桌面用户的第99个百分点,而您在移动设备上最关心的FID值应该是移动用户的第99个百分点。

遗憾的是,许多分析工具不支持在没有自定义配置和手动数据处理/分析的情况下按特定分位数报告数据。

例如,可以在Google Analytics中报告特定的分位数,但需要一些额外的工作。 在我的文章 我在我构建的每个网站上使用的Google Analytics设置中 ,我有一个关于 设置命中级维度的部分 。 当您执行此操作时,您可以解锁按个别事件值过滤和分段以及创建分布的功能,这样您就可以计算出第99个百分位数。 如果您想使用Google Analytics跟踪FID,我肯定会推荐这种方法。

谁应该跟踪FID?

FID是任何网站都可以从跟踪中受益的指标,但我认为有几种类型的网站可以通过了解用户实际遇到的首次输入延迟类型而特别受益:

服务器端呈现(SSR)JavaScript应用程序

将页面的服务器呈现版本发送到客户端的站点以及在页面交互之前需要加载,解析和执行的大量JavaScript特别容易受到高FID值的影响。

原因是因为它们 看起来 互动 的时间 和它们实际上 交互式的时间往往很大,特别是在需要更长时间来解析和执行JavaScript的低端设备上。

为了清楚起见,构建一个服务器端呈现的应用程序 可以快速实现交互。 SSR本身并不是一个糟糕的模式; 当开发人员优化快速第一次绘制然后忽略交互性时,就会出现问题。 这是跟踪FID特别令人大开眼界的地方!

包含大量第三方iframe的网站

第三方广告和社交窗口小部件的历史不是特别考虑其主页。 他们倾向于在主机页面的主线程上运行昂贵的DOM操作,而不考虑它将如何影响用户。

此外,第三方iframe可以随时更改其代码,因此即使您的应用程序代码没有更改,也可能发生回归。 在生产站点上跟踪FID可以提醒您在发布过程中可能无法捕获的此类问题。

未来

First Input Delay是我们在Chrome团队中尝试的全新指标。 这对我来说特别令人兴奋,因为它是我们引入的第一个指标,直接对应于用户在网络上进行真实互动时的痛苦体验。

展望未来,我们希望在 W3C WebPerf工作组中 标准化该指标 ,以便通过异步加载的JavaScript和第三方分析工具更轻松地访问它(因为它现在需要开发人员将同步代码添加到其页面的头部) 。

如果您对指标或当前实施有反馈意见,我们很乐意听到! 请在 GitHub上 提交问题或提交拉取请求 。


参考: https://www.sitepen.com/blog/reducing-first-input-delay-for-a-better-user-experience/

© 本文著作权归原作者所有 翻译自:Google 阅读原文(英文)

评论

  •  
  • 使用git hooks(post-receive)实现简单的远程自动部署

    使用git hooks(post-receive)实现简单的远程自动部署

    发布:2019-06-05 阅读(278)

  • linux下设置git(pull,push等)免密码操作

    linux下,设置git免密码操作

    发布:2019-06-04 阅读(263)

  • 批量转换LF和CRLF的小技巧

    做跨平台开发移植的时候,最常见的问题就是不同操作系统的换行不同(例如,Windows 上是 CRLF,而 Linux 上是 LF,MacOS 以前是 CR,现在也是 LF),如果不注意的话,可能会导致编译的时候报诡异的错误,虽然说有些优秀的文本工具(notepad++, vscode 等)可以自动转换,但是它们都没有提供批量转换的方法,所以一旦遇到有成百上千个的文件需要转换,那么一个个手动去转明显效率低下。虽然网上提到批量转换的文章很多,但是感觉都没有介绍清楚,可能大神们都觉得太简单了吧。。。为了同学们能够和我一样少走弯路,我就把我的转换过程详细记录下来。

    发布:2019-05-24 阅读(394)

  • 源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称

    源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置,或者在执行此操作前尝试将其重命名为较短的名称

    发布:2019-05-07 阅读(364)

  • vscode插件开发,发布

    vscode插件开发过程

    发布:2019-03-27 阅读(484)

  • 什么是第一输入延迟(First Input Delay)

    第一输入延迟(FID)测量用户首次与您的站点交互时的时间(即,当他们单击链接,点击按钮或使用自定义的JavaScript驱动控件时)到浏览器实际能够的时间回应这种互动。

    发布:2019-03-07 阅读(680)

  • vs code非常实用的插件

    推荐一些vs code开发中,非常实用的插件

    发布:2019-03-04 阅读(455)

  • 查看浏览器、操作系统、分辨率等使用份额~

    浏览器、操作系统、分辨率等使用份额~

    发布:2019-02-25 阅读(398)

  • 使用MuMu模拟器和fiddler抓包app

    是不是觉得用手机调试app h5页面很麻烦?是不是不方便抓APP的包?在电脑上可以抓吗,可以,用mumu+fiddler就走向人生巅峰了。。。

    发布:2019-01-24 阅读(317)

  • ESLint的使用

    eslint使用注意事项

    发布:2019-01-03 阅读(474)

  • 'define' is not defined.'$' is not defined.

    eslint环境变量设置

    发布:2019-01-02 阅读(672)

  • windows下利用nvm安装node,管理node版本

    nvm是node安装及版本管理工具

    发布:2018-12-29 阅读(558)

  • git cherry-pick使用指南

    **git cherry-pick**可以选择某一个分支中的一个或几个commit(s)来进行操作。例如,假设我们有个稳定版本的分支,叫v2.0,另外还有个开发版本的分支v3.0,我们不能直接把两个分支合并,这样会导致稳定版本混乱,但是又想增加一个v3.0中的功能到v2.0中,这里就可以使用cherry-pick了,其实也就是对已经存在的commit 进行再次提交.

    发布:2018-12-28 阅读(501)

  • 找回Git中丢失的Commit(git如何撤消reset操作)

    在使用Git的过程中,有时候会因为一些误操作,比如reset、rebase、merge等。特别是在Commit之后又执行了`git reset --hard HEAD`强制回滚本地记录以及文件到服务器版本,导致本地做的修改全部恢复到Git当前分支的服务器版本,同时自己的Commmit记录也消失了。碰到这种情况,不要慌,我们在Git上做的任何操作都只是在原来之前的操作上做修改,并且会被记录下来保存,也就是说无论你做了什么,对于Git来说都可以进行回滚操作。

    发布:2018-12-28 阅读(447)

  • eslint:no-case-declarations

    该规则禁止词法声明(`let`,`const`,`function`和`class`在)`case/ default`条款。原因是词法声明在整个开关块中是可见的,但只有在分配时才会被初始化,这只有在达到定义它的情况下才会发生。

    发布:2018-12-28 阅读(458)

  • eslint:no-restricted-globals

    如果您希望通过启用环境来允许一组全局变量,但仍希望禁止其中某些变量,则禁止使用特定的全局变量非常有用。 例如,早期的Internet Explorer版本将当前的DOM事件暴露为全局变量 event,但是长期以来,使用此变量一直被认为是一种不好的做法。限制此操作将确保在浏览器代码中不使用此变量。

    发布:2018-12-28 阅读(543)

  • git bisect 命令教程

    它的原理很简单,就是将代码提交的历史,按照两分法不断缩小定位。所谓&amp;quot;两分法&amp;quot;,就是将代码历史一分为二,确定问题出在前半部分,还是后半部分,不断执行这个过程,直到范围缩小到某一次代码提交。

    发布:2018-12-27 阅读(503)

  • git输入不显示,只有光标在闪的问题

    当在git操作log,如`git log`后,然后非正常退出,即使用`CTRL+C`退出,这个时候git输入命令就不会显示了,只有光标,这时怎么办?

    发布:2018-12-26 阅读(475)

  • .gitignore文件配置不生效

    .gitignore文件配置不生效

    发布:2018-12-24 阅读(503)

  • 使用husky、lint-staged、prettier、eslint保持团队代码一致

    团队成员多,虽然制定了代码规范,但也不一定能执行的起来,时间一长,各自的代码规范可能又会有出入了。husky解决了这个问题,让代码检查自动化,流程化,如果不符合规范,则不能commit

    发布:2018-12-24 阅读(1351)

  • Sinon 入门,看这篇文章就够了

    当我们在开发前端项目的时候, 很多时候需要根据后端返回的数据来渲染页面, 我们通常使用AJAX发送请求给服务端。当我们开发后端逻辑的时候有时候需要连接数据库,根据从数据库中得到的数据来执行后续的逻辑代码, 或者其他的依赖, 甚至会更加复杂棘手。这些开发都存在一个共同的局限性, 就是会去依赖别的服务, 需要别的系统的支持。 例如, 如果我们使用Ajax请求网络, 您需要有一个服务器来响应对应的请求。对于数据库, 您需要有一个为测试设置的测试数据库

    发布:2018-12-21 来源:segmentfault

  • 使用tree命令生成目录树(目录结构)

    项目目录树是如何做的?手动写吗,不可能的,很简单就是使用tree命令

    发布:2018-12-20 阅读(1013)

  • git修改当前项目用户

    git修改当前项目用户

    发布:2018-12-11 阅读(423)

  • Git修改最近一次已经提交了的commit及push

    Git修改最近一次已经提交了的commit及push

    发布:2018-12-11 阅读(381)

  • git查看某个文件的修改记录

    git查看某个文件的修改记录

    发布:2018-11-30 阅读(443)

  • Git 分支 - 分支的新建与合并

    发布:2018-11-27

  • ESlint: switch case缩进问题:Expected indentation of 16 spaces but found 20.

    ESlint报错:Expected indentation of 16 spaces but found 20,Expected indentation of 12 spaces but found 16.

    发布:2018-11-08 阅读(847)

  • ESLint Parsing error: Unexpected token ...

    eslist报错: Unexpected token ...

    发布:2018-11-07 阅读(739)

  • git diff忽略某些文件,不比较

    通过设置git-diff driver,结合.gitattributes文件,使git diff命令忽略某些目录。例如我们只希望看到比较src目录,不希望看到比较dist目录

    发布:2018-10-26 阅读(546)

  • git教程(写的比较详细,适合初学者,值得阅读)

    学习这本书的目的是让你了解版本控制,并且尽可能快速简单的掌握 Git。但是和另外一些关于介绍版本控制的图书不一样,阅读这本书并不需要你有很专业的 IT 或者电脑背景知识,它也面向那些编程的初学者,软件构架师,或者是项目经理。在技术方面你也不需要有很多专业知识,我们会以循序渐进的方式帮助你来理解版本控制和掌握 Git。

    发布:2018-10-19 来源:git-tower.com

  • git打包成tar\zip文件

    git如何打包增量文件?

    发布:2018-05-30 阅读(503)

  • github push免密码

    github push时免密码

    发布:2015-01-05 阅读(196)

  • Image Optimizer5.0—非常不错的JPG,GIF,PNG,TIFF图片无损压缩工具

    用了很多图片压缩工具,Image Optimizer5.0图片压缩工具,个人觉得是非常不错的,特别是对JPG图片的压缩,真正能达到不改变图片质量,图片大小压缩达到50%以上。图片压缩能达到50%以上,这对网站性能是很大的提升的。

    发布:2013-10-29 阅读(255)