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

加快页面绘制的最佳方法是 推迟 所有非关键的 JavaScript。 这意味着 JavaScript 在 HTML 解析期间下载,并将在页面完成加载后执行(当解析器完成时)。 把它想象成把所有的 JavaScript 推到瀑布的底部。 这是通过添加一个 defer
每个 JavaScript 文件的属性。
笔记: 延迟脚本按照它们在 HTML 文档中出现的顺序执行。
如何使用 Perfmatters 延迟 JavaScript
您可以在 Perfmatters 中启用 JavaScript 延迟来修复渲染阻止警告并加快页面的绘制。 请按照以下步骤操作。
无需多次推迟 JavaScript。 如果您已经使用另一个插件推迟它,那么您可以继续使用它或切换到 Perfmatters。
步骤1
单击进入 Perfmatters 插件设置。

第2步
单击“资产”选项卡。

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

有一个检查脚本是否已经有一个 defer
属性,因此您不必担心它会应用多个属性。
第4步
向下滚动并单击“保存更改”。
包括 jQuery
“包含 jQuery”还有一个可选功能。 这允许推迟作为 WordPress 一部分的 jQuery 核心。 笔记: 这需要打开“延迟 JavaScript”。
警告: 我们建议单独测试或将其关闭。 许多插件和主题都需要 jQuery,推迟它可能会导致您的网站出现问题。

如何添加 JavaScript 延迟排除
根据需要 JavaScript 文件或标记的顺序,推迟它可能会导致问题。 如果需要,您可以通过 src URL 将其排除。
通过脚本添加 JS 排除
对于 JavaScript 文件,在“从延迟中排除”框中输入脚本的名称。 如 script.js
(每行一个)。

这应该是唯一的,因此如果您有通用文件名,则可以添加部分路径以在您的站点上包含插件的文件夹。 例子: /generatepress/js/menu.min.js
延迟疑难解答
如果您认为延期导致问题,您可以随时取消选中上述选项以进行测试。
如何从延期中排除页面/帖子
您可以在单个帖子、页面或自定义帖子类型上排除 JavaScript 延迟。 在编辑器中,在右侧取消选中“延迟 JavaScript”。 这将从延迟中排除整个页面。 这对于结帐或联系我们页面可能比网站的其他部分有更多问题很有用。

perfmatters_defer_js 过滤器
这 perfmatters_defer_js filter
允许您操作 JS 延迟。 以下是如何仅在页面上关闭延迟的示例。
add_filter('perfmatters_defer_js', function($defer) {
if(is_singular('page')) {
return false;
}
return $defer;
});