Jump to content

compression des fichiers js et css, wtf ?


Recommended Posts

Bonjour, 

 

lorsque l'on active la fonction "smart cache" pour le code javascript ou css, Prestashop s'occupe de compresser tous les scripts qui sont sur la page dans un seul fichier, ce qui semble être une bonne idée, sauf que…

 

Quand l'utilisateur change de page il charge un fichier compressé différent sur chaque page. chacun de ces fichiers contient jquery, les plugins jquery et un paquet d'autres scripts en commun.

 

Du coup le gain de performance lié à la compression du fichier est largement perdu par le fait de recharger tous ces scripts sous un nom différent… 

 

S'agit-il :

• d'un problème d'architecture de prestashop ? 

• ou bien y a t il une façon de compresser tous les scripts de prestashop dans un seul fichier et de ne charger (et mettre en cache) que ce fichier lorsque l'utilisateur navigue sur le site ?  

 

merci 

Edited by desgnl (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

 

En effet, chaque page possède son propre fichier compressé mais la subitilité étant que :

 

- Ce fichier est le même pour tout le monde

- Ce fichier ne se compresse qu'une seule et unique fois (sauf si on met en "forcé" ce qui n'est pas du tout conseillé ou qu'on vide le cache).

 

Du coup, la première personne qui consulte la page compresse le fichier (un peu plus lent du coup), mais ensuite, tout le monde utilise le fichier compressé.

Share this post


Link to post
Share on other sites

donc c'est bien un problème d'architecture de prestashop. 

 

Je comprend l'objectif de servir le fichier plus vite que s'il n'était pas compressé, mais cette façon de faire est contre productive puisque l'utilisateur recharge jquery sous un nouveau nom à chaque fois qu'il consulte une page. (40ko x nb de pages + 1 requête http par page),. idem pour les plugins et la plupart des autres fichiers js. pour un utilisateur qui parcourt quelques pages d'un site, ça fait un gros boulet au final. 

 

Ce serait même plus leger et efficace sans activer cette option de compression puisque l'utilisateur chargerait jquery une seule fois sur la première page consultée, puis ce fichier est mis dans le cache du navigateur, il n'est donc pas rechargé sur les autres pages. 

 

La vraie bonne solution consiste à s'occuper soi même de compresser et concaténer ses fichiers js au sein d'un seul fichier pour tout le site. Lorsque l'utilisateur arrive sur le site cela charge cet unique fichier qui est stocké dans le cache de son navigateur, et ensuite, il n'y a plus rien à charger au niveau js, ni nouvelle requêtes http…

  • Like 1

Share this post


Link to post
Share on other sites

Bonjour,

 

Discussion très intéressante mais je suis pas tout à fait d'accord, sur mon site j'ai 85 versions du js le client ne recharge pas jquery pour chaque page.

 

J'ai du mal à comprendre comment certaines pages ne contiennent pas jquery… mais admettons…

sur 85 versions de js, combien contiennent jquery ? imaginons qu'il y en ait seulement les deux tiers soit 56 x 96 ko (le poids de jquery.min) = plus de 5,4 mo… juste pour jquery !

 

c'est pas très mobile friendly ça, non ? 

Share this post


Link to post
Share on other sites

  • 2 weeks later...

la version de jquery fournie avec prestashop étant obsolète, certains addons, utilisent leur propre version de jQuery… Et l'utilisateur va maintenant charger, non pas une, mais 2 versions de Jquery à chaque page (allez c'est cadeau) !!!! Et on peux même rêver que cela se reproduise avec plusieurs addons sur un seul site et que l'utilisateur charge 3 ou 4 versions de jQuery par page… 

Edited by desgnl (see edit history)

Share this post


Link to post
Share on other sites

@okom3pom cool ! 

 

mon souci c'est la performance, sur mobile, j'ai donc fait un module qui désactive tout avec le code suivant: 

public function hookHeader()
	{
		$this->context->controller->addCSS('http://url-de-mon-framework-css.css', 'all');
		$this->context->controller->addJS('http://url-de-mes-librairies-js.js');

		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/jquery-1.11.0.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/jquery-migrate-1.2.1.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/jquery.easing.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/fancybox/jquery.fancybox.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/jquery.scrollTo.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/jquery.serialScroll.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/bxslider/jquery.bxslider.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/autocomplete/jquery.autocomplete.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/bxslider/jquery.bxslider.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/jquery.idTabs.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/plugins/jquery.typewatch.js'); 
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/modules/homeslider/js/homeslider.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/tools.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/modules/favoriteproducts/favoriteproducts.js');

		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/ui/jquery.ui.core.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/ui/jquery.ui.widget.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/ui/jquery.ui.mouse.min.js');
		$this->context->controller->removeJS(_PS_ROOT_DIR_.'/js/jquery/ui/jquery.ui.slider.min.js');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/ui/themes/base/jquery.ui.core.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/ui/themes/base/jquery.ui.slider.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/ui/themes/base/jquery.ui.theme.css');

		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/plugins/fancybox/jquery.fancybox.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/plugins/bxslider/jquery.bxslider.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/plugins/autocomplete/jquery.autocomplete.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/js/jquery/plugins/bxslider/jquery.bxslider.css');
			
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blockcart/blockcart.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/paypal/css/paypal.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blocklanguages/blocklanguages.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blocksearch/blocksearch.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blocktags/blocktags.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blockuserinfo/blockuserinfo.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blockviewed/blockviewed.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blocklayered/blocklayered.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/themeconfigurator/css/hooks.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/blockwishlist/blockwishlist.css');
		$this->context->controller->removeCSS(_PS_ROOT_DIR_.'/modules/favoriteproducts/favoriteproducts.css');
	}

