Une autre manière de gérer Jquery sur Prestashop

Une autre manière de gérer Jquery sur Prestashop

Le problème dans le thème "classic"

Par défaut, le fichier jQuery est téléchargé sur le CDN de jQuery. Ce n'est pas hyper rapide.

Bref, on a déjà parlé des CDN, et évidemment, il faut s'en servir. S’inscrire à Cloud Flare ou MaxCDN parait complétement évident aujourd’hui au vu des performances que ces deux services proposent.

Mais du coup, lorsque PrestaShop fait la concaténation des fichiers js, jQuery n’est pas compris dedans. C’est fort dommageable que le fichier jQuery ne soit pas un tout petit mieux géré.

J'ajoute que pour la concaténation, un Gulp ou un Webpack exécuté juste avant vous fera encore gagner un peu sur la réduction du fichier final. Si vous souhaitez le faire, mais que vous n'avez jamais utilisé ces 2 outils, Gulp me semble plus facile d'accès.

{block name='head_icons'}
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
		<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{/block}

Bref, cette ligne d'HTML gère le chargement de jQuery, sur le thème classic, mais aussi sur beaucoup d'autre thème payant. Les aspect négatif de cette méthode, sont, grosso modo:

  • il y a une requête en plus
  • Cette requête n’est pas gérée par le cache de CloudFlare ou de MaxCDN
  • Ca fait une ligne un peu crade à gérer dans un fiche layout-both-columns.tpl
  • Un navigateur met presque 2 seconde (dans certains cas) à charger la librairie
  • C’est souvent le dernier fichier js qui arrive (à cause du temps de chargement de la première visite), du coup, le js n’est pas exécuter hyper rapidement, et l'affichage peu prendre quelques secondes avant d'êtres complétement chargé

Bref, ce n'est pas top

Très simple, 2 solutions :

1. Changer le serveur CDN de jQuery

La première, celle que je recommande, et qui n’est pas critiquable, et qui marchera quoi qu’il se passe, c'est changer le CDN, et prendre celui de CloudFlare. Ou si vous avez mieux, celui qui vous convient

Pour ça, c'est hyper facile, vous avez juste à remplacer ces lignes dans le fichier themesclassictemplates_partialshead.tpl

{block name='head_icons'}
		<link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
		<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>	</script>
{/block}
Vous avez la liste sur cdnjs.com. Pensez à prendre la version minified.

jQuery.pack.js ne fonctionne pas sur Prestashop

Si vous avez été vous balader sur le premier lien, vous avez sans doute vu un jQuery.pack.js et des jQuery.slim.js

les Jquery.pack.js est juste un fichier compressé, pratique pour gagner un peu de data, mais en fait, il reste compressé en cache, à chaque appel, il faut le décompresser. Sur un ordinateur, cela ne pose pas de problème. Mais à cause des téléphones portables qui sont toujours très lents en comparaison, je n’utilise pas ce type de fichier.

les jQuery.slim.js est un jQuery auquel on a enlevé ces fonctions :

  • jquery.fn.load
  • jquery.each /
  • jQuery.expr.filters.animated
  • ajax settings like jQuery.ajaxSettings.xhr, jQuery.ajaxPrefilter, jQuery.ajaxSetup, jQuery.ajaxPrefilter, jQuery.ajaxTransport, jQuery.ajaxSetup
  • xml parsing like jQuery.parseXML
  • animation effects like jQuery.easing, jQuery.Animation, jQuery.speed

Dans les fichiers js utilisés par PrestaShop, les 2 premières fonctions sont utilisées. Impossible d'utiliser la version allégée (pareil pour les librairie tierce Cash.js et Zepto.js).

Bref, utilisez au moins la première méthode, et votre boutique sera un peu plus performante.

2. Pour économiser une requête sur la première page visitée

Le fichier de config qui gère la configuration du thème est config/config.yml

Vous devriez y trouver l’ordre d’ordonnancement des fichiers js

Vous ajouter votre fichier jQuery dans votre dossier d'asset, puis vous ajoutez dans config.yml:

- id: jquery.js
  path: assets/js/jquery.js
  priority: 001
themesclassictemplates_partialshead.tpl 53

Et voilà, c’est bon ! Tous le jQuery est concaténé dans un seul fichier. Et vous avez une requête en moins.

Si vous utilisé CloudFlare en DNS, votre fichier concaténé aura toujours une disponibilité hyper rapide. Bien plus que la solution vanilla proposée.

Pensez à prendre la version minified.

Il doit probablement, mais si votre javascript n’utilise pas les fonctionsgraphique de jQuery, et bien c’est encore 20kb de data de gagné !