Total Blocking Time?
Total Blocking Time总阻塞时间(TBT)是衡量您在Google PageSpeed Insights(PSI)中得分的最重要指标(与LCP一起)。
这是为PSI-Lighthouse提供支持的技术更新的结果。具体地说它删除了First CPU Idle(FCI)和First Meaningful Paint(FMP),同时添加了TBT、LCP和 CLS。本文,晓得博客为你介绍什么是总阻塞时间TBT。
推荐:什么是Interaction to Next Paint(INP)
什么是总阻塞时间(TBT)?
Total Blocking Time (TBT)是长任务(所有超过50毫秒的任务)阻塞主线程并影响页面可用性的时间量。它显示了页面在完全交互之前是如何无响应的。
基本上浏览器使用所谓的主线程来解析 HTML、构造 DOM、执行 CSS 和 JavaScript、处理用户事件以及执行其他重要任务。当这些任务中的任何一个运行时间超过50毫秒(也称为长任务)时,主线程被视为“阻塞”,因为浏览器无法中断正在进行的任务。
更重要的是,作为用户体验指标,Total Blocking Time 占 Lighthouse 性能得分的30%。这使它成为优化的首要指标!总阻塞时间是衡量WordPress外贸建站中网站响应能力的重要性能指标。当任务长度超过50毫秒时,它是首次内容绘制(FCP)和交互时间(TTI)之间所有时间段的总和。分数始终以毫秒为单位。
Google如何衡量TBT
为了清楚地理解这些,让我们看一个例子。如果主线程要执行四个任务,每个任务所花费的时间如下:
- 任务 1 ——58 毫秒。
- 任务 2 ——45 毫秒。
- 任务 3 ——125 毫秒。
- 任务 4 ——200 毫秒。
那么阻塞时间,即50ms后执行每个任务所花费的时间,为:
- 任务 1 ——8 毫秒。
- 任务 2 ——0 毫秒。
- 任务 3 ——75 毫秒。
- 任务 4 ——150 毫秒。
这个网页的总阻塞时间将是每个任务的阻塞时间的总和,即 8 + 0 + 75 + 150 = 233 ms,根据 Lighthouse 的评级,这是一个网页的好分数,因为它小于 300 毫秒。
主线程上的少量任务并不一定意味着低阻塞时间。相反,大量的任务并不一定会导致大量的阻塞时间或糟糕的用户体验。
注意:请记住,只有50ms以上的时间才被认为是阻塞时间。
推荐:什么是Trackback?WordPress怎么禁用Trackback
TBT和TTI的区别
乍一看,TBT听起来就像是Time To Interactive(TTI)。但是,虽然相似,但这两个指标最终衡量的是不同的事物。
TTI告诉您页面完全交互需要多长时间,以秒为单位。要被认为是交互式的,页面必须显示有用的内容并在不到50毫秒的时间内响应用户输入。此外,必须为大多数页面元素注册事件处理程序。
总阻塞时间TBT是当访问者在此期间尝试与页面交互时,会出现延迟,因为主线程很忙。TBT有助于量化这些延误的严重程度,让您详细了解交互性受长任务影响的严重程度,而不是指出页面何时变为交互性。
推荐:什么是Brotli压缩?网站开启Brotli压缩的好处
测量总阻塞时间的工具
我们推荐两种不同的工具来衡量TBT和使用Lighthouse技术的性能。
Google PageSpeed Insight(PSI):
GTmetrix:
这两种工具都提供TBT分数,但数字略有不同,您可能已经注意到了。这主要是由于各种因素造成的,包括Lighthouse实施、测试方法、测试位置等。
检查哪些任务会伤害TBT
Chrome开发工具性能和Lighthouse审计可以为您提供有关主线程上的长任务的信息。
转到您要分析的页面。右键单击并选择“检查”。之后,单击“Performance性能”。单击“重新加载”按钮并等待Chrome执行它的操作。
您将获得有关页面执行情况的详细分析。会看到以不同颜色绘制的任务。如果您看到一个带有红色小覆盖的灰色任务,则表明您找到了一个长任务。当你将鼠标悬停在它上面时,你会看到它在主线程上占用了多少时间。
另一种选择是使用Chrome中的Lighthouse审核来分析您网站的总阻塞时间。再次,右键单击,选择“检查”。这次去“Lighthouse”。
选择您要测试的类别,然后单击“生成报告”。您可能会为您的网站获得大量建议。他们中的很多人都可以以一种或另一种方式帮助TBT。
注意:该报告不会为您提供任务的细分,但会指出具体的性能问题。
推荐:什么是SSH?
总结
以上是晓得博客为你介绍的什么是总阻塞时间TBT的全部内容,TBT绝对是您在优化网站性能时需要关注的指标。Total Blocking Time是Google的Core Web Vitals计划的一部分,会影响您网站的自然排名,因此需要在WordPress建站 和 SEO网站优化中考虑到。
推荐:[最新版]FluentCRM Pro插件下载WordPress邮件营销自动化插件