les deux premiers appels contiennent les librairies compressées et ensuite tout ce qui est propre à prestashop est contenu dans les fichiers global.css et global.js. 

 

à noter que je ne souhaite pas utiliser tous les plugins périmés imposés par prestashop. J'ai par exemple remplacé le slider de la homepage et de la fiche produit par glide.js qui est léger et nativement responsive… 

 

pour que les fichiers externes soient loadés avant les autres, l'ordre de chargement est inversé comme expliqué ici https://www.prestashop.com/forums/topic/430506-ordre-de-chargement-des-fichiers-js/?p=2006639

 

mais franchement, ça fait beaucoup de plomberie pour arriver à un résultat simplement acceptable… 

Edited by desgnl (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

  • 6 months later...

Bonjour à tous,

 

En effet c'est un sujet qui remonte de longue date et il restait des améliorations a faire comme on peut lire ici par exemple http://forge.prestashop.com/browse/PSCSX-2598?focusedCommentId=91912&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-91912 ! ou http://forge.prestashop.com/browse/PSCSX-3181

 

CCC a été conçu à une époque ou mod_pagespeed, grunt n'existaient pas encore et ou charger un fichier pour tout le site était encore trop inconcevable pour améliorer les performances. Ce système pouvait bien sur être amélioré comme dit mais il a fait ce qu'on lui demandait pour remplir les recommandations Google Speed et Yahoo Slow dans un premier temps.

 

https://github.com/PrestaShop/PrestaShop/commit/e8901103e36d276cdd38ffbe870f72862b9bc766#diff-fbb038f4b8b267c6eddb7098259b8f54R265, plein de fonction assez pratiques tout en assurant une retro compatibilité avec les thèmes 1.4. 

 

Toute une gestion du $noconflict a été mise en place pour gérer les chargements de jquery par des modules et il est aussi possible de demander quelle version de jquery est chargée locale ou distante et donc mettre en cache navigateur cette version externe hébergée chez Google etc. Malheureusement le cœur ne peut pas vraiment décider à la place du designer web si un module peut charger ou non jquery. Il ne devrait pas intervenir sur le fonctionnement du module. Un module qui charge jquery 1.2.3 ou la dernière version ne pouvait pas être empêché.

 

Plus tard le nombre de scripts et de inline scripts étaient bien trop importants dans les templates même du thème 1.5 et les modules en ajoutaient encore, il a fallu faire le ménage au niveau javascript, faire en sorte dans un premier temps que le javascript soit dans des fichiers javascripts et plus dans les templates, centraliser les variables globales en place des déclarations en plein template <script>foo = 'barar'</script> et essayer de limiter les slots naviguateur, versionner les caches pour renouveller les caches naviguateurs, permettre le removeJS mais revoir tout le système n’était pas possible pour la version 1.6. Donc c'est devenu un problème d'architecture car vieillissant mais encore très pratique par exemple https://github.com/PrestaShop/PrestaShop/pull/4248

 

La prochaine version 1.7 devrait résoudre cela et mettre en place de nouvelles méthodes plus modernes et adéquates.

 

Cordialement

Edited by Gregory Roussac (see edit history)

Share this post


Link to post
Share on other sites

  • 3 months later...
  • 3 weeks later...
  • 2 weeks later...
  • 1 year later...
  • 1 year later...

bonjour.

s'il vous plait j'ai besoin de votre aide.

j'ai des problèmes sur prestashop et je ne sais comment le résoudre.

 problèmes avec des fichiers Javascript et CSS non minimisés

problèmes avec une ressource interne bloquée dans le chier robots.txt

liens mènent vers une page HTTP sur vos pages HTTPS

problèmes avec des fichiers Javascript et CSS non compressés 

problèmes avec des fichiers Javascript et CSS non mis en cache 

Share this post


Link to post
Share on other sites

On 12/3/2018 at 1:12 PM, momen said:

bonjour.

s'il vous plait j'ai besoin de votre aide.

j'ai des problèmes sur prestashop et je ne sais comment le résoudre.

 problèmes avec des fichiers Javascript et CSS non minimisés

problèmes avec une ressource interne bloquée dans le chier robots.txt

liens mènent vers une page HTTP sur vos pages HTTPS

problèmes avec des fichiers Javascript et CSS non compressés 

problèmes avec des fichiers Javascript et CSS non mis en cache 

Salut ton site est visible...?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More