Combinaison dynamique de JS et CSS sans optimisation JCH
Je sais que JCH Optimize est un très bon plugin pour compresser et réduire les fichiers JS et CSS, mais j’ai remarqué que cela ajoute également du temps à la page.
Par exemple, SANS OPTIMISATION DE JCH, mon TTFB est de 200 ms, mais AVEC OPTIMISATION DE JCH, il est plus élevé (de 5 à 600 ms à 2,5 secondes!).
Je voudrais donc savoir si vous connaissez d'autres méthodes pour combiner les fichiers js et css.
JCH Optimize est un de ces plugins où vous ne devez pas simplement tout sélectionner pour être optimisé et vous attendre à ce que votre site soit 2x plus rapide en vitesse de chargement. Plus vous essayez d'optimiser, plus le plugin doit traiter.
Vous pouvez également atteindre un point où il n'y a pas de place pour plus d'optimisation.
Ce que je vous suggère de faire en premier lieu est niquement utilisez JCH pour réduire au minimum les fichiers JS et CSS, puis comparez la vitesse de chargement de la page à vos 200 ms initiales. Si vous constatez une augmentation des performances, essayez de combiner uniquement JS o uniquement les fichiers CSS.
Je me souviens avoir passé littéralement 3 jours complets à tester des charges de plug-ins, de scripts et de htaccess avec différentes variantes pour obtenir les meilleures performances, et j'ai remarqué que trop faire n'était pas la solution.
Vous pouvez également constater que l’utilisation d’un template.css.php - qui vous permet de fusionner tous les fichiers css et de les compresser fonctionne mieux:
Exemple de code: https://github.com/Bloggerschmidt/Blank/blob/master/css/template.css.php
L’un des problèmes de l’optimisation JCH est que, si vous utilisez du code non défini dans votre fichier de modèle index.php, vous pouvez donc l’inclure dans votre fichier template.css.php, par exemple:
unset($this->_styleSheets[JURI::root(true).'/plugins/system/mijoshopjquery/mijoshopjquery/colorbox/colorbox.css']);
Il va quand même ajouter le code. Donc, j’utilise typiquement le plugin JS-CSS Control pour arrêter le chargement de css:
Vous pouvez également utiliser glup ou Grunt. Ceux-ci fonctionneraient en dehors de joomla, en le configurant avec les fichiers à utiliser.
Cependant, il ne serait pas facile de gérer les fichiers css et js à partir d’extensions, car JCH scannerait les blocs de code lors de l’arrivée dans le code.
Alors, vous devrez peut-être décider si votre chargement de page initial plus lent vaut les requêtes plus petites et moins nombreuses que les fichiers combinés vous donneront.
Arrêtez le chargement des extensions dans leurs propres fichiers css et js, puis combinez tous les éléments réellement nécessaires (c.-à-d. Que 3 x bootstrap.min.css ne sont pas nécessaires) dans votre modèle. pré-compilé.
C'est ce que je fais sur presque toutes les versions.
Oui, c'est un léger pita. Oui, cela fera une énorme différence pour la performance.
Règle de base; ne demandez pas au serveur de faire quoi que ce soit que vous puissiez faire auparavant dans votre environnement de développement local.