将JavaScript移动到底部的好处
JavaScript是一种客户端编程语言。它由用户的浏览器执行,而不是由您的网络服务器执行。当您将JavaScript放置在顶部时,浏览器可能会在加载页面的其余部分之前执行或处理JavaScript。当JavaScript移动到底部时,您的网络服务器将快速渲染页面,然后用户的浏览器将执行JavaScript。由于所有服务器端渲染已经完成,JavaScript将在后台加载,从而整体加载速度更快。
这将在使用Google页面速度或Yslow测试时提高您的速度评分。Google和其他搜索引擎现在将页面速度视为显示搜索结果时的性能指标之一。这意味着加载速度更快的网站将在搜索结果中更突出。
在WordPress中正确添加脚本的方法
WordPress有一个强大的排队系统,允许主题和插件开发者将他们的脚本按需排队和加载。正确地排队脚本和样式可以显著提高您的页面加载速度。
为了向您展示一个基本示例,我们将一个小的JavaScript添加到WordPress主题中。将您的JavaScript保存在一个.js文件中,并将该.js文件放在主题的js目录中。如果您的主题没有JavaScript目录,请创建一个。放置脚本文件后,编辑主题的functions.php文件并添加此代码:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
在此代码中,我们使用了wp_register_script()函数。此函数具有以下参数:
<?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>
要将脚本添加到WordPress页面的页脚或底部,您只需要将$in_footer参数设置为true。
我们还使用了另一个函数get_template_directory_uri(),该函数返回模板目录的URL。此函数应在WordPress主题中用于排队和注册脚本和样式。对于插件,我们将使用plugins_url()函数。
问题:
问题是有时WordPress插件会将其自己的JavaScript添加到或页面正文中。为了将这些脚本移动到底部,您需要编辑插件文件并正确地将脚本移动到底部。
查找JavaScript源
在Web浏览器中打开您的网站并查看页面源代码。您将看到指示文件位置和来源的JavaScript文件链接。例如,下面的截图告诉我们,我们的脚本属于一个名为‘test-plugin101’的插件。脚本文件位于js目录中。
有时您会看到直接添加到页面中的JavaScript,而不是通过单独的.js文件链接的。在这种情况下,您需要逐一停用所有插件。在每次停用插件后刷新页面,直到找到将脚本添加到页面的插件。如果停用所有插件后JavaScript仍然存在,那么尝试切换到另一个主题,看看JavaScript是否是由您的主题添加的。
注册和排队脚本
一旦找到在头部部分添加JavaScript的插件或主题,下一步是找到插件调用文件的地方。在您的主题或插件的PHP文件中,您将看到对特定.js文件的调用。
如果插件或主题已经使用排队方法添加JavaScript文件,那么所有您需要做的就是在插件或主题中更改wp_register_script函数,为$in_footer参数添加true。像这样:
wp_register_script('script-handle', plugins_url('js/script.js', __FILE__), '', '1.0', true);
假设您的插件或主题在头部或内容之间添加了原始JavaScript。在插件或主题文件中找到原始的JavaScript代码,复制JavaScript并将其保存在.js文件中。然后,使用wp_register_script()函数将JavaScript移动到底部。
编辑者注:重要的是要了解,当您对核心文件进行更改并更新插件时,您的更改不会被覆盖。更好的做法是取消注册脚本并从主题的functions.php文件中重新注册。请参阅本教程。
除了将脚本移动到页脚外,您还应考虑使用更快的社交媒体插件和延迟加载图像。除此之外,您还应使用W3 Total Cache和MaxCDN来提高网站速度。
我们希望这篇文章帮助您在WordPress中移动JavaScript到底部并提高页面速度。如有问题和反馈,请在下方留言。