web-dev-qa-db-fra.com

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

Mon site Web pour un client d'entreprise contient environ 90 ressources pouvant être téléchargées au chargement, dont environ 35 fichiers JS. Même les extensions "optimisantes" conçues pour Joomla ne semblent me ramener qu'à 31 fichiers JS et ne compriment que les fichiers combinés css/js et non ceux qui semblent fonctionner mal.

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

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

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

javascriptperformancefront-endgantry
8
Toni Marie

Ce ne sera pas facile de traiter tous ces fichiers. La combinaison, la réduction et la compression de tous ces éléments vont probablement poser problème. 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, bien qu’elle se déroule généralement à la fin du développement, doit être envisagée dès le début. Cela commence par le bon modèle.

De plus, en installant chaque extension et en utilisant n’importe quel type de module sophistiqué, il en résultera probablement un site Web lourd, il sera très difficile de le rendre plus léger ultérieurement.

Soyez éclectique - restez minime

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 pour les plus efficaces et les plus qualitatifs pour chaque tâche , et essayez toujours d’éviter d’utiliser des extensions, s’il ya des choses qui peuvent être réalisées manuellement dans le noyau.

De plus, si je dois utiliser une fonctionnalité frontale sophistiquée qui n’est pas vraiment importante, cela me cause des problèmes d’optimisation de la vitesse du site Web, j’ai l'habitude de la jeter ou de trouver un autre moyen de la mettre en œuvre.

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

Votre travail manuel

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

Vous constaterez peut-être qu’il existe des extensions dont vous n’avez pas besoin , mais qui sont toujours chargées ou dont vous ne possédez pas le réglages optimaux sur la manière dont ils devraient fonctionner.
Par exemple. JCE Mediabox fournit une option à charger uniquement dans des éléments de menu spécifiques.

Voir aussi s'il est possible de fusionner des fichiers en un. Par exemple. ne laissez aucun module charger ses fichiers css, essayez de le fusionner avec le fichier css du modèle.

Outils d'optimisation

CSS/JAVASCRIPT COMPRESSION & CONTROL
En ce qui concerne les outils d’optimisation/plugins, je suis assez content du plugin JCH Optimize . C'est gratuit, mais a aussi une version commerciale avec un support pour quelques dollars. Avec les ajustements appropriés, 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 . Cela peut aider à mieux organiser et contrôler le chargement de divers fichiers javascript, au cas où ils entreraient en conflit, et faciliter l'optimisation avec JCH_Optimize Plugin.

[~ # ~] cache [~ # ~]
J'utilise aussi Jot Cache , pour avoir un meilleur contrôle sur le cache, car de nombreuses extensions ont des problèmes avec le cache de base.

[~ # ~] cdn [~ # ~]
Utiliser [~ # ~] cdn [~ # ~] pour fournir du contenu statique est l’outil suivant - j’utilise NoNumber CDN pour Joomla

[~ # ~] htaccess [~ # ~]
Enfin, vous gagnerez beaucoup en utilisant un htaccess pour compresser et ajoutez les en-têtes Expire aux fichiers.

9
FFrewin

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

5
Anibal

peut-être pourrez-vous essayer ce service en ligne gratuit pour compresser javascript http://www.online-code.net/minify-js.html et minify css http: //www.online- code.net/minify-css.html , cela réduira la taille de la page Web. et cet outil est gratuit, vous devez simplement télécharger votre fichier js et css, vous pouvez télécharger le fichier mini ultérieurement.

0
tonytong