测评:前端监控系列3 ｜ 如何衡量一个站点的性能好坏

　　测评:前端监控系列3 ｜ 如何衡量一个站点的性能好坏

　　注意干货，不要迷路

　　1. 背景

　　你知道有多少用户没有等待第一个屏幕出现就离开了吗？性能不佳会对业务目标产生负面影响。例如，BBC 发现，他们的 网站 加载时间每增加一秒，他们就会失去 10% 的用户。高绩效网站比低绩效网站更能吸引和留住用户，而用户留存对于提高用户转化率至关重要。

　　本篇文章就是以此为背景，介绍Byte如何内部衡量网站性能，以及如何依靠性能监控来定位在线网站性能问题。

　　2. 如何衡量网站性能

　　网站性能有多种表现形式。并不是简单的以页面加载速度和页面渲染速度来衡量，而是需要关注用户从页面加载开始到关闭过程的性能感知。一个页面，即使渲染得很快，如果对用户交互反应慢，那么网站在用户心目中的表现还是很差的。

　　站点性能一般可以分为两类，一类是首屏性能，一类是运行时性能。前者衡量页面从加载到稳定交互的性能，后者衡量页面稳定后直到页面关闭的性能。

　　3. 首屏表现

　　早在 2012 年，Web 性能工作组 [1] 就针对页面加载场景开发了一个加载过程模型，用于衡量页面加载各个阶段的耗时，从而衡量页面加载的性能。具体加载过程模型如图：

　　该模型定义了从开始页面加载到完成整个页面加载过程的时间点。除了正常的初始化和拉到主文档之外，还包括解析和渲染的详细时间点。例如：

　　虽然开发者可以根据这些时间点来衡量页面加载的性能，但在线用户却无法真正感知到这些时间点之间的差异。对于用户来说，只有页面什么时候开始渲染，主要内容什么时候渲染，什么时候可以交互，交互是否有延迟。

　　那么有没有什么指标可以用来衡量用户感知的四个阶段呢？

　　3.1 何时开始渲染：FP && FCP

　　这两个指标来源于Paint Timing [2]标准，主要记录页面加载过程中的一些关键时间点。使用这两个指标，您可以衡量页面何时开始呈现内容。

　　3.2 主要内容什么时候渲染：FMP && LCP && SI

　　有了这三个指标，就可以衡量页面何时呈现其主要内容。但是，业内一些测试表明，LCP与FMP的时间点非常相似。同时，FMP对性能的消耗很大，会因为一些微小的变化而造成数值的巨大波动。因此，建议使用 LCP。但由于计算复杂、指标解读困难，SI一般只用于实验室环境。

　　3.3 我们什么时候可以互动：TTI && TBT

　　虽然 TTI 可以测量页面可以交互的时间点，但它无法感知此期间浏览器的繁忙状态。结合 TBT，它有助于了解页面在加载期间无法响应用户输入的时间。

　　3.4 交互时是否有延迟：FID && MPFID

　　MPFID是虚拟可能的延迟时间，FID是用户真正的首次交互的延迟时间。所以一般推荐使用FID，它是用户对页面交互性和响应性的第一印象。良好的第一印象有助于用户对整个应用建立良好的印象。同时，在页面加载阶段，资源处理任务最重，最容易出现输入延迟。

　　至此，通过以上各阶段的指标，基本可以全面衡量首屏的表现。那么如何衡量运行时性能呢？

　　4. 运行时性能

　　运行时性能通常可以通过 Long 任务来感知。长任务主要衡量主线程的繁忙程度。

　　4.1 长任务

　　如果一个任务在主线程上运行的时间超过 50 毫秒，它就是一个 Long 任务。如果你能在运行时采集所有的 Long 任务，你就可以知道运行时的性能。在具体实践中，可以将注意力集中在耗时较长的长任务上，并将其与用户行为相关联，可以有效帮助定位网卡原因。

　　5. 绩效指标的计算原理

　　有与页面性能相关的指标，那么如何采集这些数据呢？

　　5.1 采集页面加载过程的耗时阶段

