Optimisez votre CSS & Javascript
Les templates Joomla assez complexes utilisent souvent beaucoup de fichiers externes CSS et Javascript. Charger toutes ces ressources externes prend du temps, plus particulièrement si ils sont chacun chargés avec une requête HTTP différente. Si vous minimisez ces requêtes vous allez améliorer dramatiquement la vitesse de votre site.
Comprimez vos ressources
De plus, la poids de chaque fichier individuel est à considérer. Minimiser ces fichiers peut être très utile. Bien sur vous pouvez minifier chacun de ces fichiers individuels avec des outils tel que http://www.csscompressor.com, mais ils rendent ces fichiers difficilement lisibles si vous souhaitez y apporter des modifications ultérieures.
Déferrer les fichiers javascript
C'est une technique particulièrement utile pour les pages qui comportent beaucoup de Javascript. Déferrer signifie que le script sera exécuté qu'une fois que la page sera traitée (cf w3schools), en clair le chargement de la page ne sera pas différé en attendant que le script soit exécuté. Ceci s’applique aux fichiers externes Javascript, et non au Javascript présent directement dans le code de la page. Techniquement l'attribut "defer" est ajouté au script :
<script src="http://joomlaseo.joomlaseonet.netdna-cdn.com/js/script.js" defer></script>
C'est une technique très utile, qui peut réduire significativement le temps de chargement. Le soucis est que parfois cela stoppe certaines fonctionnalités, en effet certaines fonctions nécessitent une exécution immédiate du script pour s'exécuter correctement.
Il vous faut donc tester !
Charger ses ressources de façon asynchrone
Quand cela est possible, essayez de charger vos ressources de manière asynchrone, de façon à ce qu'elles ne bloquent pas le chargement du site. Un bon exemple est charger le code Google Analytics asynchronement , Google fournit un code spécifique pour ce faire dans leur documentation que vous pouvez utiliser pour remplacer son script standard.
JCH Optimize
Un exemple parfait d'extension Joomla pour mettre en place les recommandations ci-dessus est JCH-Optimize. C'est une extension gratuite, et je vous la recommande pour améliorer la vitesse de chargement de votre site. Il combine tous les fichiers CSS et Javascript en un seul et les compriment aussi.
Il peut aussi déférer le Javascript, qui ne sera donc exécuter qu'une fois que la page aura fini de se charger. Vous devrez vérifier que votre site fonctionne toujours parfaitement, ce qui est le cas en générale.
NDTR : Le plugin "Javascript async & defer" vous permet de sélectionner sur quels fichiers javascript vous souhaitez appliquer l'attribut defer.
Cet article est une traduction libre du tutoriel de Simon Kloostra : Optimize CSS and Javascript
