javascript dans le head

[Ve34]

Bonjour,

J'ai dans mon head des lignes générées par

<jdoc:include type="head" />

qui font appel aux scripts suivant :

<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
  <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
  <script src=/media/system/js/caption.js" type="text/javascript"></script>

Ces scripts retardent l'affichage de mes pages. Est-ce que quelqu'un pourrait m'expliquer à quoi servent tous ces fichiers javascript et surtout comment les rendre asynchrones s'ils sont absolument nécessaires.

Autre petite question : connaissez vous des templates qui ne font pas appel à

<jdoc:include type="head" />

Merci d'avance pour votre aide

[vinespie]

Re : javascript dans le head

Salut,

Tu trouveras une première explication dans la documentation
https://docs.joomla.org/J3.x:Javascript_Frameworks/fr

[ghazal]

Re : javascript dans le head

Salut,
ce serait une très mauvaise idée d'enlever ces fichiers.
Joomla en front- et back-end dépend ABSOLUMENT de jQuery, le framework JS.
Les formulaires (forms) seraient impactés en premier, pas de possiblité d'accéder aux modifs d'articles ou modules en front, par ex.
Sans parler des composants, modules et plugins tierces (n'appartenant pas au core de joomla) qui pour beaucoup dépendent aussi de jQuery.

Pour alléger le chargement des fichiers JS (et CSS), on peut utiliser la compression GZIP.
Certains templates proposent cette option.
L'éditeur JCE aussi.

[-Tony-]

Re : javascript dans le head

Salut
Mettre les scripts avant </body>...une aventure.
Joomla ce n'est pas un site html fait maison.
Joomla a une logique.
Une modification comme celle là passerai amha par un petit hack du core.
Il faut le consentir si on le veut (je l'ai fait pour mon site)
Ca implique de faire des modifs dans le core joomla à chaque MAJ...faut être rigoureux....
Et de maintenir rigoureusement le code .js (copié collé...ca va...)
C'est 5 mn chrono de site indisponible si tu as tout noté sur un bloc note genre tuto de neuneu, avec le n° de ligne et les phrases à modif....
La base c'est que, en examinant ton code source tu vois qu'il y a de petits scripts javascripts, des fonctions, celles ci par exemple comme expliquait Ghazal font fonctionner tout ce qui est dynamique sur ta page, par exemple un bête menu déroulant, une info bulle sur un formulaire, etc...et SURTOUT que les librairies/frameworks qui font FONCTIONNER ces scripts DOIVENT être LUES AVANT ces FONCTIONS.
Ce qui veut dire, en d'autres termes, que les plugins proposant de merger les script fonctionnent rarement...
Donc tu dois explorer toutes tes pages (te mettre en SITE de DEV en mode NON SEF pour localiser les views, la clée du hack pour avoir un seul sript et zero style dans joomla, de même que pour le html/css, avec les views c'est freestyle on the beach it's html website homemade)
Notes pour chaque view scrupuleusement (plusieurs pages peuvent correspondrent à une view : article, blog, category, remind, reset, registration, etc, etc...) les fonctions utilisées (observer le code source, elles sont entre les balises <script>moncode</script>
Ainsi que notes scupuleusement L'ORDRE DE CHARGEMENT DES LIBRAIRIES, l'ordre de leur chargement (très important) les no conflicts sont importants)
La logique est donc de créer un fichier master.js pour chaque view, uniquement- avec les librairies et fonctions nécessaires. Les librairies dans le bon ordre, les fonctions appelantes ensuite.
Désamorcer en commentant chaque appel de fonction dans les fichiers php correspondants.
Désamorcer les css si tu veux avoir 10/10, une sucette et un bon point...
Donc dans le logic.php = unset montruc
Un fichier peut être commun à plusieurs views.
Il est inutile d'optimiser les views remind, reset et registration en voulant les differer avant <body/> se contenter d'un seul fichier dans le head pour ces vues/pages là amha perso c'est ce que j'ai fait, ne voulant pas trop modifier le core/ trop d'overrides html...
Tu vas surement devoir créer un logic.php comme dans mon exemple plus bas, pas compliqué.
Depuis cet exemple je n'appelle plus une seule feuille de style par view, enfin même pas, zéro en fait, mon site étant petit, comme préconisé par the guru google j'ai inséré tout le css de mon site juste avant </head> (donc 0 feuille de style appelée) ce qui donne <style type="text/css">mon css</style><body> Pas possible pour de gros sites mais apparemment possible de différer le css en javascript.
100% sur Page Speed Insigth/google
T'ention...si la vitesse a un certain impact...c'est comment tu optimises tes pages en SEO au final qui va influer. Par contre si t'as optimisé tes images, et tout et qu'il ne te reste que ca....ton site est une bombe après (2 requetes (html+js+les eventuelles images) au lieu de 36.....)
Je l'ai juste fait car j'aime bien finir les jeux à fond....
Bon courage...c'est énormément d'heures de taff...
Exemple : http://forum.joomla.fr/showthread.ph...les-et-scripts

[ghazal]

Re : javascript dans le head

@-Tony-
j'avais lu ton post mais je n'avais pas commenté.
Après tout, si tu as trouvé une solution qui fonctionne (critère principal) et qui te convient, pourquoi pas ?

Même si c'est un peu "prise de tête".

Maintenant, si tu dois gérer plusieurs sites, c'est injouable.
On est contraints de s'en tenir aux "guidelines" de joomla. D'autant plus que l'implémentation du JavaScript fait l'objet d'une réflexion continue de la part des intervenants dans l'optimisation de la structure de notre CMS favori.
L'énorme boulot réalisé lors du passage du framework mootools à la librairie jQuery en est l'un des exemples.

Re l'inclusion de JS, deux éléments sont à prendre en considération, le placement des scripts (localisation dans joomla) et le chargement de ces scripts
-> qui induisent la fonctionnalité de ces scripts:
- ca marche, ca marche pas
- la rapidité d'exécution
- donc l'impact sur le chargement

Depuis fin juillet, Google nous impose encore une nouvelle restriction, l'accès aux fichiers JS et CSS par googlebot :
Googlebot cannot access CSS and JS files.
Une solution est proposée ici :
Fix for "Googlebot cannot access CSS and JS files"

https://github.com/joomla/joomla-cms/pull/7681

Cela nous amène au respect des guidelines.
Si on regarde les composants ou modules core (d'origine) en front ou en back, aucun ne renferme de fichier CSS ou JS dans ses dossiers/répertoires.
La règle est de passer par l'appel
JHtml::_('script', ...
ou
JHtml::_('stylesheet', ...
y compris les images, voire les fontes.

Essaie ceci dans le default.php d'une surcharge d'article/ou catégorie d'un template, prenons protostar :

JHtml::_('stylesheet', 'protostar/style.css', false, true);

avec un fichier style.css placé dans

media/protostar/css/style.css

Pour cela, il aura fallu créer un dossier "protostar" dans lequel on aura créé 3 dossiers :
media/protostar/css
media/protostar/images
media/protostar/js

pour des fichiers placés dans /media/dossier_de_mes_fichiers_js_et_css

Cela fonctionne aussi pour des templates frameworkés avec des appels JS/CSSun peu particuliers (yootheme, helix3, purity3, par ex)

Les dévs de composants et modules tierces commencent à respecter cette méthode, mais pas toujours.

Accessoirement, cette règle permet de contourner la contrainte du googlebot de google.
Et est fortement recommandée par les devs de joomla - > cf les commentaires dans

https://github.com/joomla/joomla-cms/pull/7681

particulièrement ceux de michael babker et bakual

******* Pour en revenir à la question d'origine de ce post, que je traduirai par
Comment accélérer le chargement des fichiers JS ?

je reprendrai la question du gzip-age
- cela doit se faire en dernier (par rapport au dev du site) car ce n'est pas toujours concluant.
Trial and errors ...
J'ai cité la fonctionnalité de JCE,
mais il existe aussi des extensions qui font le boulot.

Classées dans la catégorie Performances du JED
Joomla! Extensions Directory - Performance

http://extensions.joomla.org/category/core-enhancements/performance

Et je redis aussi que pas de templates proposent cette fonctionnalité. Avec plus ou moins de bonheur.

Hope it helps.