首次输入延迟优化：让您的网站即刻响应

2023-11-10 16:37:28

几周前，我着手查看网站的一些性能指标，特别关注网站在首次输入延迟 (FID) 上的表现。作为一名博客运营者，我预期结果会不错，因为网站运行的 JavaScript 并不多。一般来说，小于 100 毫秒的输入延迟会让用户感受到即时响应...

了解首次输入延迟 (FID)

FID 是一个关键指标，衡量用户第一次与网页交互时感受到的响应速度。网页加载后，用户可能会点击链接、填写表单或执行其他操作。FID 测量从用户首次输入到浏览器响应之间的时间。理想的 FID 小于 100 毫秒，这意味着用户交互几乎是即时的。

Idle Until Urgent 的优化策略

Idle Until Urgent (IU) 是一种 JavaScript 优化策略，旨在提高 FID。IU 的原理是推迟处理非关键任务，直到浏览器空闲时再执行。这使得浏览器可以优先处理关键任务，例如处理用户输入。

使用 IU 优化 FID

实施 IU 优化 FID 的步骤如下：

识别非关键任务： 确定哪些 JavaScript 任务对于立即响应用户输入并不是必需的。例如，分析跟踪或广告脚本通常是非关键的。
延迟非关键任务： 使用 requestIdleCallback() API 延迟非关键任务，直到浏览器空闲时再执行。这确保了关键任务始终得到优先处理。
优化关键任务： 分析关键任务并寻找改进方法。这可能涉及减少脚本大小、使用较少的 CPU 密集型算法或优化数据请求。

示例：使用 IU 优化 Google Analytics

Google Analytics 是一个流行的分析工具，但它的脚本可能会影响 FID。要使用 IU 优化 Google Analytics，请执行以下操作：

if (document.readyState === "complete") {
  setTimeout(function() {
    // 在这里加载 Google Analytics 脚本
  }, 0);
} else {
  window.addEventListener("load", function() {
    setTimeout(function() {
      // 在这里加载 Google Analytics 脚本
    }, 0);
  });
}