通过页脚 wordpress 中的 jquery 文件进行渲染阻止

Question

在谷歌页面洞察力中进行页面速度测试时，我的网站出现问题。 我正在使用 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 文件排除在合并之外。 通过这样做，网站工作正常，但页面速度再次下降。

有人可以帮我解决这个问题，如何解决这个问题？

提前致谢

Answer 1

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

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

Answer 2

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

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

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

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

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

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