WordPress交流

如何缩短 WordPress 网站的交互时间 (TTI)

—

目录

右键点我复制链接地址，分享页面有积分。

更新：交互时间已在 Lighthouse 10 中删除，并且不再作为性能指标包含在内。

我们都想要一个快速且易于交互的网站。没有什么比单击页面上的某个位置但没有得到任何结果更令人沮丧的了。

为了确保您的网站提供出色的用户体验，您应该注意一些指标，TTI 就是其中之一。作为一个以用户为中心的指标，交互时间占 Lighthouse 计算的全局性能得分的 10%。它可能不是对最终得分影响最大的指标，但用户所经历的挫败感可能会导致他们退出您的页面，甚至更糟糕：退出您的网站！  

我们将解释什么是互动时间、为什么它很重要、哪些工具可以衡量它以及影响其分数的因素。我们还将分享一些技术提示，以修复不良的交互时间等级（TTI 长于 3.8 秒）。最后，我们将向您展示如何提高整体性能得分并确保您的网站看起来不那么糟糕。

Lighthouse 中的交互时间 (TTI) 意味着什么？

互动时间衡量访问者能够与您的页面充分互动的速度。  

这是一个有意义的实验室指标，用于评估负载响应能力，直接影响 用户对性能和交互的感知。 

TTI 指标测量页面开始加载的时间到其主要子资源加载的时间，并且能够快速响应用户操作。 

简而言之，TTI 衡量页面执行任何 JavaScript 代码的速度，以便组件快速响应任何用户操作。它有助于识别哪个页面 看起来是 交互式的。 

让我用一个例子来解释一下。

用户可以在屏幕上看到号召性用语按钮。他尝试单击它，但没有任何反应：该元素 不可 单击。令人沮丧，对吧？TTI 指标可帮助您识别那些 看似 交互式但实际上并非交互式的页面。 

TTI 与总阻塞时间齐头并进  ，因为它们一起提供了有关页面对用户操作的响应能力的见解。 

📖 在以下情况下，页面被视为完全交互式：

– 页面显示有用的内容，这是通过首次内容绘制来衡量的
– 为最可见的页面元素注册了事件处理程序
– 页面在 3.8 秒内响应用户交互。

Lighthouse 是一种开源自动化工具，可帮助开发人员提高网页质量。它创建速度、性能、 可访问性、UX 和搜索引擎优化 (SEO) 的审核。为了提供良好的用户体验，网站的分数应努力达到 90 到 100 之间。 

🚀 如果您需要帮助来执行网站审核，我们建议您遵循我们的完整指南，该指南解释了 如何提高 Lighthouse 性能分数。

Performance-score-performed-by-Lighthouse-including-TTI
Lighthouse 执行的性能评分，包括 TTI –  PSI

简而言之，快速 TTI 有助于确保页面可用 。

Lighthouse v8 结合了六个指标来生成最终性能分数，包括 Core Web Vitals、速度指数、 交互时间和总阻塞时间： 

比重好成绩(绿色的)
First Contentful Paint10%0-2 s
Speed Index10%0-3.4 s
Largest Contentful Paint25%0-2.5 s
Time to Interactive10%0-3.8 s(Web.dev说最多可接受5s)
Total Blocking Time30%< 200 ms
Cumulative Layout Shift15%0 – 0.1

如何衡量互动时间

要定义 TTI 分数，您需要测量从页面开始加载到可视化呈现初始脚本的时间，并且它能够快速可靠地响应用户输入。 

Lighthouse 按照四个步骤来测量 TTI： 

  1. 从第一个内容绘制开始 （当第一个文本和图像元素渲染到屏幕上时。）
  2. 及时向前搜索至少五秒的安静窗口（安静窗口 = 没有 长任务 且不超过两个正在进行的网络 GET 请求）
  3. 向后搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 处停止。
  4. TTI是安静窗口前最后一个长任务的结束时间（如果没有找到长任务，则与FCP的值相同）。

