After running my site through Google PageSpeed insights, I noticed that all of my JavaScript was being deferred except for the jQuery that comes with WordPress.
This was dinging by PageSpeed insights score, as it was telling me to eliminate the render-blocking resource (jQuery 1.12.4). My caching plugin wasn’t able to defer it along with the rest of my site’s JavaScript code, as it’s a core element in WordPress.
To resolve this, I had to deregister jQuery, and replace it with a new version from jQuery.com:
/**
* Remove built in jQuery and replace with hosted version to improve speed, prevent render blocking, and defer
*/
function my_enqueued_assets() {
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'script-name', '//code.jquery.com/jquery-1.12.4.min.js', array(), '1.12.4' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueued_assets' );
I’m pretty sure all of the latest versions of WordPress load 1.12.4, but check the source of your WordPress website to ensure that yours is the same.
This helped save nearly 1 full second from my page load time, and my score went up 6 points. Not a drastic difference, but still a welcomed improvement.
Oddly enough, when I tried using the Google Hosted Library with the above code, it wasn’t able to defer it either:
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
So, I stuck with the jQuery.com hosted version linked above instead.
I’m using WP Rocket for caching, but this should also use with other caching plugins, or plugins that help to defer javascript.
Please let me know if this helped you in the comments below!
UPDATE:
There’s a second method that does the job as well; installing the plugin “Async Javascript”.
After installing, in the settings, there’s an area under “Quick Settings” that says “Apply Async”.
It’s important to check your console for JavaScript errors and make sure that it doesn’t break jQuery. jQuery can sometimes break when loaded with async or defer, but on my particular instance, it worked perfectly.
UPDATE June 2020:
Most of these methods are outdated. Here is a much more current and efficient version:
add_filter( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');
function replace_default_jquery_with_fallback() {
$ver = '1.12.4';
wp_dequeue_script( 'jquery' );
wp_deregister_script( 'jquery' );
// Set last parameter to 'true' if you want to load it in footer
wp_register_script( 'jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", '', $ver, false );
wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="'.includes_url( '/js/jquery/jquery.js' ).'"><\/script>\')' );
wp_enqueue_script ( 'jquery' );
}
Hi,
WordPress is throwing for the code $ver = ‘1.12.4’;
I checked the site and confirm the same version is present.
Can you help me on this?
Fixed – WordPress was stripping the apostrophes and replacing them with a variation that was breaking the code. Please try it now!
hello, thank you for the effort, but the last code breaks my website, it gives syntax error, can you check it please?
Hi Ilias! I’ve updated the code, it looks like my code formatter was on the fritz. It should be working now 🙂
I am a user of Oxygen Builder.
I have tried your solution (the latest), but it does not do anything.
Can you help me imprementing your solution to my site?
Hi Kiho! Thanks for your comment. I just responded to your email, it looks WordPress replaces the symbols ” and ‘ with their ASCII counterparts. You will have to replace these symbols on your end and then it will work just fine 🙂
Thanks for this!
Hi Takuya, I’m glad it helped!
May I know… Where to Add this Code?
in Function.php
or WP-Config?
In your theme’s functions.php file 🙂
hi, this code do i just add at the end of the functions.php file?
thank you
Yup! That should do it. Let me know how it goes.
Hey James,
Thanks for the snippet.
I added this snippet to my functions.php file. It didn’t break the site but not seeing the change in page speed insights. Do I need to clear my cache?
Hi Derek! Yes you’ll certainly need to clear your cache. Check your page source of your website as well and verify which version of jQuery is being loaded!
Hi!
It works for me thank you! 🙂
Is it needed to check for the latest version regularly on jQuery.com?
If so, what section need to be changed in the snippet?
Hey Zsolt, happy to hear! You shouldn’t have to check it very often, maybe after every major WordPress release, incase they decide to change it. It’s unlikely they’ll change to a newer jQuery version any time soon, but you never know!
Hello James,
Hope you are well. Good article and very nice site, https://www.contentpowered.com/ could you share what WP theme you are using?
Thanks John!
That site is custom designed / built.
The WordPress coding was done by CodeMyConcept and the homepage illustration was by Mike at CreativeMints.
The rest was designed by me 🙂
Hello Again,
I tried adding the updated version of the snippet. It has switched files in page speed insights saying now I need to defer ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js
Oh well.
I tried this now i’m getting a page speed suggestion of:
avoid document.write()
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds.
Back to the drawing board.
Hey David!
You can always comment this line out in the code.
This is a fail-safe that runs with JavaScript incase Google’s API isn’t able to be reached for whatever reason.
On WordPress, this would normally be deferred if you were using a plugin like WP Rocket or Autoptimize, but if you’re not, you could simply get rid of it.
Hi,
Im test my site with Pagespeed insight. Eliminate render-blocking resources: /wp-includes/js/jquery/jquery.min.js?ver=3.5.1
Im using Astra and Elementor.
So can i try with your snippet ? (change 1.1.24 to 3.5.1)
Hi SPT!
Yes, you should be able to 🙂
Hello! In versión 5.6.1 it does not work. ¿what is the solution?
Hey Victor! Check your page source to find out the jQuery version that your site is loading and adjust this code to match that same version.
I’m using the latest version of WordPress as well with no issues.
Thanks, it was driving me crazy for weeks.
No prob!
Hey James, thanks for this. I tried to change to true the last parameter, but it is still loading in the head. How could i change it?
Drop me an email, I’ll take a look.
Thank you.
Would be great to get the current jQuery version with PHP instead of doing $ver = ‘1.12.4’;
You can change the version easily to whichever version you want! That was the version WordPress shipped with back when this was first published.
Hi James and any other interested readers,
First off, James, thank you VERY much for this. I’d been pulling my hair out on this one for ages so it’s good to finally have a solution that doesn’t break my site!
As of 22 September 2021, I can confirm this code still works to eliminate render blocking.
Because my current version of WordPress (5.8.1) uses JQuery version 3.6.0, I just changed this in the code (and also double checked the URL on the google api side to ensure it was correct) from 1.12.4 to 3.6.0.
When I put it in my functions.php file, initially it did not work. So then, on line 7 of the code, I changed it to ‘true’ so that it would run in the footer.
I cleared the cache, purged my JS on my site (this feature is part of my theme), then I refreshed the site to ensure nothing was broken. I retested it in Lighthouse and lo and behold, it worked!
If it’s not working for you or it breaks your site, double check to make sure you did NOT copy over the line numbers into your code.
Thanks again James! You’re a living legend!
Cheers
Rod
Hey Rod, you’re welcome! Really happy that worked for you too.