什么是互动时间TTI

什么是互动时间TTI

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

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

　　推荐：什么是Google Lighthouse

衡量互动时间TTI？

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

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

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

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

　　推荐：什么是Core Web Vitals

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

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

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

　　使用 GTmetrix 获取 TTI 等级：

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

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

导致TTI缓慢原因？

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

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

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

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

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

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

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

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

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

　　推荐：如何在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网站速度慢加载慢