{"id":96841,"date":"2019-12-03T09:39:21","date_gmt":"2019-12-03T15:39:21","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=96841"},"modified":"2025-10-15T15:28:09","modified_gmt":"2025-10-15T20:28:09","slug":"defer-parsing-javascript-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/defer-parsing-javascript-wordpress\/","title":{"rendered":"How To Defer Parsing of JavaScript in WordPress"},"content":{"rendered":"\n

When you use a site performance testing tool such as GTmetrix<\/a>, Google PageSpeed Insights<\/a>, or WP Engine Speed Tool<\/a> it might suggest you \u201cdefer the parsing of JavaScript.\u201d While common, this recommendation can also be confusing. <\/p>\n\n\n\n

In short, browsers render and download JavaScript from the server before loading any other site content. This can interrupt page load times and negatively impact site speed. Fortunately, you can defer this so the browser can load the site content first, without waiting for the scripts to finish downloading. <\/p>\n\n\n\n

One way to defer JavaScript parsing is with WP Engine\u2019s Page Speed Boost<\/a>. In addition to deferring JavaScript parsing, Page Speed Boost offers more than 30 other front-end optimizations to help ensure pages are served lightning fast and your users aren\u2019t kept waiting.<\/p>\n\n\n\n

In this post, we\u2019ll explain the different methods you can use to defer JavaScript parsing. We\u2019ll provide step-by-step instructions and break down the pros and cons of each method. Let\u2019s get started!<\/p>\n\n\n\n\n\n

Before you get started<\/h2>\n\n\n\n

Before we get into the different methods you can use for deferring parsing of JavaScript, it\u2019s important to first backup your site<\/a> in case the worst happens and you lose your site. Then, you\u2019ll be safe to proceed with either of the methods we\u2019ll discuss. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Method 1: Deferring parsing of JavaScript via functions.php<\/em><\/h2>\n\n\n\n

When you need to manually defer JavaScript files in WordPress, the recommended approach is to use a custom function that leverages the core WordPress API. This method is for users comfortable with editing theme files and gives you precise control over which scripts are deferred.<\/p>\n\n\n\n

To defer a script, you’ll use the wp_enqueue_script()<\/code> or wp_register_script()<\/code> <\/strong>functions and include a strategy<\/code> argument. This tells WordPress to automatically add the defer<\/code> or async<\/code> attribute to the script’s HTML tag. Here is an example of how to enqueue a custom script with the defer<\/code> attribute. You can add this code to a child theme’s<\/a> functions.php<\/code> file or to a mu-plugin<\/a>. <\/p>\n\n\n\n

<\/p>\n\n\n\n

function my_custom_scripts() {\n    wp_enqueue_script(\n        'my-custom-script',\n        get_template_directory_uri() . '\/js\/my-custom-script.js',\n        array(),\n        '1.0',\n        array(\n            'in_footer' => true,\n            'strategy'  => 'defer',\n        )\n    );\n}\nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );\n<\/code><\/pre>\n\n\n\n
In this code snippet, the strategy <\/code>key with a value of defer<\/code> ensures the script will be deferred. The in_footer<\/code> key moves the script to the footer (just before the closing <\/body><\/code> tag), ensuring the browser renders all the visible content first. <\/p>\n\n\n\n
defer vs. async<\/strong><\/h4>\n\n\n\n
WordPress supports both defer<\/code> and async<\/code> attributes. It’s important to choose the right one for your specific script:<\/p>\n\n\n\n