　　页面加载过程中的时间点主要取决于 Navigation Timing [4] 标准。该标准后来升级为 2.0 版本，对应于 Navigation Timing 2 [5] 标准。两者虽然不同，但可以计算出来。指标基本一致。在浏览器中，可以通过以下方式获取：

　　// navigation timing<br />const timing = window.performance.timing<br /><br />// navigation timing 2<br />performance.getEntriesByType('navigation')<br />

　　根据这些数据，不仅可以计算出 DNS/TCP/Request 的耗时，还可以计算出 DOMReady/DOMParse/Load 的耗时。

　　

　　5.2 采集 FP &amp;&amp; FCP

　　FP和FCP可以直接通过浏览器提供的API获取，所以采集的原理并不复杂。如果页面已经完成了第一次绘制和第一次内容绘制，可以使用下面的方法直接获取。

　　window.performance.getEntriesByType('paint')<br />// or<br />window.performance.getEntriesByName('first-paint')<br />window.performance.getEntriesByName('first-contentful-paint')<br />

　　但是如果页面还没有第一次开始绘制，则需要通过*敏*感*词*来获取。

　　const observer = new PerformanceObserver(function(list) {<br />  const perfEntries = list.getEntries();<br />  for (const perfEntry of perfEntries) {<br />      // Process entries<br />      // report back for analytics and monitoring<br />      // ...<br />  }<br />});<br /><br />// register observer for paint timing notifications<br />observer.observe({entryTypes: ["paint"]});<br />

　　5.3 采集 LCP

　　LCP主要依赖PerformanceObserver，具体监控方式如下：

　　new PerformanceObserver((entryList) => {<br />  for (const entry of entryList.getEntries()) {<br />    console.log('LCP candidate:', entry.startTime, entry);<br />  }<br />}).observe({type: 'largest-contentful-paint', buffered: true});

　　浏览器会多次上报 LCP，一般来说真正的 LCP 是用户交互前最近一次上报的 LCP。因为交互往往会改变用户所看到的，所以用户交互后新上报的 LCP 不再符合 LCP 指标定义。

　　5.4 采集 与FP/FCP/LCP相比，FMP的采集比较复杂，需要通过算法计算，业界没有统一的算法。但是，比较公认的计算FMP的方法是“确定在加载和渲染过程中页面最大布局变化后的绘制时间为当前页面的FMP”。

　　由于在页面渲染过程中，“DOM结构变化的时间点”和对应的“渲染时间点”大致相同，所以内部以字节为单位计算FMP的方式是计算DOM结构发生变化的时间点大多数，那就是FMP。

　　具体步骤如下：

　　通过 MutationObserver 监控整个页面的每一个 DOM 变化，并触发 MutationObserver 的回调。当回调计算当前DOM树的score并结算时，score对比变化最大的时刻是FMP5.5 采集 TTI &amp;&amp; TBT

　　与FMP类似，浏览器并没有提供直接获取TTI的API，但是有详细的说明如何计算TTI，通过实现相应的说明就可以得到TTI的时间点。

　　具体描述是：先找到FCP的时间点，然后再找一个安静的窗口向前。一个安静的窗口需要满足三个条件： 1) No Long 任务。2)窗口中处理的 GET 请求不超过两个。3) 窗口时间窗口读取至少应为 5 秒。

　　窗口前最后一个长任务的结束时间是 TTI。

　　TBT 可以通过将 FCP 和 TTI 之间的长任务的阻塞时间相加得到。

　　阻塞时间是Long任务中超过50ms后的任务时间。

　　5.6 采集 FID &amp;&amp; MPFID

　　FID也依赖PerformanceObserver，具体监控方式如下：

　　new PerformanceObserver(function(list, obs) {<br />  const firstInput = list.getEntries()[0];<br /><br />  // Measure the delay to begin processing the first input event.<br />  const firstInputDelay = firstInput.processingStart - firstInput.startTime;<br />  // Measure the duration of processing the first input event.<br />  // Only use when the important event handling work is done synchronously in the handlers.<br />  const firstInputDuration = firstInput.duration;<br />  // Obtain some information about the target of this event, such as the id.<br />  const targetId = firstInput.target ? firstInput.target.id : 'unknown-target';<br />  // Process the first input delay and perhaps its duration...<br /><br />  // Disconnect this observer since callback is only triggered once.<br />  obs.disconnect();<br />}).observe({type: 'first-input', buffered: true});<br />

　　MPFID 是 FCP 之后最长的长任务时间。可以监控 FCP 后的 Long 任务，比较最长的 long 任务是 MPFID。

　　虽然浏览器提供了足够的 API 来帮助采集单个性能指标，但在 JS 中计算特定指标更加复杂。原因有二：一是API上报的内容与指标本身的定义存在一些差异，所以在计算时需要处理这些差异；二是在某些场景下，浏览器不会上报相应的内容，需要在这些场景下进行仿真测量。

　　6. 如何评估网站的整体性能

　　尽管有许多绩效指标，但每个绩效指标评估一个方面。如何看网站的整体表现是好是坏？对于每一个单独的指标，是否有一个标准来定义指标值被认为是好的特定范围？在线网站性能应考虑哪些性能指标？每个绩效指标的适当权重是多少？

　　6.1 绩效指标基线

　　谷歌提供了各种性能指标的基准，具有一定的参考意义。

　　为什么仅供参考？首先，基线本身正在发生变化。随着指标计算的逐步更新和软硬件的更新，基线也会有一定程度的调整。其次，用户的使用场景也会对性能指标产生很大影响。例如，iOS 用户报告的性能指标普遍优于 Android 用户报告的性能指标。

　　下面是字节目前内部使用的一些性能指标的基准，基本与谷歌推荐的基准一致。通过这些数据，可以分析网站的绩效达标率。

　　指标名称Good(ms)Needs Improvement(ms)Poor(ms)

　　FP

　　0-1000

　　1000-2500

　　

　　超过 2500

　　FCP

　　0-1800

　　1800-3000

　　超过 3000

　　液晶面板

　　0-2500

　　2500-4000

　　超过 4000

　　TTI

　　0-3800

　　3800-7300

　　超过 7300

　　FID

　　0-100

　　100-300

　　超过 300

　　6.2 测量网站满意度

　　除了常规的性能指标外，网站满意度的衡量还应考虑基于体验的指标，例如专门衡量视觉稳定性的 CLS。

　　在线站点满意度测量一般会根据灯塔的满意度计算规则，去除一些推荐在实验室环境中测量的指标的权重。

　　以下是Bytes目前使用的在线站点性能满意度权重计算公式，去掉了SI和TBT这两个不推荐用于在线环境测量的指标。

　　然后有了一个站点的满意度，我们终于可以知道一个站点的性能好坏了。那么假设性能不好，我们应该如何优化呢？

　　7. 如何优化网站性能

　　通常，我们可以从性能指标入手，进行有针对性的优化。虽然指标不同，但优化思路是一样的。了解指标的依赖关系后，可以通过优化指标的相关依赖关系，快速优化性能指标，从而提升站点性能。

　　听起来很抽象，举个例子：比如我们要优化TTI的时候，根据刚才提到的TTI的计算方法，可以得出TTI的依赖主要有FCP、request和Long任务，然后尽快渲染尽可能快的请求，尽快结束请求，避免长时间的任务是优化的关键。指标的具体优化措施有很多，后续文章会介绍。

　　了解全面的优化措施很重要，但每一项都不一定能有效解决您网站面临的关键性能问题。如何做到立即有针对性的去优化？通过恢复用户加载时的外观来帮助定位性能问题是一个想法。

　　8. 使用在线监控定位性能问题

　　一般来说，前端监控除了监控性能指标外，还会监控请求、资源加载、Long任务等数据。这些数据可以帮助还原用户的加载场景，帮助寻找线索。

　　例如，在下面的例子中，很多性能指标都很差。通过监控平台还原的资源加载瀑布图可以看出，大部分时间都花在了拉取资源上。然后就可以得到一个初步的性能优化方案，把优化措施集中在资源优化上，比如减小JS文件大小，延迟加载未使用的JS代码等等。

　　在线监控的例子很多，可以帮助定位性能问题，这里就不一一介绍了。截图中使用了Byte内部的前端监控平台。目前该方案已经在火山引擎上同步，可以实时监控web端的真实数据，接入即可解决告警归属、聚类分析、详细定位等问题。白屏、性能瓶颈、查询慢等关键问题欢迎体验。

　　扫描下方二维码，立即申请免费使用⬇️

　　最近发布:WordPress自动采集发布插件专业版WP AutoPost Pro [更新至

　　目录

　　亲测完美运行于的 WordPress 各个版本，请放心使用。WP-AutoPost-Pro 是一款优秀的 WordPress 文章采集器，是您操作站群，让网站自动更新内容的利器！采集插件适用对象1、刚建的wordpress站点内容比较少，希望尽快有比较丰富的内容；2、热点内容自动采集并自动发布；3、定时采集，手动采集发布或保存到草稿；4、css样式规则，能更精确的采集需要的内容。5、伪原创与翻译、代理IP进行采集、保存Cookie记录；6、可采集内容到自定义栏目

　　WP-AutoPost 插件可以采集来自于任何网站的内容并全自动更新你的WordPress站点。它使用非常简单，无需复杂设置，并且足够强大和稳定，支持wordpress所有特性。可采集任何网站的内容全自动任务采集定向采集，支持通配符匹配、或CSS选择器精确采集任何内容，支持采集多层级文章列表、支持采集正文分页内容、支持采集多层级正文内容基本设置功能齐全，完美支持Wordpress各种功能，可自动设置分类目录、标签、摘要、特*敏*感*词*片、自定义栏目等；也可采集目标网站的分类目录、标签等信息后，可自动生成并添加相应分类目录、标签等信息支持Google神经网络翻译、有道神经网络翻译、百度翻译，将文章翻译成其他语言，轻松获取原创文章可下载远程图片及其他任意格式附件到本地服务器，并支持给图片自动添加水印

　　如果是新手，请查看采集教程：

　　WP AutoPost Pro是目前最好用的wordpress自动采集发布插件，最大的特点是可以采集来自于任何网站的内容并自动发布到你的wordpress站点。不像其他大部分wordpress采集插件，只能根据Feed进行采集，使用Feed采集有很大的弊端，首先必须找到全文Feed，而现在网上全文Feed很少，大部分只能采集到文章摘要，就算使用Feed采集到文章摘要也需要点击链接才能查看原文，相当于给别的网站做外链。做英文垃圾站用的比较多的WP-Robot也只有20几个采集来源，文章来源比较单一有限。而WP-AutoPost就没有上面这些劣势，真正做到可以采集任何网站的内容并自动发布，采集过程完全自动进行无需人工干预，并提供内容过滤、HTML标签过滤、关键词替换、自动链接、自动标签、自动下载远程图片到本地服务器、自动添加文章前缀后缀、并且可以使用微软翻译引擎将采集的文章自动翻译为各种语言进行发布。

　　1.可采集任何网站的内容，采集信息一目了然。

　　通过简单设置可采集来自于任何网站的内容，并可设置多个采集任务同时进行，可设置任务为自动运行或手动运行，主任务列表显示每个采集任务的状况：上次检测采集时间，预计下次检测采集时间，最近采集文章，已采集更新的文章数等信息，方便查看管理。

　　文章管理功能方便查询、搜索、删除已采集文章，改进算法已从根本上杜绝了重复采集相同文章，日志功能记录采集过程中出现的异常和抓取错误，方便检查设置错误以便进行修复。

　　2.启用任务后，全自动采集更新，无需人工干预。

　　启用任务后，定时检测是否有新文章可更新，检测文章是否重复，导入更新文章，这一切操作程序都是全自动完成，无需人工干预。

　　有两种触发采集更新方式，一种是在页面内添加代码由用户访问触发采集更新(后台异步进行，不影响用户体验，也不影响网站效率)，另外可以用Cron计划任务定时触发采集更新任务

　　3.定向采集，支持通配符匹配、或CSS选择器精确采集任何内容，支持采集多层级文章列表、支持采集正文分页内容、支持采集多层级正文内容。

　　定向采集只需要提供文章列表URL即可智能采集来自于任何网站或栏目内容。

　　不仅支持“通配符匹配”来采集网页内容，更完美支持各种CSS选择器，只需填写简单的形如#title h1的CSS选择器，便可精确采集网页任何内容。（如何设置CSS选择器）

　　

　　支持设置关键词，如果标题中包含关键词才允许采集（或过滤掉不允许采集）。

　　支持设置多个匹配规则采集网页上的不同内容，甚至支持采集任何内容添加到“wordpress自定义栏目”，方便扩展。

　　4.基本设置功能齐全，完美支持wordpress各种功能，可自动设置分类目录、标签、摘要、特*敏*感*词*片、自定义栏目等；也可采集目标网站的分类目录、标签等信息后，可自动生成并添加相应分类目录、标签等信息

　　每个采集任务均可选择发布到的分类目录，发布作者，发布状态，检测更新时间间隔，采集目标网站的字符集，选择是否下载图片或附件。

　　支持自定义文章类型,自定义文章分类、文章形式。

　　完美支持wordpress各种特色功能，自动添加标签，自动生成摘要，自动设置特*敏*感*词*片，支持自定义栏目等。

　　5.可采集微信公众号、头条号等自媒体内容，因百度不收录公众号，头条文章等，可轻松获取优质“原创”文章，增加百度收录量及网站权重

　　支持采集微信公众号(订阅号)文章，无需复杂配置，只需填入“公众号名称”和“微信号”后即可开始采集。

　　支持采集今日头条文章，也无需复杂配置

　　微信公众号及今日头条由于目标限制，为*敏*感*词*方式采集

　　6.支持Google神经网络翻译、有道神经网络翻译、百度翻译，将文章翻译成其他语言，轻松获取原创文章

　　支持Google神经网络翻译，翻译质量显著提高，已接近人工翻译效果，将文章标题和内容翻译成其他语言，共支持多种语言之间相互翻译，轻松获取原创文章。使用Google翻译API无需翻墙，只需翻墙获取API相关设置信息设置好后即可正常使用，后续调用API翻译无需翻墙

　　支持有道神经网络翻译，接近人工翻译效果，有道翻译更懂中文，采集英文文章翻译成中文文章，轻松获取原创文章。

　　同时支持百度翻译，百度翻译每月翻译字符数低于200万，享免费服务

　　

　　7.支持中英文各种伪原创方式

　　支持使用翻译引擎获取伪原创文章，不仅仅只是替换了同义词，更是语义的重新表述，唯一性、伪原创效果更好，支持各种语言。同时集成国外最优秀伪原创工具WordAi等，制作英文站可以获取可读性、唯一性都更好的伪原创文章。

　　8.支持市面上所有主流对象存储服务，包括七牛云、阿里云OSS、腾讯云COS、百度云BOS、又拍云、Amazon AWS S3、Google Cloud Storage，可将文章中图片及附件自动上传到云对象存储服务，节省带宽及空间，提高网站访问速度

　　七牛云存储，每月享10GB的免费存储空间，10GB免费带宽流量

　　只需简单配置好相关信息，即可自动上传，通过wordpress后台也能直接查看或管理已上传到云对象存储的图片及文件。

　　9.支持seo优化，内容过滤，HTML标签过滤，关键词替换，自动添加链接，添加自定义内容，自定义采集后样式、自定义模板等常用功能

　　自动删除采集内容中的HTML注释，可设置删除标签中的id，class，style属性内容，消除采集的痕迹；自动给图片添加上alt属性，过滤链接，关键词替换，自动添加自定义链接，这些都有利于SEO。

　　支持内容过滤，过滤采集内容中不希望发布的内容(如广告代码，文章来源，版权等信息)，甚至可以在文章任意位置添加上自定义内容，增强文章独特性；也可是设置采集后添加自定义样式功能

　　也支持HTML标签过滤功能，可过滤掉采集文章中的超链接，script和style标签下的不必要的代码。

　　付费高速下载：

　　资源下载此资源下载价格为10元，请先登录

　　服务条款：

　　购买即代表你对本站的无偿捐助，非购买本站资源。部分资源禁止在中国大陆下载使用，违者后果自负。同意本条款你方可购买下载本站资源，不同意请离开。

　　所有资源均需登陆后下载，即使是免费的。