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!

7 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

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.