交互时间 （TTI） – 需要了解的性能指标
网站性能是决定任何网站成功的关键因素。页面加载缓慢、界面响应迟钝以及其他性能问题会严重影响用户体验，导致参与度下降、跳出率上升和收入损失。
要重新掌控网站性能 ，需要使用适当的指标进行监控。TTI（Time To Interactive，可交互时间）就是这样一个指标，它告诉你页面需要多长时间才能完全与用户互动。
文章目录
什么是交互时间（TTI）？
加载时间和交互性是 Web 性能中不同但相关的方面。加载时间描述的是加载网站内容所需的时间。而交互性描述的是网站响应所需的时间。
这听起来像是比较两个同义词，但其区别却至关重要。
想象一下，周一早上你起得很早。闹钟响了，你打了个哈欠，开始新的一天之前没有什么需要加载的 。然而，这并不意味着你已经准备好接老板的电话了。你需要喝点咖啡才能完全恢复。
TTI 是一种以用户为中心的指标， 专注于从潜在客户的实际角度评估网络性能。
为了让用户留在网站上，页面加载过程中必须快速连续地发生四个关键时刻。
- 首先，用户会收到页面正在加载的可见信号。
- 其次，加载的内容变得足够有用，以理解页面的内容。
- 第三步，页面变得可交互。
- 最后，该页面是完全交互的，这意味着用户交互可以顺利进行且不会中断。
可以将 TTI 视为一种检查网站需要多长时间才能为用户提供真正令人满意的感知速度体验的方法。通过控制这段时间，可以降低跳出率，并给用户留下良好的印象。
TTI 是核心网络生命力指标吗？
如何计算交互时间？
TTI 以秒为单位 ，计算页面的 TTI 需要确定首次内容绘制 (First Contentful Paint) 和第一个 5 秒的静默窗口。 在此窗口中，浏览器不应处理主线程上任何耗时超过 50 毫秒的任务，也不应等待超过两个服务器响应请求。
TTI 是 FCP 和安静窗口之间的一个时间点，它发生在安静窗口完成之前的最后一个长任务之前。
我知道这看起来可能很复杂，所以让我用更简单的术语来解释一下。我会先定义一下什么是 FCP，然后用时间轴可视化的方式展示你的页面是如何加载的。
定义 TTI 搜索范围的开始
计算 TTI 分数首先要定义 FCP。
首次内容绘制 (FCP) 是一项指标，它指定页面加载时间轴中用户能够查看屏幕上任何内容的第一个时间点。快速的 FCP 有助于让用户感觉到页面正在正确加载。
切勿将 FCP 与 LCP（最大内容绘制）混淆。LCP 是一种性能指标，用于确定网页上最大元素何时在用户浏览器中可见。
在页面完全交互之前，LCP 始终处于准备状态， 但它不会影响 TTI 指标的计算。
定义 TTI 搜索范围的结束
想象一下页面加载过程的时间线。用户浏览器会执行许多脚本。其中一些任务的耗时超过 50 毫秒，与测量 TTI 相关。浏览器还会异步向服务器发送资源请求，并且每个请求都会保持“打开”状态，直到收到响应为止。
浏览器可以在某个时刻休息，我们称之为“安静窗口”。这是浏览器第一次在至少五秒钟的时间内不需要在主线程上执行任何耗时任务，并且打开的资源请求不超过 2 个。
可以肯定的是，FCP 总是会在静默窗口之前发生。FCP 和静默窗口的开始定义了可以识别 TTI 的时间范围。
确定最终的 TTI 分数
只关注那个时间范围，应该寻找浏览器在安静窗口之前完成最后一个长任务的时刻。
如果 FCP 之后没有任何超过 50 毫秒的任务，则 TTI 等于 FCP。
交互时间与首次输入延迟
区分交互时间的计算和首次输入延迟的测量可能会造成混淆。
请记住，首次输入延迟 (FTI) 衡量的是网页响应用户交互所需的时间，介于首次内容绘制 (First Contentful Paint) 和可交互时间 (Time to Interactive) 之间。因此，它与 TTI 不同，TTI 衡量的是页面完全可交互所需的时间，而不是页面对用户操作做出反应所需的时间。
什么是好的 TTI 分数？
长期以来，衡量 TTI 的最佳方法是在网站上运行 Lighthouse 性能审核。
然而，目前谷歌正在修改其 Lighthouse 10 工具， 移除 TTI ，并将其分数权重赋予 CLS（累积布局偏移）。CLS 将占整体性能得分的 25%，而 TTI 将占该季度的 10%。
测量 TTI 的 Lighthouse 替代工具：
如何使用 PageSpeed Insights 测量 TTI
Google 的 PageSpeed Insights 从 Lighthouse 检索数据，因此未来我们可能会看到其工作方式发生类似的变化。不过，截至撰写本文时，使用 PageSpeed Insights 测量 TTI 已经可行，而且非常简单。
只需复制并粘贴感兴趣的页面的 URL 地址，然后单击“分析”。
如你所见，可以比较你的页面在移动设备和桌面设备上的运行情况。
2023年2月9日更新，Lighthouse 10 中将移除久经考验的互动所需时间 (TTI) 指标，从而结束在 Lighthouse 8 中开始的废弃流程。TTI 的 10% 得分权重将转移到 Cumulative Layout Shift (CLS)，后者现在将占 总体效果得分的 25%。
JavaScript 如何影响 TTI？
用户一进入网站，浏览器就开始下载并执行 JavaScript 代码。然而，如果这些代码未经优化，导致任务执行时间过长，则可能会导致 TTI 延迟。
长任务会阻止浏览器的主线程执行其他关键任务，例如页面渲染或响应用户操作。
在 SEO 领域，人们普遍认为 JavaScript 虽然可以提升网站的视觉吸引力和互动性，但也会对网站性能产生负面影响。具体来说，当 JavaScript 代码成为渲染阻塞资源时，它会显著降低页面加载时间，并对浏览器产生巨大的处理需求。
如何提高交互时间？
为了增强 TTI，有两个关键因素需要考虑——优化 JavaScript 代码和减少服务器响应时间。
如何优化 JavaScript 来提高 TTI
- 检查你的代码以减少未使用的脚本，
- 压缩找到的最大文件，
- 不要将所有 JavaScript 代码都发送到一个文件中，以免浏览器不堪重负，而是拆分代码，并最初只发送访问者需要的必要代码，
- 延迟第三方脚本，例如社交分享按钮、视频播放器嵌入、广告 iframe 等，同时优先执行为用户提供最大价值的脚本，
- 实现 defer 属性来告诉浏览器不要等待特定的脚本，而是继续处理 HTML。
如何减少服务器响应时间以获得更好的 TTI
- 确保你使用的是正确的托管服务，最好是专用的托管服务，
- 实施内容交付网络，将内容存储在靠近用户的服务器上，
- 将数据库优化纳入 CMS，
- 应用预取技术，例如提前渲染特定的页面元素，
- 避免使用会对外部资源产生额外 HTTP 请求的网络字体，
- 确保定期更新服务器的软件。
独自应对这些优化挑战可能会非常困难，所以不要犹豫，查看 Nat 的 JavaScript SEO 服务或了解我们的专家提供的更多网络性能服务 。
WordPress 页面中的 TTI 怎么样？
可以使用插件来帮助 WordPress 网站获得更好的 TTI 分数。首先尝试以下列表中的工具：
Closure Compiler – Google 的一款工具，旨在通过分析和编译 JavaScript 代码来优化其性能，从而创建更高效的 JavaScript 服务方式。它通过删除死代码、重写和最小化剩余代码以及检查语法、变量引用和类型来实现这一点。
Flying Scripts – 一款插件，可让您的页面等待执行 JavaScript，直到没有用户活动为止。它允许您选择要延迟执行的 JavaScript 脚本，并具有超时功能，可在设定的不活动时间后运行脚本。
插件管理器 ——WordPress 的一个工具，可让您控制插件的加载顺序，根据帖子类型或 URL 禁用某些插件，并通过分组在管理页面上组织插件。
Gonzales – 一款轻量级插件，可根据访问的页面有条件地禁用 CSS、JS 和插件。它通过删除主题或插件可能注册的冗余 CSS 和 JS 文件，有助于简化网站加载时间。
Rocket CDN – 一款使用内容分发网络 (CDN) 来提升网站性能的插件。它与 Rocket.net 托管平台集成，为 WordPress 网站提供优化的 CDN 服务。
结束语
TTI 代表“可交互时间”。它是一种网站性能指标，用于衡量网站完全与用户互动所需的时间。
当网页加载时，浏览器会执行脚本并向服务器发送资源请求。“安静窗口”是指浏览器可以休息至少五秒钟，且不执行任何耗时任务或打开两个以上的资源请求。要识别 TTI，需要关注 FCP 和安静窗口开始之间的时间，并观察浏览器何时完成安静窗口之前的最后一个耗时任务。
Google 的 Lighthouse 10 工具删除了 TTI，转而专注于 CLS（累积布局偏移），但测量和优化 TTI 仍然可以改善用户体验。
要提高 TTI，优化 JavaScript 代码并缩短服务器响应时间是关键。你的目标应该是将 TTI 分数控制在 5 秒以内。
后续步骤
Nat H.
您好！我是Nat，imrnat的创始人。感谢您将宝贵的时间托付给我们，我希望您在这篇博文中找到了问题的答案。
如果您仍然想知道如何确切地推进您的自然增长，请查看我们的服务页面并安排一次免费的对话，我们将为您完成所有繁琐的工作。
希望能尽快与您交谈！
