Tegenwoordig hebben de meeste Joomla websites erg veel CSS en Javascript bestanden, ook vrij simpele websites. Dit veroorzaakt om meerdere redenen vertraging bij het laden. Zowel het gewicht van de gezamelijke bestanden kan een probleem, alsook het aantal bestanden (HTTP-request) dat geladen moet worden. Als je dit kunt optimaliseren kun je een significante verbetering in je performance aanbrengen. Om dit te realiseren moet je naar de volgende 5 punten kijken. Let op: het klinkt allemaal ingewikkelder dan het is, de oplossing is vrij simpel:

Voorkom dat bestanden sowieso geladen worden

Afhankelijk van je Joomla kennis weet je soms dat bepaalde bestanden die geladen worden eigenlijk helemaal niet nodig zijn. De Javascript library MooTools is hier een voorbeeld van (alleen nodig voor beperkte funcies als frontend editing). MooTools kun je verwijderen met Mootools Enabler / Disabler en met JCC - JS CSS ControlJCC - JS CSS Control kun je helemaal elk gewenst CSS of Javascript bestand verwijderen. Daarnaast kun je als je zelf je templates bouwt bepalen wat Joomla nu wel of niet inlaadt. Zie bijvoorbeeld deze presentatie van Sander Potjer met veel tips over dat onderwerp.

Combineer bestanden ter beperking van HTTP-requests

Meestal is het voor de functionaliteit van een website helemaal niet nodig dat alle bestanden afzonderlijk geladen worden. Je mag best alle CSS in 1 groot bestand stoppen, en alle Javascript ook (uitzonderingen daargelaten natuurlijk). Dit scheelt veel HTTP-requests. Los van de te downloaden bestandsgrootte kost ook elk HTTP-request tijd om op te zetten, en daar kun je zo goed op besparen.

Compressie van bestanden

Bijna altijd bevatten CSS en Javascript bestanden veel witruimte, al was het maar voor de leesbaarheid. Door alle spaties en regelnumers op elkaar te proppen kun je flink veel kB's besparen. Soms kun je al keuzes maken tussen ongecomprimeerde of gecomprimeerd bestanden, zoals soms bij Jquery, waar je soms min.js als extensie ziet (staat voor minified version). Compressie kun je bereiken door online tooltjes als www.csscompressor.com, maar je kunt het ook on de fly laten doen door een plugin.

Defer / async Javascript

Deze techniek is handig voor websites met veel Javascript. Defer betekent vertragen, wat inhoudt dat als tijdens het inladen van de HTML een javascript bestand wordt aangetroffen dit niet gelezen en uitgevoerd wordt (wat de standaard is), maar het alleen ingelezen wordt, en pas uitgevoerd als de volledige HTML ingeladen is. De website ziet er dan al prima uit, en is goed te lezen voor de gebruiker, en het benodigde Javascript wordt dan op de achtergrond zonder hinder uitgevoerd. Je kunt deze techniek alleen toepassen bij externe bestanden, bij inline Javascript werkt het niet. De uitvoering is vrij simpel, zet een defer attribuut bij de referentie naar het bestand:

<script src="/js/script.js" defer></script>

Je kunt deze techniek ook weer met plugins activeren. Het is vaak verbazend effectief! Let wel dat er soms scripts zijn die hier niet tegen kunnen, dus goed testen.

Laad bronnen asynchroon

Laad waar nodig bronnen asynchroon. Het werkt een beetje hetzelfde als het defer-attribuut, maar waar bij defer de uitvoering wordt gedaan als alle HTML code is geladen begint het Javascript by async wel direct uit te voeren, echter zonder het verder laden van HTML te voorkomen.

Async en defer kunnen niet samen gebruikt worden. Je kunt ze wel allebei opgeven, maar in dat geval werkt alleen de async versie, defer wordt dan genegeerd.

JCH Optimize, Scriptmerg en JBetolo

Tot nu toe klinkt het allemaal ingewikkeld, maar er zijn een aantal zeer goede plugins die al deze verbeteringen kunnen uitvoeren. Dit zijn met name de plugins Yireo ScriptmergeJCH-Optimize en Jbetolo. Het zijn gratis plugins (soms met een verbeterde PRO-versie), en ik raad je aan om er eens een te proberen. Ze werken alle drie prima, al werkt de een in bepaalde situataies (template / extensie) net wat beter dan de andere. Gebruik er nooit meer dan 1, anders zitten ze elkaar in de weg. 

Met name het wel of niet gebruiken van een van deze plugins kan een gigantische performance verbetering tot gevolg hebben, probeer het maar eens!