通过下图，您可以直观地看到这四个步骤：

Explaining-how-TTI-is-calculated

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

您可以使用两种不同的工具来测量 TTI 。

TTI-metric-from-PSI
互动时间 – PSI
  • 使用 GTmetrix 获取 TTI 等级：
performance-report-gt-metrix
互动时间 – GTmetrix

这两种工具都提供 TTI 分数，但如您所见，绿色区域中的数字略有不同：

  • TTI 分数 (PSI)：0.8 秒
  • TTI 分数 (GT Metrix)：1.2 秒

这主要是由于多种因素造成的，包括 Lighthouse 测试方法、测试地点等。 

🚀 进行绩效审计并不总是那么容易。查看我们有关 测试 WordPress 网站性能和测量速度结果的完整指南。它将帮助您确定所需的工具以及每个指标的可接受阈值。 

互动 (TTI) 分数的最佳时间是多少？

您应始终努力使交互时间少于 3.8 秒，以确保良好的用户体验。您的 TTI 分数是您页面的 TTI 时间与在移动设备或桌面设备上加载时排名靠前的网站的 TTI 时间的比较。 

互动评分时间分类如下：

  • 绿色：0-3.8（良好）
  • 橙色：3.8-7.3（需要改进）
  • 红色：7.3（差）
TTI-acceptable-score
TTI 可接受的分数 – web.dev

交互时间通常与 首次输入延迟 (FID) 指标进行比较。在下一部分中，我们将解释原因。

首次输入延迟 (FID) 与交互时间 (TTI) 有什么区别？

FID 和 TTI 都衡量网页的交互性水平。然而，除了这个共同点之外，我们还发现了一些差异： 

  • TTI 衡量页面准备响应用户输入所需的时间，而 FID 衡量当真实用户尝试与其交互时页面的响应速度。
  • TTI 可以使用实验室数据（无需真实用户）来计算，但首次输入延迟 (FID) 是仅现场指标，需要真实用户数据。FID 计算无法在实验室环境中完成。这种形式的数据只能从实际用户那里收集。
  • 首次输入延迟跟踪页面完全交互之前发生的用户输入 。 首次输入延迟允许您捕获那些早期的关键交互： 
FID-TTI 解释
  • FID（需要计算真实世界的用户）是一个 Core Web Vitals 指标，用于衡量 某人与页面交互时发生的情况，如下所示： 
FID-from-user-input-to-browser-responding-time
FID指标：从用户输入到浏览器响应时间
总结一下：  TTI 和 FID 都衡量交互性。这些指标捕捉用户对网站交互性和响应能力的第一印象。TTI 可以在没有真实世界用户的情况下计算，而 FID 则不能。

交互时间对性能有什么影响？

如前所述，高 TTI 可能会造成令人沮丧的用户体验：用户认为网站已完全准备就绪，但当他尝试单击某处时，却没有任何反应。 

让我们看一个 TTI 的现实示例 （下面的橙色部分）。正如您所看到的，如果主线程在大约 4-5 秒内没有执行长任务，它会将页面标记为完全交互式：

解释交互性 – 来源：  dev.to

像 PageSpeed Insights 这样的工具并不喜欢这样，它们会毫不犹豫地通过降低您的性能等级来惩罚您的网站。 

TTI 对 Lighthouse 分数的权重

在 Lighthouse v8 性能得分中，TTI 的权重从 15% 降低到了 10%。 

Lighthouse-Scoring-Calculator-v8-Including-TTI
Lighthouse 评分计算器 v8（包括 TTI） –  Web.dev

为什么会有这样的改变？Web.dev 解释说，它直接响应用户的反馈和“指标优化的不一致导致用户体验的改善”。

Web.dev表示：“当页面完全交互时，TTI 仍然是一个有用的信号，但是有了 TBT 作为补充，可变性就会减少。通过这一评分变化，我们希望能够更有效地鼓励开发者优化用户交互性。”

