Jason Weber Jason Weber - 4 months ago 17x
PHP Question

How do I defer or async this WordPress javascript snippet to load lastly for faster page load times?

I have various javascripts that are necessary plugins in one of my WordPress domains, and I know where in the php file it's called from.

I'm taking every measure I can take to speed up page loading times, and every speed tester on the web says to defer javascripts if possible.

I have read about the defer='defer' and the async functions in javascript and I think one of these will accomplish what I'm trying to accomplish. But I'm not understanding how I'd do so in a php file.

For instance, here is a snippet from one particular plugin's php file where the javascript file is being called:

function add_dcsnt_scripts() {

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );


I've read that it's best to do something like this for faster page loading times:

<script defer async src="..."></script>

But I don't know how to accomplish that within a php file. I want to do this with all of my javascript files.

How would I accomplish deferring or asyncing this javascript snippet to is loads last and speeds up page load times? What would be the ideal way to increase page load times across all browsers? Thanks for any guidance anybody can offer!


This blog post links to two plugins of interest:

Asynchronous Javascript
Improve page load performance by asynchronously loading javascript using head.js

WP Deferred Javascripts
*Defer the loading of all javascripts added with wp_enqueue_scripts, using LABJS (an asynchronous javascript library).*

Haven't tested them but checked the code and they do pretty fancy stuff with WordPress scripts enqueuing process.

But then WPSE comes to rescue:

// Adapted from https://gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url )
    if ( FALSE === strpos( $url, '.js' ) )
    { // not our file
        return $url;
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );