如何在WordPress中延迟JavaScript解析（4种方法）

您是否通过性能测试工具运行您的wordpress网站，却遇到了延迟在WordPress中解析JavaScript的指令？

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都咖啡厅设计小微创业公司专业提供成都定制网页设计营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

实施此更改可以对您网站的页面加载时间产生积极影响，尤其是对于移动访问者。但是警告可能有点难以理解，这就是为什么我们要准确解释延迟解析JavaScript的含义以及如何在WordPress网站上实现此更改。

以下是您将在本文中学到的内容：

如果您只想直接跳到教程，可以单击上面列表中的最后一个链接。

在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的解析。首先，您可以将两个属性添加到脚本中：

这两个属性都允许访问者的浏览器在不暂停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提供的代码片段，然后将脚本添加到您的主题中，紧接在结束标记之前来实现此方法。

这是来自Varvy的代码：

确保将“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

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解析，我们建议您做两件事：
            

                当前名称：如何在WordPress中延迟JavaScript解析（4种方法）
                

                标题网址：http://www.shufengxianlan.com/qtweb/news15/51315.html
            
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联