TTI 测量页面准备好交互所需的时间：主 JS 线程被阻塞多长时间以及它需要多长时间才能有能力处理用户的操作。

这是一个重要的实验室指标，因为 它定义了您的页面是否可用。 

在向您提供可操作的建议以将 TTI 保持在 3.8 秒以下之前，我们需要定义导致 TTI 分数不佳的原因。 

什么影响交互时间？

让我们借助 Google PageSpeed Insights 的诊断部分来看看是什么导致了较高的交互时间分数。我们通常有四个问题导致 TTI 成绩不佳，即：

  1. JavaScript 代码和未使用的 JS
  2. JavaScript 执行时间
  3. 主线程工作
  4. 第三方代码 

借助 Lighthouse 报告中的“机会”和“诊断”部分，您可以使用一些技巧来提高整体绩效等级。 

Opportunity-and-Diagnostics-section-source-PSI
机会和诊断部分 – 来源 PSI

该报告显示每个错误对您预计节省的影响有多大；解决这些问题将极大改善您的 TTI 和用户体验。 

我们列出了 PSI 的一些建议，以防您需要提高 TTI 分数：

如何改进 WordPress 网站上的 TTI 

您可以通过优化 JS 文件（包括第三方代码）来减少“交互时间”分数。任何有助于 JS 执行的良好措施很可能会提高 TTI。始终关注资源的顺序和加载首选项以及请求的数量和大小。 

如果您想修复交互时间并提高 WordPress 网站的整体速度，我们建议您实施八项性能优化。

  1. 延迟加载JS
  2. 延迟执行JS 并减少未使用的 JS
  3. 缩小 JS 和 CSS
  4. 优化 CSS 交付并减少未使用的 CSS
  5. 减少TTFB
  6. 预取 DNS 请求
  7. 预加载字体
  8. 改进移动设备上的 TTI

1.延迟JS 

延迟 JS 文件意味着只有在浏览器显示最重要的内容后 才会加载它们 。目标是通过优先显示您想要首先显示的内容来加快页面加载速度。您将减少解析、编译和运行 JS 文件所花费的时间，这将有助于提高 TTI。 

通常可以推迟的非必要 JS 示例：社交共享、cookie 同意等。

🚨 Lighthouse 发现的问题：  “消除渲染阻塞资源”、“减少未使用的 JavaScript ”和“避免链接关键请求”问题。

✅ 手动解决方案： 

  • Defer 属性的使用： 当尝试延迟 JS 时，您可以在 HTML 中的 script 标签中使用布尔属性“defer”：
<script src=”library.js” defer></script>
defer 属性如何工作 – 来源：  javascript.plainenglish

✅ WordPress 插件解决方案： 

  • Asset CleanUp： 这个插件会优先扫描并检测页面上要加载的内容。您所要做的就是选择不应该首先渲染的 CSS 或 JS 代码。
    注意：插件作者建议将 Asset CleanUp 与 WP Rocket 等缓存插件一起使用，以获得最佳性能结果
  • Async JS：异步 JavaScript 使您可以完全控制要添加“延迟”属性的脚本，以帮助提高 WordPress 网站的性能。
  • WP Rocket 有一个选项可以推迟 JavaScript 解析并推迟 JS WordPress 文件，如下所示：

2、延迟JS，减少未使用的JS

通过延迟 JS 执行并删除或减少未使用的 JS，您将提高性能和 TTI 分数。主要思想是延迟所有 JS 文件的加载，直到发生用户交互，例如单击按钮或滚动到页面末尾。一个好的起点是检查 GTmetrix Waterfall 图表以查看 JavaScript 的加载位置。您可以使用 PSI 获得相同的诊断。运行审核后，您将能够确定“坏”JS 是否来自您的代码或第三方应用程序。

