Performance vs plugin genrated javascript

Question

First off let me explain what I mean. I work on a company that got a WP page with a theme installed and a load of plugins, like YOAST, WooCommerce, more plugins for woo commerce etc etc. Those plugins and the theme itself, generate javascript code for our main webpage. Obviously, that is far from optimized and that's confirmed by: https://gtmetrix.com/ and google insights.

Here comes the question. Is there a way to override some of the js code, by making another "version" of them in the footer? I actually plan to make footer load a js file instead, including overrides, but since I barely know how it will behave, I thought I should ask if I think this right.

It might add to the amount of download plaintext that way. It isn't elegant, since it turns things a little spaghetti, but I plan in the future to make any js call, a call to a js file thus no footer override will be needed and no double code will be downloaded whatsoever, I just need a fast solution for the meantime. I asssume if I add to the amount of download plaintext, I will still might get parallel loading of scripts in compensation, thus loading time will get improved.

Pictures are small jpgs and they don't contribute on loading time in a significant way.

PageSpeed Score is 74% so there is a lot room for improvement. CSS and JS are the major factors.

Do I think this right? Any guides will be appreciated.

Answer 1

When enqueuing a custom script, you can write them to load in the footer - prior to the </body> tag - making them non-render blocking for most purposes, but they may still come up as render-blocking on testing tools, since they literally must be executed before the page HTML can be considered fully loaded. Instead, you will want to "defer" most, but not all scripts.

Deferring will mean literally adding the "defer" attribute to the script tag, and, to achieve the desired effect with scripts loaded by theme or plugin, WordPress offers the script_loader_tag filter, but you will need to exercise caution, since some scripts will break or cause other scripts to break if loaded too late. (You can try "async" instead, which might be preferable for scripts that you want or need to load somewhat earlier, if with some execution time penalty while the page load is occurring.)

This post explains in detail how you would go about the process of handling a potentially large number of scripts "by hand": https://wpshout.com/make-site-faster-async-deferred-javascript-introducing-script_loader_tag/ There are also several plugins available for the task - I use Async Javascript at many sites

Answer 2

Check this out : https://developer.wordpress.org/reference/functions/wp_enqueue_script/

The last parameter : bool $in_footer = false, set it to "true" and your scripts will load in footer.

Also, for this to not get overwritten, you can dequeue plugins scripts, and "requeue" them with different parameters :

function deregister_my_scripts{
wp_deregister_script('jquery');
wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"), false, '1.9.1', true);
}
add_action ('wp_enqueue_scripts', 'deregister_my_scripts');

Look at the source of your page and check the script's ID (here: jquery)

But honestly, optimizing is really a difficult task when you are using pre built plugins, the more you have, the more you will run into troubles, did you give premium plugins like wp_rocket a try? Not only it lets you defer what you want, but you can also minify most plugins scripts and css. Also an image optimisation service like imagify can really boost your pages loading time. Doing it manually is not worth the trouble, except if you want to learn of course...