如何在 WordPress 中延迟 JavaScript

由于 JavaScript 工作方式的性质,您很可能会在速度测试工具中看到“消除渲染阻塞资源”警告。 这意味着您的 JavaScript 文件在加载时会减慢(阻止)您的 WordPress 网站页面的第一次绘制。

如何在 WordPress 中延迟 JavaScript
消除渲染阻塞资源警告

加快页面绘制的最佳方法是 推迟 所有非关键的 JavaScript。 这意味着 JavaScript 在 HTML 解析期间下载,并将在页面完成加载后执行(当解析器完成时)。 把它想象成把所有的 JavaScript 推到瀑布的底部。 这是通过添加一个 defer 每个 JavaScript 文件的属性。


笔记: 延迟脚本按照它们在 HTML 文档中出现的顺序执行。

如何使用 Perfmatters 延迟 JavaScript

您可以在 Perfmatters 中启用 JavaScript 延迟来修复渲染阻止警告并加快页面的绘制。 请按照以下步骤操作。

无需多次推迟 JavaScript。 如果您已经使用另一个插件推迟它,那么您可以继续使用它或切换到 Perfmatters。

步骤1

单击进入 Perfmatters 插件设置。

如何在 WordPress 中延迟 JavaScript
Perfmatters 插件设置

第2步

单击“资产”选项卡。

如何在 WordPress 中延迟 JavaScript
性能资产

第 3 步

向下滚动并在“JavaScript”部分下,打开“延迟 JavaScript”。 这增加了一个 defer 属性到您的所有 JavaScript 文件。

如何在 WordPress 中延迟 JavaScript
延迟 JavaScript

有一个检查脚本是否已经有一个 defer 属性,因此您不必担心它会应用多个属性。

第4步

向下滚动并单击“保存更改”。

包括 jQuery

“包含 jQuery”还有一个可选功能。 这允许推迟作为 WordPress 一部分的 jQuery 核心。 笔记: 这需要打开“延迟 JavaScript”。

警告: 我们建议单独测试或将其关闭。 许多插件和主题都需要 jQuery,推迟它可能会导致您的网站出现问题。

如何在 WordPress 中延迟 JavaScript
推迟 jQuery 核心

如何添加 JavaScript 延迟排除

根据需要 JavaScript 文件或标记的顺序,推迟它可能会导致问题。 如果需要,您可以通过 src URL 将其排除。

通过脚本添加 JS 排除

对于 JavaScript 文件,在“从延迟中排除”框中输入脚本的名称。 如 script.js (每行一个)。

如何在 WordPress 中延迟 JavaScript
从延迟中排除 JS 脚本

这应该是唯一的,因此如果您有通用文件名,则可以添加部分路径以在您的站点上包含插件的文件夹。 例子: /generatepress/js/menu.min.js

延迟疑难解答

如果您认为延期导致问题,您可以随时取消选中上述选项以进行测试。

如何从延期中排除页面/帖子

您可以在单个帖子、页面或自定义帖子类型上排除 JavaScript 延迟。 在编辑器中,在右侧取消选中“延迟 JavaScript”。 这将从延迟中排除整个页面。 这对于结帐或联系我们页面可能比网站的其他部分有更多问题很有用。

如何在 WordPress 中延迟 JavaScript
单个页面上的 JS 延迟

perfmatters_defer_js 过滤器

perfmatters_defer_js filter 允许您操作 JS 延迟。 以下是如何仅在页面上关闭延迟的示例。

add_filter('perfmatters_defer_js', function($defer) {
      if(is_singular('page')) {
        return false;
    }
    return $defer;
});
声明:本站资源绿色无后门无广告,可放心下载。如无特殊说明或标注,均为本站原创发布,转载请注明出处!