Optimisation de la charge frontale, comment combiner et compresser correctement mon JS?


8

Mon site Web pour un client d'entreprise a environ 90 actifs qui se téléchargent au chargement, environ 35 sont des fichiers JS. Même les extensions "d'optimisation" qui sont faites pour Joomla ne semblent que me ramener à environ 31 fichiers JS et compresser uniquement les css / js combinés et non ceux qui semblent fonctionner de manière frauduleuse.

J'ai essayé quelques-uns des plugins gratuits d'optimisation, et je suis réticent à dépenser de l'argent sur les plugins payés s'ils font très peu pour mes temps de chargement.

Mon modèle est une base Rockettheme avec beaucoup de personnalisation, donc il a Gantry js, bootstrap js, quelques extensions comme mon lecteur vidéo utilisent un fichier js, etc., et elles semblent être réparties sur un couple par extension au lieu de simplement une.

Qu'est-ce qui fonctionne et ce qui ne fonctionne pas pour améliorer cette partie de la charge frontale?

Réponses:


9

Il ne sera pas facile de gérer tous ces fichiers. La combinaison, la réduction et la compression de tous ces éléments entraîneront très probablement des problèmes. Il faudra beaucoup d'efforts et une combinaison de techniques pour atteindre un niveau d'optimisation satisfaisant.

Mon approche globale pour réaliser un site de chargement rapide.

Un site Web rapide est essentiel. L'optimisation de la vitesse d'un site Web, même si elle a généralement lieu à la fin du développement, c'est quelque chose qui doit être pris en compte dès le début. Cela commence par le bon modèle.

En installant également chaque extension et en utilisant n'importe quel type de modules de fantaisie, il en résultera probablement un site Web lourd, qui sera très difficile à alléger plus tard.

Soyez éclectique - restez minimal

Personnellement, en ce qui concerne l'optimisation de la vitesse, j'essaie d'être très éclectique sur les extensions que j'utilise. Je recherche et expérimente les plus efficaces et de qualité pour chaque tâche, et j'essaie toujours d'éviter d'utiliser des extensions, s'il y a des choses qui peuvent être réalisées manuellement dans le noyau.

De plus, si je dois décider d'utiliser une fonctionnalité frontale sophistiquée qui n'est pas vraiment importante, ce qui me cause des problèmes de vitesse d'optimisation du site Web, je vais généralement le jeter ou trouver un autre moyen d'implémenter la fonctionnalité fantaisie.

J'essaie également d'éviter d'utiliser des modèles commerciaux, car ils viennent généralement avec de nombreuses fonctionnalités supplémentaires pour satisfaire de nombreux goûts différents. Je préfère créer le modèle et inclure uniquement ce dont j'ai besoin.

Votre travail manuel

Je suggérerais de passer en revue toutes les extensions dont vous disposez pour voir comment elles chargent leurs fichiers d'actifs, et s'il est possible d' éviter de les charger dans des pages où vous n'en avez pas besoin, par exemple, vous pouvez créer des remplacements de modèles si possible à contrôler vous-même le chargement des fichiers d'actifs.

Vous trouverez peut-être qu'il existe des extensions dont vous n'avez pas besoin , mais qui sont toujours chargées, ou vous n'avez pas les paramètres optimaux sur la façon dont ils devraient fonctionner.
Par exemple, JCE Mediabox fournit une option à charger uniquement dans des éléments de menu spécifiques.

Vérifiez également s'il est possible de fusionner des fichiers en un seul. Par exemple, ne laissez aucun module charger son css, essayez de le fusionner avec le fichier css du modèle.

Outils d'optimisation

COMPRESSION ET CONTRÔLE CSS / JAVASCRIPT
En ce qui concerne les outils / plugins d'optimisation, je suis assez satisfait du plugin JCH Optimize . C'est gratuit, mais il a également une version commerciale avec un support pour quelques dollars. Avec un ajustement correct, il peut produire d'excellents résultats et le développeur est très utile si vous avez besoin d'assistance.

Un autre outil qui pourrait s'avérer utile est le plugin JQuery Easy . Il peut aider à mieux organiser et contrôler le chargement de divers fichiers javascript, dans le cas où ils entrent en conflit et facilitent l'optimisation avec JCH_Optimize Plugin.

CACHE
J'utilise également Jot Cache , pour avoir un meilleur contrôle sur le cache, car de nombreuses extensions ont des problèmes avec le cache principal.

CDN
Utiliser CDN pour fournir du contenu statique est le prochain outil - j'utilise NoNumber CDN pour Joomla

HTACCESS
Enfin, de gros avantages que vous obtiendrez en utilisant un htaccess pour compresser et ajouter des en -têtes Expire aux fichiers.


5

Il n'y a pas de solution simple pour plus de 30 fichiers JS.


J'ai cliqué sur la suggestion complète ci-dessus comme "réponse" mais je dois également noter que RokBooster a fonctionné beaucoup mieux pour moi que JCH Optimize parce que j'utilise un modèle et des extensions basés sur Gantry. Merci! J'aimerais pouvoir cliquer sur les deux.
Toni Marie

Cool, heureux d'être utile
Anibal

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.