How to Move JavaScript to the Footer in WordPress for Faster Page Speeds

Recently, a reader asked how to relocate JavaScript files to the bottom of their WordPress site to improve Google PageSpeed Insights scores. As experienced WordPress developers who've optimized hundreds of sites, we're excited to guide you. We've covered proper JavaScript and CSS enqueuing before; now, learn to shift scripts to the footer for quicker loads and better rankings.

Benefits of Moving JavaScript to the Footer

JavaScript runs client-side in the browser, not on your server. Top-placed scripts block page rendering until parsed. Footer placement lets HTML render first, with JS loading asynchronously afterward. This delivers faster perceived performance.

Expect higher scores in Google PageSpeed Insights and YSlow. Search engines prioritize speed in rankings, elevating fast sites in results.

The Right Way to Enqueue Scripts in WordPress

WordPress's enqueue system lets developers load scripts efficiently via themes and plugins, slashing load times.

For example, save your script as my-amazing-script.js in your theme's js folder (create if needed). Add this to functions.php:

function wpb_adding_scripts() {
    wp_register_script( 'my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js', array(), '1.1', true );
    wp_enqueue_script( 'my-amazing-script' );
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

The wp_register_script() parameters are: handle, source, dependencies, version, $in_footer. Set $in_footer to true for footer loading.

Use get_template_directory_uri() for themes; plugins_url() for plugins.

The Challenge: Many plugins enqueue scripts in the header without footer support.

Identify JavaScript Sources

View page source in your browser to spot script links and their origins, like this plugin example in the js directory.

For inline JavaScript, disable plugins sequentially and refresh until identified. If persistent, switch themes.

Properly Register and Enqueue Scripts

Locate the plugin/theme's wp_register_script call and add true for $in_footer:

wp_register_script( 'script-handle', plugins_url( '/js/script.js', __FILE__ ), array(), '1.0', true );

For inline JS, extract to a .js file and enqueue as above.

Editor's Note: Editing core files risks overwrites on updates. Instead, deregister and re-register from your theme's functions.php. See this tutorial.

Beyond footers, switch to lightweight social plugins, and use W3 Total Cache with MaxCDN for peak speed.

We hope this helps optimize your site. Questions? Comment below.