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!

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

  1. 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
    • Hey,
      Did you ever find a solution with the Avada Slider? I am currently dealing with this same issue and it is driving me mad haha.

      Reply
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. Worked great on desktop (thank you)! And my mobile Page Insights score skyrocketed…
    But then I realized all my images on mobile disappearred — just a black background was left in each image’s place. Not sure if there’s a workaround for this…?

    Reply
  8. Holy smokes! My GTMetrix score instantly went from a horrible 38% F to 83% B after I added this code! Sure hope everything on my site continues to work because this is an awesome solution to what was seeming to be an inescapable problem. THANK YOU!!!

    Reply
    • The only thing that is a little off is that my social media icons are just blank squares and my image galleries work, but not in the expected way, so for that I just had to set them up a little differently. I’ll take these minor issues over a horrid page speed score any day. Thanks again.

      Reply
  9. This solution is still solving the issue on the latest AO release, 4+ years after it was written.
    About time for the AO developer to include it as an option in the settings! πŸ™‚

    Reply
    • It’s there; disable “aggregate all JS”, enable “don’t aggregate but defer” + “also defer inline JS” and remove all default exclusions πŸ™‚ and those will be the default settings for new installs from AO 3.0 onwards πŸ™‚

      Reply

Leave a Reply to frank Cancel reply

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