Defer parsing of JavaScript for WordPress

HTML5 Asynchronous to the Rescue

Defer parsing of JavaScript for WordPress

We are adding this to the functions.php of your Child Theme

If you don’t have one, simply create new document/file and name it functions.php

Adding async atribute (tag)

<?php
if (!(is_admin() )) {
  function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
  }
  add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}
?>

Additional Resources

That’s all, if you know the better way, please feel free to share with us.

Image source xhtmled/Flickr

36 Replies to “Defer parsing of JavaScript for WordPress”

  1. Hi there !
    Thanks for the code, but I have the same error. when I’m opening the console, i get an error like this :

    Uncaught ReferenceError: myinit is not defined

    I placed the part of code in the functions.php file of my theme.

    Thanks for your help.

  2. Hi Emil,

    I have the same problem as mentioned above – the console in web developer gives our the error “myinit is not defined”.

    I’ve used your code in a must-use plugin for WP Multisite, and while it works pretty well as whole, some js powered elements aren’t functioning…

    1. Seems like it’s a deprecated filter you’re using in the code above. It should be esc_url instead of clean_url

      Also, I believe the abovementioned code will not work pre-WP 3.6+

  3. Hey Emile,

    The final code that I wrote (thanks to your article), and that seems to be working peachy is:

    // Defer jQuery Parsing using HTML5's defer property
    function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );


    A few things to note:
    * Turns out clean_url works and esc_url doesn’t in this instance
    * Make sure to wrap it in an is_admin() IF statement, otherwise it breaks tiny MCE editor
    * The myinit part is redundant, HTML5 spec only talks about setting it to true / false without any init function being required.
    * We used defer rather than async as scripts were breaking when not loading in the right order

    Hope it helps someone out there…

  4. Hi Jase,

    The code we ended up using looked like this:

    // Defer jQuery Parsing using HTML5’s defer property
    if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.js’ ) ) return $url;
    return “$url’ defer “;
    }
    add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
    }

    It’s a bit different to the authors code, and simply put it means that the code should only run on the front end, and not in the WP backend. The reason for this is pretty much because it’ll break some of the main scripts (particularly tinymce).

    You’ll also notice that we used “defer” instead “async” because the order in which scripts are loaded is important in our case.

    Hope it helps…

      1. Yep,

        we’re running multisite and used in a must-use plugin; But for regular installations, putting it in the functions.php file should be fine…

        You can check whether it’s working by running a site report at http://gtmetrix.com/ — it’ll give you some other great starting points for optimising your website.

  5. Hi,

    I put this code into the theme’s functions.php and get the following error :-

    Parse error: syntax error, unexpected ‘$url’’ (T_VARIABLE) in functions.php on line 89

    any ideas ?

  6. Seems like the copy/pasting of the code into your functions.pgp file came with some unintended characters.

    ‘$url’’ should simply ‘$url’ – try copy/pasting it into notepad or another text editor first 🙂

  7. i have been going nuts trying to properly defer parsing of Javascript. I’ve been looking how to do this in .htaccess until I came across your article here. When i added your code i put in the functions.php file after here:

    // Enqueue jQuery

    // =============================================================================

    function prospect_scripts_method() {

    wp_deregister_script( 'jquery' );

    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' );

    wp_enqueue_script( 'jquery' );

    }

    add_action( 'wp_enqueue_scripts', 'prospect_scripts_method' );

    // Defer jQuery Parsing using HTML5′s defer property
    if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.js’ ) ) return $url;
    return “$url’ defer “;
    }
    add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
    }

    but then when i tried to log in to wp-admin for the site it would not let me so i removed it.. can you help??

    thanks

  8. hi, tnx for the code. I put this code in my custom-functions.php file
    then I checked my gtmetrix report and nothing has changed. plz help me. what else i should do?
    by the way, i’m a beginner. plz consider this in ur reply 🙂

  9. I think this code is not for every theme . It just ruined my whole theme , even I cant open my admin dashboard . Thank god I had backup so it helped me to regain my website.

    1. Code is for every Theme, however there are many factors where the “code” will not work the way it should and yes, even mess things up. Note that this is an outdated, no longer supported version.

Leave a Reply

Your email address will not be published. Required fields are marked *