namesilo最便宜的域名购买
什么是互动时间TTI

什么是互动时间TTI

什么是互动时间TTI

  Time to Interactive (TTI),交互时间 (TTI) 是一种性能指标,用于衡量页面的加载响应能力,并有助于识别页面看起来具有交互性但实际上并非如此的情况。TTI 测量首次内容绘制 (FCP)之后页面可靠地为用户交互做好准备的 最早时间。简单来说,快速的 TTI 有助于确保页面可用。

什么是互动时间TTI
什么是互动时间TTI

  TTI 是一个重要的以用户为中心的指标,因为它衡量访问者能够以多快的速度与您的页面进行完全交互。本文,晓得博客为你介绍什么是互动时间TTI。

  推荐:什么是Google Lighthouse

衡量互动时间TTI?

衡量互动时间TTI
什么是互动时间TTI

  交互时间(TTI)是用户到达页面后页面变为完全交互所需的时间。页面速度洞察(PSI)在以下情况下认为页面是完全交互的:

  • 页面显示有用的内容;
  • 为大多数可见页面元素注册了事件处理程序;
  • 页面在50毫秒内响应用户交互。

  实际上,用于计算 TTI 的算法同时观察瀑布和网络活动。确定交互时间所涉及的三个阶段是:

  • 选择一个相关的起点,例如 First Contentful Paint 或 DOMContentLoadedEnd;
  • 从一点开始,寻找一个窗口,在此期间网络稳定 5 秒(并且不包含长任务);
  • 一旦找到它,回顾最后一个长任务的结束并将那个时间报告为交互时间。

  推荐:什么是Core Web Vitals

哪些工具可以自动测量 TTI?

  可以使用两种不同的工具来衡量 TTI 和您使用 Lighthouse 技术的表现。

  使用 Google PageSpeed Insight  (PSI) 测量 TTI 指标:

Google-PageSpeed-Insight测量TTI指标
什么是互动时间TTI

  使用 GTmetrix 获取 TTI 等级:

GTmetrix获取TTI指标
什么是互动时间TTI

  这两种工具都提供 TTI 分数,但如您所见,绿色区域中的数字略有不同,这主要是由于多种因素造成的,包括 Lighthouse 测试方法、测试位置等。 

  推荐:WordPress网站如何减少DOM大小

导致TTI缓慢原因?

  TTI慢的最大原因是现代网站有大量的JavaScript。更具体地说,长JavaScript任务(所有超过50毫秒的任务)会延迟您的TTI。

  • 在渲染页面时,现代浏览器依靠主线程来完成大量任务。
  • 主线程——长任务在主线程上占用大量时间。当它们正在进行时,浏览器不能中断它们。如果用户在其中一项任务期间点击按钮,浏览器将无法响应他的输入。
  • 用户点击——简而言之,该页面在该任务完成之前没有响应。

  因此通过查找和优化长任务,可以显着提高您的TTI。

  推荐:网站跳出率高的10个原因

如何查找主线程上长任务信息

  Chrome开发工具性能审核可以为您提供有关主线程上的长任务的信息。

  转到您要分析的页面。右键单击,选择“检查”,然后单击“性能”。单击“重新加载”按钮并等待Chrome执行它的操作。

如何查找主线程上长任务信息
什么是互动时间TTI

  在“主要”部分,您会看到以不同颜色绘制的任务。如果您看到一个带有红色小叠加层的灰色任务,则表明您找到了一个长任务。

chrome开发工具DevTools中的长任务
什么是互动时间TTI

  当你将鼠标悬停在它上面时,你会看到它在主线程上占用了多少时间。还可以单击“自下而上”查看每个任务的详细说明。可以分解每个活动并查看导致延迟的原因。

  推荐:如何在Chrome谷歌浏览器中允许和阻止弹出窗口

如何在WordPress网站上改进TTI

  针对交互性指标(TTI、TBT和FID)进行优化比针对绘制指标进行优化更难。这主要是因为在这个过程中涉及了多少JavaScript(JS)。

  可以通过优化您的 JS 文件(包括第三方代码)来减少您的交互时间得分。任何有助于 JS 执行的好方法很可能会提高 TTI。始终关注资源的顺序和加载首选项以及请求的数量和大小。如果想修复交互时间并提高WordPress网站速度,建议实施以下性能优化。

  代码拆分。这允许您的网站一开始只发送访问者需要的代码,而不是一次用所有JS重载浏览器;

  缩小和压缩。这些技术减少了代码文件的大小,是高回报的优化。即使你网站的JS没有问题。

  延迟或删除非关键的第三方脚本。第三方脚本有时会阻止您自己的脚本按时执行。考虑哪些脚本为用户提供最大价值并优先考虑它们。在大多数情况下,广告和弹出脚本不在列表的顶部;

  预加载关键资产。通过预加载,您可以告诉浏览器首先要查找和加载哪些资源。您可以通过添加链接rel=”preload”元素来做到这一点;

  减少服务器响应时间和首字节时间(TTFB,如果希望 TTI 分数保持较低水平,服务器需要足够快,可以选择快速高效的托管服务提供商,使用 CDN 服务,使用高级缓存

  预取 DNS 请求,如果您的网站上有第三方代码,应该预取 DNS 请求。它将使您的网站更快,

  关注手机互动的时间,请记住:脚本越多,TTI 就会越长,这也可能因设备而异。谷歌的建议是删除或推迟对移动网站的稳定性和呈现不必要的脚本。

  推荐:什么是FID(First Input Delay)

  推荐:WordPress优化修复WordPress网站速度慢加载慢

给文章评分

晓得博客,版权所有丨如未注明,均为原创
晓得博客 » 什么是互动时间TTI

转载请保留链接:https://www.pythonthree.com/what-is-tti/

ThemeForest 模板套件
可视化创建WordPress网站
Scroll to Top