WordPress jQuery is Render-Blocking in PageSpeed Insights

PageSpeed Insights Score

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

Comments:

  1. Mose says:

    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?

    • James Parsons says:

      Fixed – WordPress was stripping the apostrophes and replacing them with a variation that was breaking the code. Please try it now!

  2. ilias says:

    hello, thank you for the effort, but the last code breaks my website, it gives syntax error, can you check it please?

    • James Parsons says:

      Hi Ilias! I’ve updated the code, it looks like my code formatter was on the fritz. It should be working now 🙂

  3. KIHO SHIN says:

    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?

    • James Parsons says:

      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 🙂

  4. Takuya says:

    Thanks for this!

  5. Sibi Paul says:

    May I know… Where to Add this Code?

    in Function.php

    or WP-Config?

  6. Alex Garcia says:

    hi, this code do i just add at the end of the functions.php file?

    thank you

  7. Derek says:

    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?

    • James Parsons says:

      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!

  8. Zsolt says:

    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?

    • James Parsons says:

      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!

  9. John says:

    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?

    • James Parsons says:

      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 🙂

  10. Derek says:

    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.

Leave a Reply

Copyright 2020, All rights reserved. Yadda yadda.