🚨 Lighthouse 发现的问题：  “避免链接关键请求”和“减少未使用的 JavaScript ”。 

✅ 手动解决方案： 

  • 在 JS 中手动创建延迟的方法是使用 setTimeout() 方法函数。这将在您在ms中指定的时间之后调用函数 。您可以使用这些 非常有用的代码片段 来延迟任何 JS 函数。
  • 手动删除未使用的 JS 可能会给您的网站带来危险。如果你再删除一个空格或一个括号，事情就会变得非常难看。如果您不是高级开发人员，我不建议手动执行此类操作。

✅  使用 WordPress 插件：

  • Flying Scripts： 延迟 JS 并为关键 JS 文件提供更多资源的插件。它有助于确定优先顺序。 
  • Plugin Organizer: 更改插件的加载顺序（它可以帮助您确定首先渲染的内容的优先级。）
  • WP Meteor：一个推迟 JS 脚本的插件，大大提高了访问者的感知速度（对于用户体验非常重要）。
  • Gonzales： 允许根据您访问的页面有条件地禁用 CSS、JS，甚至插件。
  • Asset CleanUp ： （请参阅上面的部分）。
  • Perfmatters：它允许您在除页面和帖子之外的任何地方禁用插件。
Example-Removing-unused-Elementor-JS-with-Perfmatters
示例 – 使用 Perfmatters 删除未使用的 Elementor JS
  • WP Rocket 缓存插件：一体化解决方案。您可以轻松地延迟 JavaScript 文件并一键删除（或减少）未使用的 JS。

3. 缩小 JS 和 CSS

缩小代码意味着删除任何混乱和无用的标点符号：新行、空格等。这些元素可以帮助您或您的开发人员阅读代码，但它们也可能会减慢您的网站速度。  

从脚本中消除这些“无用”代码将为主线程腾出时间来专注于许多重要任务。 同样，这是为了腾出空间和时间来首先呈现最相关的内容。 Chrome DevTools 中的“Coverage”选项卡可以帮助您找到未使用的 JavaScript 和 CSS 代码：

分析代码覆盖率 – 来源： dev tools

🚨 Lighthouse 发现的问题：  “减少 JavaScript 执行时间”、“最小化主线程工作”、“Minify JS”和“Minify CSS”。

✅  手动解决方案：

  • 重要性：备份您的站点，或者不要直接在生产服务器中编辑 JS 或 CSS 文件。 
  • 使用Sublime Text 或 Visual Studio Code等文本编辑器 。 
  • 打开包含代码的文件并删除注释、空格、换行符和缩进。不要忘记尽可能缩短 ID、类或变量名称并优化条件语句。 

✅  使用网络工具： 

  • 访问 minifycode.com 并单击 CSS/JS minifier 选项卡。
  • 将 CSS/JS 代码粘贴到输入框中，然后单击“缩小 CSS/JS”按钮。

✅  使用 WordPress 插件来缩小 CSS 和 JS： 

4.优化CSS交付并减少未使用的CSS

在浏览器呈现内容之前，它必须处理当前页面的所有样式和布局信息。换句话说，浏览器必须提供 CSS，但此操作可能会阻止主线程处理其他重要任务和进程。因此，为了保持良好的性能，必须执行两项任务： 

  • 优化 CSS 的交付方式
  • 删除所有未使用的 CSS

🚨 Lighthouse 发现的问题：  “最小化主线程工作”和“删除未使用的 CSS ”。

✅  优化 CSS 交付的手动解决方案：

  • 组合、压缩和内联您的 CSS 脚本。
  • 优先考虑 CSS 规则：首屏内容优先！
  • 避免在 HTML 正文中使用 STYLE 标记。

✅  手动删除或减少未使用的 CSS 的解决方案：

