Prevent resources from loading
The easiest way to prevent resources is to simply look at your frontend extensions and decide whether or not you need them, but we already talked about that. Even than though, you may often find that superfluous files are loaded that you know you can get rid of. Sometimes you know that you have files that are not needed on all pages, or not at all. Mootools could be one of these, but also others. Using extensions like Mootools Enabler / Disabler or JCC - JS CSS Control could solve that for you. If you build your own templates, you could even prevent stuff in a more structural way. Check out this presentation by Sander Potjer on that topic (it's dutch, but the code samples speak for themselves).He uses the unset command to prevent anything he does not need from loading in his template's index.php file:
And what about NoNumber's ReReplacer: You can replace the whole line for the resource in the source of your code with nothing, which actually prevents loading of this resource if you think it's not necessary. It's a bit dirty, but it works.
By combining all separate CSS and JS files into just one CSS file and one JS file saves a lot of HTTP-requests. Even if the combined size is still the same, this alone will already make your site faster. In most cases, extensions do not care whether its resources are loaded separately or combined. Read on to see how we can achieve this.
Next to that, also the size of the individual files is important. Minimizing files can be very useful. Minimizing means that all whitespace is removed, changing a structured code block into an unreadable block of code. For browsers, this makes no difference, they do not need whitespace. You can minimize the individual files with tools like http://www.csscompressor.com, but you can also use plugins for that, read on.
<script src="https://cdn.joomlaseo.com/js/script.js" defer>......</script>
This is a very useful technique, can save a lot of loading time. The downside is that it sometimes breaks functionality, as some functions require immediate execution of the script to function well. Make sure you test!
Load resources asynchronously
Whenever possible, try to load resources asynchronously, so that they do not block further loading of the site. One example could be to load your Google Analytics asynchronously, they offer a snippet for that on their documentation pages that you can use to replace the standard script.
Async and defer do not work at the same time. You can specify them both, but in that case, usually the async version will be used (if the browser supports it). Note that these 2 options, whichever one is used, can have a serious effect, and make the site another 10-15% faster on top of the other optimizations.
Optimization plugins: JCH Optimize, Scriptmerg and JBetolo
The techniques described sofar are not easy to implement, but happily we have some clever developers who have built plugins that can help us do so: