vitesse joomla icons

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.

Simon Kloostra est l'auteur de l' article : Optimize CSS and Javascript, dont la traduction est autorisée par joomlaseo.com

4.75 1 1 1 1 1 1 1 1 1 1 Notez cet article 4.75 (6 Votes)

Commentaires (1)

This comment was minimized by the moderator on the site

Article très intéressant, toutefois pour moi JCH Optimize version PRO est une catastrophe.
Je l'ai essayé sur plusieurs sites...
Non seulement il ne m'a pas amélioré les performances (ca les a même ralenties) , mais il m'a planté tous les sites sur lesquels je l'ai essayé dès que je n'utilise plus les reglages mini (intermediate)
Du coup, je préfère optimiser tout ce qui peut l’être individuellement... et mes résultats ne sont pas mauvais sans plntage !

Il n'y a pas encore de commentaire

Ajoutez votre commentaire

Pièces jointes (0 / 3)
Share Your Location

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour notamment réaliser des statistiques de visites