延迟 JavaScript 的好处

这导致重要网络指标的巨大改进，例如：

第一次内容丰富的绘画
总阻塞时间（和首次输入延迟）
互动时间

你还可以推迟用于跟踪的第三方脚本，例如 GA4、Facebook Pixel 等，但是我不建议推迟这些脚本，因为它会扭曲你的统计数据。朋友。

所以这就是我们需要做出的权衡，指数将无法达到100%。实现 100% 的替代方法是使用 Cloudflare 的跟踪，缺点是参数不如其他参数详细。

异步、推迟、延迟

大多数网站都使用了 Async 和 Defer 来改善页面加载时间和性能分数，但提升幅度并不显着。

让我们首先看一下代码片段，以了解每种技术实现方式的差异。

Normal Load
<script src="script.js"></script>

Async
<script async src="script.js"></script>

Defer
<script defer src="script.js"></script>

Delay
<script delay="script.js"></script>

<script delay="script.js"></script> 不是官方的 HTML 属性。它仅用作占位符。我将使用 Javascript 延迟代码代替 delay = src 当有用户交互时。

使用属性时异步，它将在解析页面的同时加载脚本，然后在脚本加载后立即执行它。

使用属性时推迟，它与解析页面并行加载脚本，但仅在页面完成加载后执行。

正如你可能猜到的那样，推迟是一个比异步。您可以在本文中找到两者之间的详细比较弗拉维奥·科普斯.

有方法 延迟.延迟，由于缺少属性 源代码 所以浏览器不会加载脚本。因此它也提供了良好的性能和分数。

正在做

如果您使用 WordPress，已经有许多可用的插件可以开箱即用地实现此功能。但如果您热衷于在不使用插件或拖放构建器的情况下编写代码，则可以参考选项 2。

对于 WordPress 网站

以下插件提供延迟 JavaScript 功能：

用代码延迟 Javascript

这是我用来延迟 Javascript 的代码。放置此代码的最佳位置是底部，特别是页脚。

const autoLoadDuration = 5; //In Seconds
const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend", "scroll"];

const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);

eventList.forEach(function(event) {
    window.addEventListener(event, triggerScripts, { passive: true })
});

function triggerScripts() {
    runScripts();
    clearTimeout(autoLoadTimeout);
    eventList.forEach(function(event) {
         window.removeEventListener(event, triggerScripts, { passive: true });
    });
}

function runScripts() {
    document.querySelectorAll("script[delay]").forEach(function(scriptTag) {
        scriptTag.setAttribute("src", scriptTag.getAttribute("delay"));
    });
}

说明：上面的代码将搜索所有脚本 <script> 有属性 delay 并将其替换为 src 当有用户交互时（按键、鼠标单击、鼠标移动、滚动、触摸、滑动）或 5 秒后。

2个变量 autoLoadDuration 和 eventList 您可以根据自己的喜好指定它。