Optimize CSS and Javascript

After images, CSS and Javascript are often the largest reason websites can be slow. Especially large and complicated Joomla templates can use many CSS and Javascript files. Loading all these resources takes time, especially if they are loaded as separate HTTP-requests. Minimizing these requests can be a huge timesaver for your website speed, so you need to do something about that. This is probably one of the biggest improvements in site performance that you can make. Basically, the subject can be split up in 5 steps, that I will discuss briefly here.

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 with the currently loaded modules and components, you may often find that a superfluous file is 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:

unset($this->_scripts[$this->baseurl .'/media/system/js/mootools-core.js']);
unset($this->_scripts[$this->baseurl .'/media/system/js/mootools-more.js']);
unset($this->_scripts[$this->baseurl .'/media/system/js/caption.js']);

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.

Combine resources

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.

Compress resources

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.

logo 500

Defer Javascript

This is a technique that is especially useful for pages that are heavy with Javascript, but also smaller pages can benefit. Deferring means that "the script is executed when the page has finished parsing" (see w3schools), meaning that loading of the page is not held until the script is executed. It is used for external javascript, not in-line. Technically, it means that the "defer" attribute is added to the script:

<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

Perfect examples of extensions for this purpose are JCH-Optimize, Scriptmerge and Jbetolo (check the links for reviews about these plugins).  They are all free extensions, and I fully advise either one of these to speed up your sites, especially the first two. All combine all CSS and Javascript files into one and compresses them. They can also defer or async Javascript, meaning the Javascript is only executed once the page has finished loaded. Whether the site still fully works as desired needs to be tested, but usually it does. If it doesn't, play with the parameters, this often solves things. Make sure to only use one of these at the same time!

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.