compression des fichiers js et css, wtf ?

desgnl · April 13, 2015

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 April 13, 2015 by desgnl (see edit history)

Whoami · April 14, 2015

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é.

desgnl · April 14, 2015

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…

desgnl · April 15, 2015

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 ?

desgnl · April 29, 2015

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 April 29, 2015 by desgnl (see edit history)

desgnl · April 29, 2015

@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 April 29, 2015 by desgnl (see edit history)

desgnl · April 29, 2015

le code jquery devrait être optimisé aussi

cf: https://www.prestashop.com/forums/topic/439131-bonnes-pratiques-jquery-wtf/

Gregory Roussac · October 30, 2015

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 October 30, 2015 by Gregory Roussac (see edit history)

desgnl · November 2, 2015

Bonjour Gregory et merci pour ces explications.

C'est une très bonne nouvelle que les choses évoluent.

Edited November 2, 2015 by desgnl (see edit history)

desgnl · February 18, 2016

Voici un petit addon qui désactive toutes les librairies javascript et css listées ci-dessus:

Prestashop-purifier

lennynero · March 11, 2016

Bonjour dssgnl,

L'addon tu l'installes ou dans ton site?

merci

desgnl · March 14, 2016

comme un module normal: dans l'interface d'admin "modules > ajouter le module"

mylesk42 · March 22, 2016

Hello,

@desgnl : après install, je ne vois pas le module présent sur mon FTP ni dans Modules (PS 1.6.1.4)

Une idée ?

Merci

Soyons Solidaire · September 28, 2017

Merci pour ce partage, fonctionne très bien sur version 1.6.1.17

Edited September 28, 2017 by Soyons zen (see edit history)

momen · December 3, 2018

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

Soyons Solidaire · December 5, 2018

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...?

compression des fichiers js et css, wtf ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in