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!

13 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

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.