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, 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!

31 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.

    1. Gideon


      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.

  2. fazli

    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) …

  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.

  4. Peter

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

    What is the recommened tool for testing this.

    Thanks, Peter

      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

  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.”

  7. Nicolas


    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?



  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() {

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


    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 ;-)

  9. LL

    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…?

  10. Miss Pix

    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!!!

    1. Nicole

      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.

      1. Naseef

        Can you explain how you did that? I’d really appreciate it. The same issue is there with my website also.

  11. Pingback: Fixed Render-blocking JQuery in wordpress with Autoptimize | Rajesh blog

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.