How to fix render-blocking jquery.js in Autoptimize

Autoptimize by default excludes inline JS and jquery.js from optimization. Inline JS is excluded because it is a typical cache-buster (due to changing variables in it) and as inline JS often requires jQuery being available as a consequence that needs to be excluded as well. The result of this “safe default” however is that jquery.js is a render-blocking resource. So even if you’re doing “inline & defer CSS” your Start-Render time (or one of the variations thereof) will be sub-optimal.

Jonas, the smart guy behind criticalcss.com, proposed to embed inline JS that requires jQuery in a function that executes after the DomContentLoaded event. And so I created a small code snippet as a proof of concept which hooks into Autoptimize’s API and that seems to work just fine;

The next step is having some cutting-edge Autoptimize users test this in the wild. You can view/ download the code from this gist  and add it as a code snippet (or if you insist in your theme’s functions.php). Your feedback is more then welcome, I’m sure you know where to find me!

20 thoughts on “How to fix render-blocking jquery.js in Autoptimize

  1. Flux

    Dang…it does remove the render blocking and makes site score much better, but the Fusion slider (Avada) doesn’t loads anymore… and I get jquery errors…
    Too bad, it really improved the Page Speed scores. This Avada Slider is such a pain tho.

    Reply
  2. fazli

    Hello.
    Thank you so much for this solution!
    May I ask you to write an example of how to install this code? For those who are not programmers) …

    Reply
  3. Derek Haines

    I tried the code as I only have one page that needs to have jquery.js unoptimized to work. It is an HTML5 World Continents Map plugin.

    But unfortunately, the code didn’t help.

    Reply
  4. Peter

    Hi Frank, I get an error message posting it in code snippets.

    What is the recommened tool for testing this.

    Thanks, Peter

    Reply
      1. Peter

        Dag Frank,

        Parse Error : syntax error, unexpected ‘<' on line 1
        Parse Error : syntax error, unexpected 'add _action' (T_STRING), expecting ':' on lne 2

        Groet, Peter

  5. Peter

    Then Wordfence gets very nervous.

    403 Forbidden
    A potentially unsafe operation has been detected in your request to this site, and has been blocked by Wordfence.

    If you are an administrator and you are certain this is a false positive, you can automatically whitelist this request and repeat the same action.

    I am certain this is a false positiv

    Reply
  6. Speed Demon

    On a related topic:

    How about adding a checkbox in Autoptimize to remove the jQuery ‘Migrate’ library?

    It’s probably not used by the vast majority of WordPress sites, but nevertheless is (currently) always loaded along with jQuery by default.

    “What is jQuery Migrate? The jQuery Migrate module (jquery-migrate.min.js) is a javascript library that preserves compatibility of jQuery code developed for versions of jQuery older than 1.9. JQuery Migrate also allows developers to detect deprecated code that is no longer supported by the latest jQuery libraries and to adapt it according to the newest versions of jQuery 1.9 and higher.”

    Reply
  7. Nicolas

    Hello,

    I am sorry, after adding the code to function.php, should we remove js/jquery/jquery.js from the list of scripts that are excluded from Autoptimize or keep it?

    Thanks,

    Nicolas

    Reply
  8. No Recaptcha

    It almost worked ;) Actually, it worked really well in my limited test, and removed jquery from blocking resources. However, I found a scenario when it doesn’t work. I use Ultimate Member plugin, with supplementary Google ReCAPTCHA extension. This allows to put recaptcha on a login page.

    But when using with this snippet, recaptcha doesn’t show. Console reports message “reCAPTCHA couldn’t find user-provided function: onloadCallback” coming from Google’s recaptcha_en.js. onloadCallback() is defined in the code generated by UM recaptcha plugin, something like this:

    var onloadCallback = function() {
    jQuery(‘.g-recaptcha’).each( function(i) {
    grecaptcha.render(jQuery(this).attr(‘id’), {
    ‘sitekey’: jQuery(this).attr(‘data-sitekey’),
    ‘theme’: jQuery(this).attr(‘data-theme’)
    });
    });
    };

    function um_recaptcha_refresh() {
    jQuery(‘.g-recaptcha’).html(”);
    onloadCallback();
    }

    Unfortunately, with this snippet enabled captcha doesn’t work. If I disable it, it works (but jquery starts to show up as blocking resource).

    Help?

    Reply
    1. frank Post author

      In that case some custom development would be needed to make sure the code doesn’t trigger on the login page. Do-able though ;-)

      Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.