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?

Leave a Reply

Copyright 2020, All rights reserved. Yadda yadda.