{"id":28654,"date":"2021-01-01T04:11:40","date_gmt":"2021-01-01T04:11:40","guid":{"rendered":"https:\/\/rarathemes.com\/blog\/?p=28654"},"modified":"2024-08-21T13:35:42","modified_gmt":"2024-08-21T07:50:42","slug":"defer-parsing-javascript-wordpress","status":"publish","type":"post","link":"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/","title":{"rendered":"How to Defer Parsing of JavaScript in WordPress"},"content":{"rendered":"\n<p>Whether you run a WordPress website or any other website, you should know that a critical measure of your website\u2019s performance is the page speed.&nbsp;<\/p>\n\n\n\n<p>If you use any of the site performance testing tools like GTmetrix or Google PageSpeed Insights, it might suggest you defer JavaScript\u2019s parsing.&nbsp;<\/p>\n\n\n\n<p>Now, the phrase can be confusing, but it plays a significant role in boosting your website\u2019s load time.&nbsp;<\/p>\n\n\n\n<p><strong>So, what does it mean by the defer parsing of JavaScript?<\/strong><\/p>\n\n\n\n<p>Well, we will talk about this later in detail. In short, defer parsing of JavaScript lets the browser load the website content first, without waiting for the scripts to finish downloading.&nbsp;<\/p>\n\n\n\n<p>This process is essential as browsers render and download JavaScript from the server before loading any other website content. This harms your website\u2019s speed and interrupts your page load time.&nbsp;<\/p>\n\n\n\n<p>Thankfully, defer parsing of JavaScript is the best way to mitigate the issue.&nbsp;<\/p>\n\n\n\n<p>I have explained the five proven methods to defer parsing of JavaScript in WordPress in this article. But before that, let\u2019s get more insights into what the phrase means and know if you need to defer Javascript\u2019s parsing.&nbsp;<\/p>\n\n\n\n<p>Let\u2019s get underway!&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#What_Do_You_Mean_by_Defer_Parsing_of_JavaScript_in_WordPress\" >What Do You Mean by Defer Parsing of JavaScript in WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#How_to_Know_You_Need_to_Defer_Parsing_of_JavaScript\" >How to Know You Need to Defer Parsing of JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Async_vs_Defer_Attributes\" >Async vs. Defer Attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Why_Do_You_Need_to_Defer_Parsing_of_JavaScript\" >Why Do You Need to Defer Parsing of JavaScript?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#1_To_Boost_Search_Rankings\" >1. To Boost Search Rankings:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#2_To_Increase_Conversion_Rate\" >2. To Increase Conversion Rate:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#3_To_Provide_Better_User_Experience\" >3. To Provide Better User Experience:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Five_Different_Methods_to_Defer_Parsing_of_JavaScript_in_WordPress\" >Five Different Methods to Defer Parsing of JavaScript in WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Method_1_Using_Free_Async_JavaScript_Plugin\" >Method 1: Using Free Async JavaScript Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Method_2_Using_WP_Rocket_Plugin\" >Method 2: Using WP Rocket Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Method_3_Using_W3_Total_Cache_Plugin\" >Method 3: Using W3 Total Cache Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Method_4_Using_Varvys_Recommended_Method\" >Method 4: Using Varvy\u2019s Recommended Method<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Method_5_Using_functionsphp_File\" >Method 5: Using functions.php File<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Alternative_Plugins_To_Defer_Parsing_of_JavaScript_In_WordPress\" >Alternative Plugins To Defer Parsing of JavaScript In WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#1_Speed_Booster_Pack\" >1. Speed Booster Pack:<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Pros_of_Speed_Booster_Pack\" >Pros of Speed Booster Pack:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Cons_of_Speed_Booster_Pack\" >Cons of Speed Booster Pack:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#2_WP_Deferred_JavaScripts\" >2. WP Deferred JavaScripts:<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Pros_of_WP_Deferred_JavaScripts\" >Pros of WP Deferred JavaScripts:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Cons_of_WP_Deferred_JavaScripts\" >Cons of WP Deferred JavaScripts:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#FAQs_Frequently_Asked_Questions\" >FAQs (Frequently Asked Questions)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#What_is_defer_parsing_or_loading_JavaScript\" >What is defer parsing or loading JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#How_can_I_remove_render-blocking_JavaScripts_from_my_website\" >How can I remove render-blocking JavaScripts from my website?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#What_other_tools_can_I_use_to_identify_non-critical_JavaScripts_on_my_website\" >What other tools can I use to identify non-critical JavaScripts on my website?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Can_I_defer_the_parsing_of_JavaScript_in_WordPress_using_the_Autoptimize_plugin\" >Can I defer the parsing of JavaScript in WordPress using the Autoptimize plugin?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/rarathemes.com\/blog\/defer-parsing-javascript-wordpress\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_Do_You_Mean_by_Defer_Parsing_of_JavaScript_in_WordPress\"><\/span>What Do You Mean by Defer Parsing of JavaScript in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before you understand the technique to defer JavaScript parsing, you should know how a web browser renders a web page.&nbsp;<\/p>\n\n\n\n<p>To begin with, when your browser sends a request to your web server, it receives the page, which gets downloaded in the form of an HTML document. This HTML document includes text, code that renders various DOM elements, and different resources like images, stylesheets, and scripts.&nbsp;<\/p>\n\n\n\n<p>By default, the browser downloads these resources in a sequence. The rending of the web page resumes only after all of the resources get downloaded. Besides, the large resources adversely affect the load time of your web page.&nbsp;<\/p>\n\n\n\n<p>Whenever your browser goes through the code to render your website, it stops rendering if it finds any JavaScript. The process gets halted until it can fetch and parse the JavaScript file. This negatively impacts the speed of your website.&nbsp;<\/p>\n\n\n\n<p>Thankfully, the process of deferring parsing of JavaScript notifies the browser to wait to download and parse a JavaScript file until after your website\u2019s main content completes loading. To this point, your visitors can interact with your website so that the time needed to download and parse JavaScript no longer jeopardizes your site\u2019s load time.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Know_You_Need_to_Defer_Parsing_of_JavaScript\"><\/span>How to Know You Need to Defer Parsing of JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Like we said earlier, the site performance testing tools like GTmetrix, Google PageSpeed Insights, or WP Engine Speed Tool often suggest you defer parsing of JavaScript when they analyze your website.&nbsp;&nbsp;<\/p>\n\n\n\n<p>GTmetrix, in particular, provides you a grade and lists out specific scripts that need to be deferred to improve your page load speed.&nbsp;<\/p>\n\n\n\n<p>You can just enter the URL of your website and wait for the tool to assess it. When it completes assessing, head over to the PageSpeed tab and expand the Defer parsing of JavaScript section.&nbsp;<\/p>\n\n\n\n<p>This section offers you a list of non-essential scripts that are loaded during the rendering process, as shown in the example below:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"357\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/defer-parsing-of-javascript.png\" alt=\"Defer parsing of  JavaScript\" class=\"wp-image-31758\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/defer-parsing-of-javascript.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/defer-parsing-of-javascript-300x153.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/defer-parsing-of-javascript-118x60.png 118w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Async_vs_Defer_Attributes\"><\/span>Async vs. Defer Attributes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>It\u2019s vital to ensure that downloading a script doesn\u2019t interfere with the web page\u2019s rendering. There are two ways to do this:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Async<\/li><li>Defer<\/li><\/ul>\n\n\n\n<p>You can include the <strong>async <\/strong>attribute to the script tag as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src= \u201cpath\/to\/script\u201d async&gt; &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This tells your browser to load the script asynchronously. To be precise, the browser downloads the resource as soon as it encounters it in the code but proceeds to parse the HTML while the resource is still being downloaded.&nbsp;<\/p>\n\n\n\n<p>On the other hand, you can add the <strong>defer <\/strong>attribute to the script tag as:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src= \u201cpath\/to\/script\u201d defer&gt; &lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This tells your browser not to download the resources until it completes the parsing of the web page. Once it finishes parsing and rendering, it downloads the list of deferred scripts that it encountered earlier.&nbsp;<\/p>\n\n\n\n<p>The major difference between async and defer attributes is when the resources get downloaded.&nbsp;<\/p>\n\n\n\n<p>If you have a compact web application, it is recommended that you use defer to ensure inter-dependencies are satisfied. Besides, if you have only a few scripts in the rendering path, you wouldn\u2019t mind any difference between the use of both of these attributes.&nbsp;<\/p>\n\n\n\n<p><strong><em>Here\u2019s an example to understand async and defer attributes:<\/em><\/strong><\/p>\n\n\n\n<p>Let\u2019s say that you have two scripts JS1 and JS2.&nbsp;<\/p>\n\n\n\n<p>The condition is that JS2 appears in the code after JS1, JS2 has a dependency on JS1, but JS1 is larger than JS2.&nbsp;<\/p>\n\n\n\n<p>Now, if you use <strong>async<\/strong>, it could be possible that JS2 finishes downloading before JS1 gets completely downloaded. This leads to an error as JS2 gets executed in the absence of JS1.&nbsp;<\/p>\n\n\n\n<p>On the other hand, if you use <strong>defer<\/strong>, JS1 and JS2 get sequentially downloaded, making sure there is no error.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Do_You_Need_to_Defer_Parsing_of_JavaScript\"><\/span>Why Do You Need to Defer Parsing of JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We have mentioned earlier that page speed is the most critical aspect that makes or breaks your website\u2019s performance. Since JavaScript files are pretty large and they take longer to load, delaying their execution for a while proves handy to boost your website\u2019s speed.&nbsp;<\/p>\n\n\n\n<p>The following are some of the reasons why you need to defer parsing of JavaScript in WordPress:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_To_Boost_Search_Rankings\"><\/span>1. To Boost Search Rankings:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When Google or any other search engines evaluate your website for a search engine ranking, they take page speed as the critical point of measure. If your website loads faster, it is bound to appear on the first page of search engine results.&nbsp;<\/p>\n\n\n\n<p>As per the <a href=\"https:\/\/cognitiveseo.com\/blog\/22865\/page-speed-seo\/#4\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">research<\/a>, 1 out of 2 people expect a page to load in less than 2 seconds. If your website can\u2019t load appropriately within 2 seconds, Google will favor your competitor instead of you. Hence, it may negatively impact your search rankings.&nbsp;<\/p>\n\n\n\n<p>Therefore, it\u2019s necessary to defer parsing of JavaScript so that there is a significant boost in your website\u2019s load time.&nbsp;<\/p>\n\n\n\n<p>If you are looking for more options to speed up your WordPress website, check out these <a class=\"rank-math-link\" href=\"https:\/\/rarathemes.com\/blog\/on-page-seo-techniques\/\">7 on-page SEO techniques that\u2019ll double your search traffic<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_To_Increase_Conversion_Rate\"><\/span>2. To Increase Conversion Rate:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If your website loads slower, your visitors are bound to leave it and look for other better options. Since your users are often looking for quick and reliable information on your website, a slow-loading page can be a mood-killer.&nbsp;<\/p>\n\n\n\n<p>Similarly, if you run an affiliate site and sell products through your website, you would expect your users to take more action on it. However, a slower web page can discourage your visitors from taking any action.&nbsp;<\/p>\n\n\n\n<p>The <a href=\"https:\/\/blog.hubspot.com\/marketing\/page-load-time-conversion-rates\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">research <\/a>presented on HubSpot shows that a <strong><em>delay of even one second in the website\u2019s loading time drops the conversion rate by 7%<\/em><\/strong>. That\u2019s how crucial it is to boost your website\u2019s load time and increase conversion rate.&nbsp;<\/p>\n\n\n\n<p>The technique to defer parsing of JavaScript helps you boost your website\u2019s speed and improve its conversion rate.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_To_Provide_Better_User_Experience\"><\/span>3. To Provide Better User Experience:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>No brainer! Slower websites create a terrible user experience. If your website takes more time than usual to load, you can expect your visitors to leave your website, and thus it increases its bounce rate.&nbsp;<\/p>\n\n\n\n<p>You should consider deferring parsing of JavaScript so that the JS files get executed only after the content of your web page loads. This technique helps you <a href=\"https:\/\/rarathemes.com\/blog\/ultimate-guide-speed-up-wordpress\/\" class=\"rank-math-link\">speed up your WordPress website<\/a> and offer an excellent best experience to your users.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Five_Different_Methods_to_Defer_Parsing_of_JavaScript_in_WordPress\"><\/span>Five Different Methods to Defer Parsing of JavaScript in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To defer the parsing of JavaScript, you can choose any of the three main routes, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Plugin<\/li><li>Varvy Method<\/li><li>Functions.php File<\/li><\/ul>\n\n\n\n<p>Using these routes, we have created five different methods to defer parsing of JavaScript in WordPress.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_1_Using_Free_Async_JavaScript_Plugin\"><\/span>Method 1: Using Free Async JavaScript Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/async-javascript\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Async JavaScript<\/a> is a free WordPress plugin that helps eliminate render-blocking JavaScript in the above-the-fold content.<\/p>\n\n\n\n<p>The plugin offers you full control of which scripts to add or exclude an async or defer attribute to increase your WordPress website\u2019s performance. The thing you should remember before choosing between async and defer is:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Async <\/strong>downloads JavaScript while still parsing HTML files but then pauses the HTML parsing to execute the JavaScript files.&nbsp;<\/li><li><strong>Defer <\/strong>downloads JavaScript while still parsing HTML files and waits to execute it after HTML parsing is completed.&nbsp;<\/li><\/ul>\n\n\n\n<p>Here is each and every step to defer parsing of JavaScript in WordPress using the Async JavaScript plugin:<\/p>\n\n\n\n<p>First, redirect to <strong><em>Plugins -&gt; Add New<\/em><\/strong> from your WordPress dashboard.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"269\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard.png\" alt=\"add new plugin from dashboard\" class=\"wp-image-31787\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard.png 665w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard-300x121.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard-148x60.png 148w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure><\/div>\n\n\n\n<p>Now look for the Async JavaScript plugin on the search bar and then <strong><em>Install <\/em><\/strong>and <strong><em>Activate <\/em><\/strong>it.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"352\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javasript-plugin-install.png\" alt=\"install async JavaScript plugin\" class=\"wp-image-31744\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javasript-plugin-install.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javasript-plugin-install-300x151.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javasript-plugin-install-119x60.png 119w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javasript-plugin-install-476x238.png 476w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javasript-plugin-install-358x179.png 358w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<p>Once you complete installing and activating the plugin, go to the <strong><em>Settings <\/em><\/strong>page to make the necessary changes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"431\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Settings-page-of-Async.png\" alt=\"Setting options to Async JavaScript Plugin\" class=\"wp-image-31750\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Settings-page-of-Async.png 701w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Settings-page-of-Async-300x184.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Settings-page-of-Async-98x60.png 98w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/figure>\n\n\n\n<p>Now, tick the <strong><em>Enable Async JavaScript<\/em><\/strong> option and select <strong><em>Defer <\/em><\/strong>as Async JavaScript Method as shown in the image below:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"688\" height=\"576\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-JavaScript-plugin-setting-.png\" alt=\"async JavaScript plugin setting\" class=\"wp-image-31746\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-JavaScript-plugin-setting-.png 688w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-JavaScript-plugin-setting--300x251.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-JavaScript-plugin-setting--72x60.png 72w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/figure>\n\n\n\n<p>For more advanced options, you can scroll down to the page. Here, you can include the scripts you want to apply the async and defer tags to and also add a list of scripts to exclude.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"334\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/advanced-settings-of-async-javascript.png\" alt=\"Advanced settings of async JavaScript\" class=\"wp-image-31752\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/advanced-settings-of-async-javascript.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/advanced-settings-of-async-javascript-300x143.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/advanced-settings-of-async-javascript-126x60.png 126w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>You can also list out the plugins and themes that you can to be excluded from any changes that the Async JavaScript plugin makes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"492\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javascript-plugin-and-theme-exclusion.png\" alt=\"async javascript plugin and  theme exclusion\" class=\"wp-image-31754\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javascript-plugin-and-theme-exclusion.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javascript-plugin-and-theme-exclusion-300x211.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/async-javascript-plugin-and-theme-exclusion-85x60.png 85w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Once you make the necessary changes, scroll down to the bottom of the page and hit the <strong><em>Save Settings<\/em><\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"292\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-settings-of-async-javascript.png\" alt=\"async javascript save settings\" class=\"wp-image-31756\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-settings-of-async-javascript.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-settings-of-async-javascript-300x125.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-settings-of-async-javascript-144x60.png 144w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_2_Using_WP_Rocket_Plugin\"><\/span>Method 2: Using WP Rocket Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/wp-rocket.me\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">WP Rocket <\/a>is termed as one of the most powerful WordPress caching plugins that makes your website load fast in a few clicks. The plugin offers page caching, cache preloading, static file compression, and many other cool features.&nbsp;<\/p>\n\n\n\n<p>Other than that, WP Rocket also helps you defer the parsing of JavaScript in the File Optimization tab of the WP Rocket dashboard.&nbsp;<\/p>\n\n\n\n<p>Once you purchase, install, and activate the WP Rocket plugin, redirect to the <strong><em>Settings <\/em><\/strong>option and click on the <strong><em>File Optimization<\/em><\/strong> tab from the menu to get started.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"447\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-plugin-file-optimization.png\" alt=\"wp rocket plugin file optimization\" class=\"wp-image-31791\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-plugin-file-optimization.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-plugin-file-optimization-300x192.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-plugin-file-optimization-94x60.png 94w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>This image is showing wp rocket file optimization.<\/figcaption><\/figure>\n\n\n\n<p>After that, scroll down to the JavaScript Files section, tick on the<strong><em> Load JavaScript deferred <\/em><\/strong>option, and enable the <strong><em>Safe Mode for jQuery<\/em><\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"536\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-javascript-files.png\" alt=\"wp rocket javascript files\" class=\"wp-image-31793\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-javascript-files.png 686w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-javascript-files-300x234.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/wp-rocket-javascript-files-77x60.png 77w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/figure>\n\n\n\n<p>When you complete the entire process, scroll down to the end of the page and click on the <strong><em>Save Changes<\/em><\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"695\" height=\"396\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-changes-in-wprocket.png\" alt=\"save changes in wprocket\" class=\"wp-image-31795\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-changes-in-wprocket.png 695w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-changes-in-wprocket-300x171.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/save-changes-in-wprocket-105x60.png 105w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_3_Using_W3_Total_Cache_Plugin\"><\/span>Method 3: Using W3 Total Cache Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/w3-total-cache\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">W3 Total Cache<\/a> is another essential WordPress plugin that improves the SEO and user experience of your website. It boosts your website\u2019s performance and reduces load time by leveraging the Content Delivery Network (CDN) integration.&nbsp;<\/p>\n\n\n\n<p>W3 Total Cache is free and very effective. You can use this plugin to defer parsing of JavaScript on your WordPress website.&nbsp;<\/p>\n\n\n\n<p>Here is every step to defer parsing of JavaScript in WordPress using the W3 Total Cache plugin:<\/p>\n\n\n\n<p>First, redirect to <strong><em>Plugins -&gt; Add New<\/em><\/strong> from your WordPress dashboard.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"665\" height=\"269\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard.png\" alt=\"add new plugin from dashboard\" class=\"wp-image-31787\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard.png 665w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard-300x121.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/add-new-plugin-from-dashboard-148x60.png 148w\" sizes=\"auto, (max-width: 665px) 100vw, 665px\" \/><\/figure><\/div>\n\n\n\n<p>Now look for the W3 Total Cache plugin on the search bar and then <strong><em>Install <\/em><\/strong>and <strong><em>Activate <\/em><\/strong>it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"356\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/install-W3-Total-Cache-Plugin-.png\" alt=\"Install W3 Total Cache Plugin\" class=\"wp-image-31764\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/install-W3-Total-Cache-Plugin-.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/install-W3-Total-Cache-Plugin--300x153.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/install-W3-Total-Cache-Plugin--118x60.png 118w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Once you complete installing and activating the plugin, go to the <strong><em>Performance -&gt; General Settings <\/em><\/strong>from your WordPress left sidebar to make necessary changes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"383\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-general-settings.png\" alt=\"General setting of W3 Total Cache Plugin\" class=\"wp-image-31766\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-general-settings.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-general-settings-300x164.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-general-settings-110x60.png 110w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>After that, scroll down to the <strong><em>Minify <\/em><\/strong>section and tick on the <strong><em>Enable <\/em><\/strong>option. Additionally, select the <strong><em>Manual <\/em><\/strong>option from the <strong><em>Minify mode<\/em><\/strong> and click on the <strong><em>Save all settings<\/em><\/strong> button to continue.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"522\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Minify-Code-.png\" alt=\"Minify Code\" class=\"wp-image-31768\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Minify-Code-.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Minify-Code--300x224.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Minify-Code--80x60.png 80w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Now, redirect to the <strong><em>Performance -&gt; Minify<\/em><\/strong> tab from the left sidebar and scroll down to the <strong><em>JS <\/em><\/strong>heading, where you can see the Operations in areas section with two HTML tags.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"397\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Minify-setting-options.png\" alt=\"Minify setting options\" class=\"wp-image-31773\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Minify-setting-options.png 699w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Minify-setting-options-300x170.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Minify-setting-options-106x60.png 106w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<p>Select <strong><em>Non-blocking using the \u201cdefer\u201d<\/em><\/strong> option in the on the Embed type of the <strong><em>Before &lt;\/head&gt;<\/em><\/strong> tag.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"540\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/JS-Minify-Setting.png\" alt=\"JS Minify Setting\" class=\"wp-image-31770\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/JS-Minify-Setting.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/JS-Minify-Setting-300x231.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/JS-Minify-Setting-78x60.png 78w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>This Image shows the setting of JS minigy<\/figcaption><\/figure>\n\n\n\n<p>In the same section, you can see the <strong><em>JS file management<\/em><\/strong> heading where you need to select your active <a href=\"https:\/\/rarathemes.com\/wordpress-themes\/\" class=\"rank-math-link\">WordPress theme<\/a> and click on the <strong><em>Add a Script <\/em><\/strong>button to include the URI of JavaScript which you want to parse.&nbsp;<\/p>\n\n\n\n<p>You can add as many URIs as you want by clicking on the <strong><em>Add a Script<\/em><\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"360\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-js-file-management.png\" alt=\"w3 total cache JS file management\" class=\"wp-image-31797\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-js-file-management.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-js-file-management-300x154.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/w3-total-cache-js-file-management-117x60.png 117w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Once you complete the changes, click on the <strong><em>Save Setting &amp; Purge Caches<\/em><\/strong> button to continue.&nbsp;<\/p>\n\n\n\n<p>After that, scroll down to the <strong><em>CSS <\/em><\/strong>section. You can then click on the <strong><em>Add a style sheet<\/em><\/strong> button under the <strong><em>CSS file management<\/em><\/strong> header to insert CSS stylesheet URIs. You can add more than one based on the suggestions provided by online speed monitoring tools.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"689\" height=\"352\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/CSS-file-management.png\" alt=\"CSS file management\" class=\"wp-image-31799\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/CSS-file-management.png 689w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/CSS-file-management-300x153.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/CSS-file-management-117x60.png 117w\" sizes=\"auto, (max-width: 689px) 100vw, 689px\" \/><\/figure>\n\n\n\n<p>Once you complete the changes, click on the <strong><em>Save Setting &amp; Purge Caches<\/em><\/strong> button to continue.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_4_Using_Varvys_Recommended_Method\"><\/span>Method 4: Using Varvy\u2019s Recommended Method<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Another method, recommended by Patrick Sexton of Varvy, uses a script to call an external JavaScript file once the initial page load is completed. This means that the browser won\u2019t download or execute any JavaScript until the web page finishes loading.&nbsp;<\/p>\n\n\n\n<p>You can use this method by tweaking the code snippet that Varvy supplies and then adding the script to your theme file immediately before the closing <strong><em>&lt;\/body&gt;<\/em><\/strong> tag.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s the code to add in the body part of your theme to defer parsing of JavaScript in WordPress:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\"&gt;\nfunction downloadJSAtOnload() {\nvar element = document.createElement(\"script\");\nelement.src = \"defer.js\";\ndocument.body.appendChild(element);\n}\nif (window.addEventListener)\nwindow.addEventListener(\"load\", downloadJSAtOnload, false);\nelse if (window.attachEvent)\nwindow.attachEvent(\"onload\", downloadJSAtOnload);\nelse window.onload = downloadJSAtOnload;\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p><strong><em>Note:<\/em><\/strong> Make sure that you change the <strong>defer.js<\/strong> to the name of your external JavaScript file. After that, you can use the wp_footer hook to inject the code via your child theme\u2019s <strong><em>functions.php<\/em><\/strong> file.&nbsp;<\/p>\n\n\n\n<p>With this approach, you can wrap Varvy\u2019s code like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\nDefer parsing of JavaScript with code snippet from Varvy\n*\/\nadd_action( 'wp_footer', 'my_footer_scripts' );\nfunction my_footer_scripts(){\n?&gt;\nREPLACE_WITH_VARVY_SCRIPT\n&lt;?php\n}<\/code><\/pre>\n\n\n\n<p><strong><em>Here is every step of this method explained with clear images:<\/em><\/strong><\/p>\n\n\n\n<p>Login to your WordPress dashboard and navigate to <strong><em>Appearance -&gt; Theme Editor<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"352\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting.png\" alt=\"Theme editor setting\" class=\"wp-image-31777\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting.png 667w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting-300x158.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting-114x60.png 114w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<p>Now, click on the header.php file from the right side of the screen and then paste the code mentioned above before closing &lt;\/body tag&gt;. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"440\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/header-php-file.png\" alt=\"Header.php File\" class=\"wp-image-31780\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/header-php-file.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/header-php-file-300x189.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/header-php-file-95x60.png 95w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>After that, click on the<strong><em> Update File <\/em><\/strong>button.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"532\" height=\"329\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Update-Header-php-file.png\" alt=\"Update header.php file\" class=\"wp-image-31783\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Update-Header-php-file.png 532w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Update-Header-php-file-300x186.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/06\/Update-Header-php-file-97x60.png 97w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_5_Using_functionsphp_File\"><\/span>Method 5: Using functions.php File<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you have an idea about WordPress development, you should be familiar with the fact that you shouldn\u2019t add scripts directly through the HTML markup. Instead, you need to use built-in WordPress functions to request resources and also <a href=\"https:\/\/rarathemes.com\/blog\/backup-wordpress-website\/\" class=\"rank-math-link\">Backup your website<\/a> if necessary.<\/p>\n\n\n\n<p>You can use the defer attribute to your Javascript files by adding the code snippet to your <strong><em>functions.php<\/em><\/strong> file.&nbsp;<br>For that, you need to go to <strong><em>Theme Editor<\/em><\/strong> from your WordPress dashboard. After that, click on <strong><em>functions.php<\/em><\/strong> and add the following code to it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function defer_parsing_of_js( $url ) {\n\n    if ( is_user_logged_in() ) return $url; \/\/don't break WP Admin\n    if ( FALSE === strpos( $url, '.js' ) ) return $url;\n    if ( strpos( $url, 'jquery.js' ) ) return $url;\n    return str_replace( ' src', ' defer src', $url );\n\n}\n\nadd_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );<\/code><\/pre>\n\n\n\n<p>This snippet tells WordPress to add the defer attribute to all of your JavaScript files except JQuery.&nbsp;<br>You can also easily add the following code to use async or defer attribute to your JavaScript files through the <strong><em>functions.php<\/em><\/strong> file:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter('script_loader_tag', 'add_defer_tags_to_scripts');\n\nfunction add_defer_tags_to_scripts($tag){\n\n    # List scripts to add attributes to\n    $scripts_to_defer = array('script_a', 'script_b');\n    $scripts_to_async = array('script_c', 'script_d');\n \n    # add the defer tags to scripts_to_defer array\n    foreach($scripts_to_defer as $current_script){\n        if(true == strpos($tag, $current_script))\n             return str_replace(' src', ' defer=\"defer\" src', $tag);\n    }\n \n    # add the async tags to scripts_to_async array\n    foreach($scripts_to_async as $current_script){\n        if(true == strpos($tag, $current_script))\n             return str_replace(' src', ' async=\"async\" src', $tag);\n    }\n     \n    return $tag;\n }<\/code><\/pre>\n\n\n\n<p>Well, don\u2019t forget that before you add the async and defer attributes to the script tags, you need to enqueue each script so that WordPress can access it. Here\u2019s the code for it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action('wp_enqueue_scripts', 'enqueue_custom_js');\nfunction enqueue_custom_js() {\n\n    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'\/script_a.js');\n    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'\/script_b.js');\n    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'\/script_c.js');\n    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'\/script_d.js');\n\n}<\/code><\/pre>\n\n\n\n<p>When you are done adding code to the functions.php file, click on the <strong><em>Update File<\/em><\/strong> button.&nbsp;<\/p>\n\n\n\n<p><strong><em>Here is each and every step of this method explained with clear images:<\/em><\/strong><\/p>\n\n\n\n<p>Login to your WordPress dashboard and navigate to <strong><em>Appearance -&gt; Theme Editor<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"667\" height=\"352\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting.png\" alt=\"Theme editor setting\" class=\"wp-image-31777\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting.png 667w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting-300x158.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Theme-editor-setting-114x60.png 114w\" sizes=\"auto, (max-width: 667px) 100vw, 667px\" \/><\/figure>\n\n\n\n<p>Now, click on the <strong><em>functions.php<\/em><\/strong> file located on the right side of the screen. You can then paste the code mentioned above and click on the <strong><em>Update File <\/em><\/strong>button to save the necessary changes.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"427\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/update-function-php-file.png\" alt=\"How to find and update the functions-php\" class=\"wp-image-31785\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/update-function-php-file.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/update-function-php-file-300x183.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/update-function-php-file-98x60.png 98w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alternative_Plugins_To_Defer_Parsing_of_JavaScript_In_WordPress\"><\/span>Alternative Plugins To Defer Parsing of JavaScript In WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you are searching for other options than Async JavaScript and WP Rocket plugins to defer parsing of JavaScript in WordPress, you have plenty of them. Some of them include:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Speed_Booster_Pack\"><\/span>1.<a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\" href=\"https:\/\/wordpress.org\/plugins\/speed-booster-pack\/\" target=\"_blank\"> Speed Booster Pack:<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This is a free WordPress plugin with an easy-to-use interface to assist you with JavaScript optimization and plenty of other speed-optimization techniques.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pros_of_Speed_Booster_Pack\"><\/span><strong>Pros of Speed Booster Pack:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Very simple and easy to use and comes with an interactive user interface<\/li><li>Helps with JavaScript optimization, CSS optimization, lazy loading and Content Delivery Network (CDN) integration<\/li><li>Updated regularly for exceptional performance and bug improvements<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cons_of_Speed_Booster_Pack\"><\/span><strong>Cons of Speed Booster Pack:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>There\u2019s a risk that enabling this plugin or any of its features may conflict with other plugins on your website<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_WP_Deferred_JavaScripts\"><\/span>2. <a aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\" href=\"https:\/\/wordpress.org\/plugins\/wp-deferred-javascripts\/\" target=\"_blank\">WP Deferred JavaScripts:<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>This WordPress plugin defers the loading of all JavaScripts added by the way of wp_enqueue_script(), using LABJS. The result is the proper optimization of loading time.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pros_of_WP_Deferred_JavaScripts\"><\/span><strong>Pros of WP Deferred JavaScripts:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Very easy to use and is one of the most popular solutions on the market<\/li><li>Explicitly designed to defer parsing of JavaScript in WordPress, not just as an add-on feature<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cons_of_WP_Deferred_JavaScripts\"><\/span><strong>Cons of WP Deferred JavaScripts:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Infrequent updates and maybe incompatible with the newer versions of WordPress<\/li><li>May cause other plugins on your website to break<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"FAQs_Frequently_Asked_Questions\"><\/span>FAQs (Frequently Asked Questions)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1608098911651\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_is_defer_parsing_or_loading_JavaScript\"><\/span>What is defer parsing or loading JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The defer parsing or loading JavaScript means loading the JavaScript files only after your website\u2019s content gets loaded. It means that it won\u2019t take part in loading the page or the critical rendering path.\u00a0<\/p>\n<p>When you defer JavaScript\u2019s parsing, your website won\u2019t wait till JavaScript loads to show your content to your visitors. The website displays content at first, and then only CSS and JavaScript files get loaded.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1608098929074\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"How_can_I_remove_render-blocking_JavaScripts_from_my_website\"><\/span>How can I remove render-blocking JavaScripts from my website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The most useful approach to removing the unnecessary JavaScripts is to defer its parsing before other website elements. You can use another strategy by minimizing the unnecessary JS scripts that add value to your site. We also recommend you try concatenating both the JavaScripts and CSS together.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1608098945206\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"What_other_tools_can_I_use_to_identify_non-critical_JavaScripts_on_my_website\"><\/span>What other tools can I use to identify non-critical JavaScripts on my website?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Well, there are many online tools other than GTmetrix to identify which JavaScripts are critical or not. Some of them are as follows:<\/p>\n<p><strong>1. <\/strong><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\"><strong>Google PageSpeed Insights:<\/strong><\/a><\/p>\n<p>This PageSpeed Insights tool from Google helps you identify what your website lacks in terms of speed and performance. The tools offer some valuable suggestions on what steps you need to take to improve your website\u2019s load time with detailed insights.\u00a0\u00a0\u00a0<\/p>\n<p>It displays your website\u2019s score with different color codes: Red for low, Orange for average, and Green for good. Similarly, the tool displays the URL of JS scripts with their transfer size and potential savings. You can then follow its instructions and defer all non-critical JS\/styles.\u00a0<\/p>\n<p><strong>2. <\/strong><a href=\"https:\/\/www.pingdom.com\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\"><strong>Pingdom Website Speed Test:<\/strong><\/a><\/p>\n<p>Pingdom Website Speed Test is another popular tool that assists with website tracking, monitoring, and testing. Using this tool, you can select from seven different testing server locations worldwide to analyze your website\u2019s performance.\u00a0<\/p>\n<p>The tool also offers a list of recommendations similar to other website testing tools. You can scroll down and observe the suggestions in the Improve Page Performance section. We recommend you to choose \u2018Put JavaScript at the bottom\u2019 for better performance.\u00a0\u00a0<\/p>\n<p>However, deferring these JavaScript codes is the easiest and most effective method to prevent JS scripts from slowing down your WordPress website.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1608098972645\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><span class=\"ez-toc-section\" id=\"Can_I_defer_the_parsing_of_JavaScript_in_WordPress_using_the_Autoptimize_plugin\"><\/span>Can I defer the parsing of JavaScript in WordPress using the Autoptimize plugin?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes, you can! <a href=\"https:\/\/wordpress.org\/plugins\/autoptimize\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener nofollow\" class=\"rank-math-link\">Autoptimize <\/a>is a useful plugin to help you defer parsing of JavaScript. To carry out the process, simply install and activate the plugin from the Plugins tab on your WordPress dashboard and follow these instructions:<\/p>\n<p>Once you install and activate the Autoptimize plugin, go to the <strong><em>Settings <\/em><\/strong>page and select the JS, CSS &amp; HTML option at the top of the page.<\/p>\n<p>Now tick on the <strong><em>Optimize JavaScript Code<\/em><\/strong> option, and then you will unlock other options as shown in the image below. Just tick the <strong><em>Aggregate JS-files <\/em><\/strong>option and leave others as they are.<\/p>\n<p>Additionally, the plugin lets you exclude JavaScripts, for which you don\u2019t want to add the non-render blocking feature.<\/p>\n<p>Once you make the necessary changes, scroll down to the end of the page and click on the <strong><em>Save Changes<\/em><\/strong> button.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>It is very important to defer the parsing of JavaScript in WordPress to improve your website\u2019s speed and performance. We hope you would find this article insightful as we have presented the different ways to carry out this technique, which involves using plugins and adding codes to the theme files yourself.&nbsp;<\/p>\n\n\n\n<p>In case you find it difficult to add codes to the theme files, we strongly recommend you to use the plugins mentioned above to defer parsing of JavaScript. Plugins are easy to use, and you can complete the whole process within a few clicks.&nbsp;<\/p>\n\n\n\n<p>After you complete the process, make sure to run your website through the site performance testing tools like GTmetrix to ensure your website is deferring as many scripts as possible.&nbsp;<\/p>\n\n\n\n<p>Do you have any concerns and queries on how to defer parsing of JavaScript in WordPress? Shoot them out in the comment section below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whether you run a WordPress website or any other website, you should know that a critical measure of your website\u2019s performance is the page speed.&nbsp; If you use any of &hellip; <\/p>\n","protected":false},"author":15,"featured_media":28690,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_be_single_description":"","_be_image_uploader":0,"_be_meta_button_label":"","_be_meta_button_url":"","_be_meta_button_newtab":false,"_be_meta_rel_attribute":"","footnotes":""},"categories":[15,3],"tags":[],"class_list":["post-28654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-tutorials","latest_post"],"_links":{"self":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/28654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/comments?post=28654"}],"version-history":[{"count":0,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/28654\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media\/28690"}],"wp:attachment":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media?parent=28654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/categories?post=28654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/tags?post=28654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}