✅  WordPress 插件可优化 CSS 交付并删除未使用的 CSS：

  • Speed Up – Optimize CSS delivery， 异步加载样式表，并缩短页面加载时间。 
  • Autoptimize 包括内联和延迟 CSS 以及优化 CSS 的选项
  • Asset CleanUp 有助于减少未使用的 CSS
  • WP Rocket 缓存插件允许您通过直接从“文件优化 菜单” 中单击几下删除（或减少）未使用的 CSS 来优化 CSS 交付：

5. 减少服务器响应时间和第一个字节的时间 (TTFB) 

如果您希望 TTI 分数保持较低，您的服务器需要很快。为了减少服务器响应时间，您可以使用以下方法：  

  • 选择快速高效的托管提供商
  • 使用 CDN 服务（在世界各地拥有快速 CDN 将提供更快的内容交付）
  • 使用高级缓存
  • 使用GZIP压缩
  • 优化您的数据库
  • 使用最新版本的 PHP

🚨 Lighthouse 发现的问题：  “减少初始服务器响应时间”。

✅  使用高级缓存插件和 CDN

✅ 启用 GZIP 压缩 

✅ 优化您的数据库

  • 使用 WP Rocket 清理数据库而不破坏任何东西。

6. 预取 DNS 请求 

如果您的网站上有第三方代码，例如 Vimeo 上托管的视频或某些 Google Fonts，您应该预取 DNS 请求。它将使您的网站更快，并最大限度地减少其他网站的加载时间和资源。主要思想是使用 Preconnect 尽早连接到 第三方脚本 ，而不是等到他们请求时才连接。

🚨 Lighthouse 发现的问题：  “减少初始服务器响应时间”、 “减少第三方使用”和“预连接到所需的源”。

✅ 手动解决方案：

  • 在标头部分使用“rel=dns-prefetch”。您可以手动指定浏览器预取的域：
<link rel=”dns-prefetch” href=”//yourdomain.com”>

✅  使用 WordPress 插件：

DNS-prefetch-option-perfmatters
DNS 预取选项 –  Source  perfmatters  WordPress 插件
  • WP Rocket 插件 在其 WordPress 仪表板中还有一个“预取 DNS 请求”部分：

7. 预加载字体

借助字体预加载，您可以“强制”访问者的浏览器尽早加载重要字体。 

自定义字体是您品牌的重要组成部分，因此在您的网站上显示它非常重要。但是， 有一些网络字体预加载的最佳实践 可以避免性能问题。以下是您可能需要考虑的三条建议： 

  • 使用正确的字体格式（woff 和 woff2）。
  • 预加载字体（如下节所述）。
  • 使用正确的字体声明（正确的字体系列）。

🚨 Lighthouse 发现的问题：  “预加载关键请求”。

✅ 手动解决方案：

  • 告诉浏览器使用适当的 rel=”preload” 标签和属性预加载字体： 

示例： 

<link rel=”preload” as=”font” href=”/fonts/custom-font.woff” type=”font/ woff2″ crossorigin=”anonymous”>

将标签放在哪里？

您需要在 HTML 上为站点上加载的每个 CSS、脚本和字体文件的 head 标记之间插入此链接标记。

✅ 使用 WordPress 插件：

  • 使用 WP Rocket 预加载字体。转到“预加载选项卡”，滚动到“预加载字体”，然后只需指定要预加载的字体文件的 URL：

8. 关注移动设备上的互动时间

如何提高移动设备上的交互时间？首先，专注于解决任何 JavaScript 问题。然后，应用上面列出的所有性能建议。请记住：脚本越多，TTI 就越长，并且这也可能因设备而异。 

让我们以智能手机为例，其处理器的性能不如计算机。在后者上加载的站点必然会受到 Javascript 脚本数量的影响。 

谷歌的建议是删除或推迟对移动网站的稳定性和渲染来说不必要的脚本。因此，请检查您的 JavaScript，保持移动版本设计简单，并避免过度使用滑块等重型元素。 

评论

发表回复

必填项已用 * 标注