通过页脚wordpress中的jquery文件呈现阻塞答案

【问题标题】：Render blocking by jquery file in the footer wordpress通过页脚wordpress中的jquery文件呈现阻塞
【发布时间】：2020-12-13 15:25:53
【问题描述】：

在谷歌页面洞察力中进行页面速度测试时，我的网站出现问题。我正在使用 swift 缓存插件，它具有异步加载 js 文件的选项，而启用此选项会破坏站点并在控制台中显示错误 jQuery 未定义。

我在页脚中有这些 js 文件。我需要在站点中运行功能的那些文件。

<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/inc/assets/js/jquery-1.12.4.min.js"></script>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/inc/assets/js/holder.js"></script>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/inc/assets/js/bootstrap-datepicker.js"></script>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/inc/assets/js/jquery.datetimepicker.full.js"></script>

第一个 jQuery 文件导致了这个问题。当我删除此页面时，速度会提高，但会破坏网站上的某些功能。

我还尝试将此 jQuery 文件排除在合并之外。通过这样做，网站运行良好，但页面速度再次下降。

有人可以帮我解决这个问题吗？

提前致谢

【问题讨论】：

标签： javascript html jquery wordpress pagespeed

【解决方案1】：

签出脚本标签属性。试试 defer 属性吧。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

【讨论】：

【解决方案2】：

在给出解决方案之前，以下是 async 和 defer 属性的作用：

async — 异步告诉浏览器在准备好后执行脚本，而不阻塞任何 HTML 解析

defer — Deferred 告诉浏览器延迟脚本执行，直到 HTML 解析完成

为此，您可以在脚本标签中添加 defer 属性。

这里我分享了脚本标签中设置延迟属性的插件。 WP Deferred Javascripts

注意：WordPress 默认加载 jQuery，所以不要加载额外的 jQuery。

【讨论】：