您是否通过性能测试工具运行您的WordPress网站，却遇到了延迟在WordPress中解析JavaScript的指令？
实施此更改可以对您网站的页面加载时间产生积极影响，尤其是对于移动访问者。但是警告可能有点难以理解，这就是为什么我们要准确解释延迟解析JavaScript的含义以及如何在WordPress网站上实现此更改。
以下是您将在本文中学到的内容：
- 在WordPress中延迟解析JavaScript意味着什么？
- 如何判断是否需要延迟解析JavaScript
- 延迟解析JavaScript的不同方法
- 如何在WordPress中延迟JavaScript解析（4种方法）
如果您只想直接跳到教程，可以单击上面列表中的最后一个链接。
在WordPress中延迟解析JavaScript意味着什么？
如果您曾经通过Google PageSpeed Insights、GTmetrix或其他页面速度测试工具运行过您的WordPress网站，您可能会遇到过延迟解析JavaScript的建议。
但是……这实际上是什么意思？为什么它是一个重要的性能考虑因素？
基本上，当有人访问您的WordPress网站时，您网站的服务器会将您网站的HTML内容传送到该访问者的浏览器。
然后访问者的浏览器从顶部开始，并通过代码呈现您的网站。如果在从上到下的移动过程中找到任何JavaScript，它将停止呈现页面的其余部分，直到它可以获取并解析JavaScript文件。
它会对找到的每个脚本执行此操作，这可能会对您网站的页面加载时间产生负面影响，因为访问者需要在浏览器下载和解析所有JavaScript时盯着空白屏幕。
如果您网站的核心功能不需要某个脚本（至少在初始页面加载时），您不希望它妨碍加载网站更重要的部分，这就是为什么这些页面速度测试工具总是告诉你推迟对JavaScript的解析。
那么延迟解析JavaScript是什么意思呢？
本质上，您的网站会告诉访问者的浏览器等待下载和/或解析JavaScript，直到您网站的主要内容已经完成加载。此时，访问者已经可以看到您的页面并与之交互，因此下载和解析该JavaScript的等待时间不再具有如此负面的影响。
通过加快内容的首屏加载时间，您可以让Google感到高兴，并为您的访问者创造更好、更快的体验。
如何判断是否需要延迟解析JavaScript
要测试您的WordPress站点是否需要延迟解析JavaScript，您可以通过GTmetrix运行您的站点。
GTmetrix会给你打分，还会列出需要推迟的特定脚本：
在GTmetrix中延迟解析JavaScript测试
延迟解析JavaScript的不同方法
有几种不同的方法可以延迟JavaScript的解析。首先，您可以将两个属性添加到脚本中：
- Async
- Defer
这两个属性都允许访问者的浏览器在不暂停HTML解析的情况下下载JavaScript。但是，不同之处在于，虽然async不会暂停HTML解析以获取脚本（如默认行为那样），但它会暂停HTML解析器以在获取脚本后执行脚本。
使用defer，访问者的浏览器在解析HTML时仍然会下载脚本，但他们会等待解析脚本，直到HTML解析完成。
与Web一起成长的这张图表很好地解释了这种差异：
图形解释异步与延迟
Varvy的Patrick Sexton推荐的另一种选择是，仅在初始页面加载完成后才使用脚本调用外部JavaScript文件。这意味着在初始页面加载完成之前，访问者的浏览器不会下载或执行任何JavaScript。
最后，您将看到的另一种方法是将JavaScript移动到页面底部。但是，这种方法并不是一个很好的解决方案，因为即使您的页面将很快可见，访问者的浏览器仍会将页面显示为正在加载，直到所有脚本完成。这可能会阻止一些访问者与您的页面进行交互，因为他们认为内容没有完全加载。
如何在WordPress中延迟JavaScript解析（4 种方法）
要在WordPress中延迟JavaScript的解析，您可以采取三种主要途径：
- 插件——有一些很棒的免费和高级WordPress插件可以推迟JavaScript解析。我们将向您展示如何使用两个流行的插件来做到这一点。
- Varvy方法——如果您精通技术，您可以直接编辑您网站的代码并使用Varvy的代码片段。
- Functions.php文件——您可以将代码片段添加到子主题的functions.php文件中以自动延迟脚本。
您可以单击上方直接跳转到您喜欢的方法或通读所有技术以找到最适合您的方法。
1. 免费的异步JavaScript插件
Async JavaScript是来自Frank Goossens的免费WordPress插件，他是流行的Autoptimize插件背后的同一个人。
它为您提供了一种使用异步或延迟延迟解析JavaScript的简单方法。
首先，您可以从WordPress.org安装并激活免费插件。然后，转到设置 → Async JavaScript以配置插件。
在顶部，您可以启用插件的功能并在异步和延迟之间进行选择。记住：
- Async下载JavaScript，同时仍解析HTML ，但随后暂停HTML解析以执行 JavaScript。
- Defer在仍然解析HTML的同时下载JavaScript并等待执行它，直到HTML解析完成。
如何使用异步JavaScript插件
再往下，你还可以选择如何处理jQuery。许多主题和插件严重依赖jQuery，因此如果您尝试推迟解析jQuery脚本，您可能会破坏您网站的一些核心功能。最安全的方法是排除jQuery，但您可以尝试推迟它。只要确保彻底测试您的网站。
再往下，您还可以手动包含或排除特定的脚本被延迟，包括一个很好的用户友好功能，让您可以定位在您的网站上活跃的特定主题或插件：
异步JavaScript包含/排除规则
2.使用WP Rocket插件
除了一堆其他性能优化技术外，WP Rocket还可以帮助您在WP Rocket仪表盘的“File Optimization”选项卡中延迟JavaScript的解析。在JavaScript Files部分中查找Load JavaScript deferred选项。
与Async JavaScript插件一样，WP Rocket还允许您排除jQuery以避免网站内容出现问题：
如何使用WP Rocket延迟解析JavaScript
3. 使用Varvy推荐的方法（代码）
早些时候，我们提到Varvy的Patrick Sexton建议使用一个代码片段，该代码片段会等待下载和执行JavaScript，直到您的网站完成初始页面加载。
您可以通过调整Varvy提供的代码片段，然后将脚本添加到您的主题中，紧接在结束</body>标记之前来实现此方法。
这是来自Varvy的代码：
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
确保将“defer.js”替换为您要延迟的JavaScript文件的实际文件名/路径。然后，您可以使用wp_footer钩子通过子主题的functions.php文件注入代码。
使用这种方法，您可以将Varvy的代码包装成这样：
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( 'wp_footer', 'my_footer_scripts' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}
4.通过functions.php文件延迟JavaScript
最后，您还可以通过将以下代码片段添加到您的functions.php文件中，将defer属性添加到您的JavaScript文件中，而无需插件：
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );
本质上，这个片段告诉WordPress将defer属性添加到除jQuery之外的所有JavaScript文件。
它既快速又简单，但它并没有像Async JavaScript插件提供的那样为您提供细粒度的控制。
小结
推迟WordPress网站上的JavaScript解析是一个重要的性能考虑因素。
一旦您使用上述方法之一来延迟WordPress中的JavaScript解析，我们建议您做两件事：
- 测试您的网站以确保推迟某些脚本不会破坏首屏内容的关键。同样，这通常发生在jQuery中，这就是为什么很多工具允许您排除jQuery.js。但是，它也可能发生在其他脚本中。
- 再次通过GTmetrix运行您的站点，以确保您的站点延迟了尽可能多的脚本（如果排除jQuery，您可能无法获得完美的分数——但您的分数应该会更好）。
评论留言