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!
Well, the problem is I don’t see render blocking jquery in any of the available tests π
Well, you are aggregating
js/jquery/jquery.js
so you don’t need all that trickery πthx! it works!
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.
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.
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) …
you can use the code snippets plugin to add that code fazli π
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.
Hi Frank, I get an error message posting it in code snippets.
What is the recommened tool for testing this.
Thanks, Peter
What error message do you get 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
Don’t include the opening
<?php
tag 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
No experience with wordfence vs code snippets I’m afraid, maybe contact Wordfence support?
I went ahead and white-listed. Once you white list, reload the page and all should be fine.
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.β
It worked.
Thank you so much π
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
You should keep it Nicolas.
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?
In that case some custom development would be needed to make sure the code doesn’t trigger on the login page. Do-able though π
perfect! thanks
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…?
maybe, but would require custom development LL π
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!!!
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.
Can you explain how you did that? I’d really appreciate it. The same issue is there with my website also.
hello i added the code but it works for me only when i remove the wp-includes/js/jquery/jquery.js from the Exclude list is that right ? thanks
that’s the goal; not having to exclude jQuery any more π
ok so i removed the jquery from Exclude scripts from Autoptimize and its works fine now thanks a lot .
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! π
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 π