defer javascript

[Eddy.vh]

Bonjour.

Lorsque je teste certains sites avec GTmetrix, j'obtiens un score ma foi respectable mais il me plairait d'optimiser encore un peu.
Le résultats me disent de différer le javascript. J'installe alors un plugin qui permet ce différé et je le paramètre selon les résultats fournis par GTmetrix mais alors ces fameux javascripts ne fonctionnent plus. Si j'opte pour la désynchronisation (autre option proposée par le plugin), c'est tout pareil.

Que me vaut ce dysfonctionnement ? Avez-vous des idées ?

Merci d'avance pour vos suggestions.

[cavo789]

Salut Eddy

Defer et async peuvent être mortel pour ton site. Seul le développeur d'une page web (de l'intégralité de la page) sait exactement s'il est sain d'activer l'un et/ou l'autre.

Tentative d'explication:

Joomla, c'est un template, un composant, des modules et des plugins. Tout ce petit monde va ajouter son grain de sel pour, au final, générer une page HTML.
Le template, en général, va charger une librairie comme p.ex. jQuery. Une telle librairie, c'est "l'électricité" du site : si à la maison, je n'ai pas d'électricité, je peux tenter d'actionner l'interrupteur du salon, je n'aurai jamais de lumière... faut d'abord "charger" l'électricité.

Au moment de construire ma page HTML, en général, on charge jQuery au début de la page. Pourquoi ? Parce que si j'ai mon chargement en bas de page (juste avant la balise de fin </body>) comme c'est conseillé sur le plan de l'optimisation, si un module, disons un slider d'image, utilise jQuery pour afficher un bandeau d'images défilantes, mon module ... va planter.

Correct:

début de ma page
chargement de jQuery
mon slider d'images qui fait appel à jQuery

KO ("bardaf, c'est l'embardée"):

début de ma page
mon slider d'images qui fait appel à jQuery
chargement de jQuery

Mon module va utiliser des fonctionnalités qui ne sont pas encore chargées ==> j'essaie d'éclairer mon salon, mais je n'ai pas encore installé le courant électrique.

Cela ne peut pas marcher. C'est ce que tu constates sur ton site.

Revenons-en à "defer" : il indique au navigateur de continuer à traiter la page, de ne pas rester bloquer.

Reprenons mon exemple qui fonctionnait:

début de ma page
chargement de jQuery      <-- le navigateur attend que jQuery est chargé puis, seulement, continue
mon slider d'images qui fait appel à jQuery

re-bardaf:

début de ma page
chargement de jQuery    Defer  <-- le navigateur n'attend pas !!! 

mon slider d'images qui fait appel à jQuery

Ici, avec Defer, on demande au navigateur de ne pas attendre que jQuery soit effectivement chargé pour continuer à traiter la page HTML. Si, avant que jQuery ne soit récupéré (parce que ton serveur web est lent, parce que le CDN est lent, parce que ta connexion est mauvaise ...), la page web contient du code qui utilise jQuery comme notre slider d'images; le navigateur web reçoit des instructions jQuery, mais il ne sait pas encore ce qu'est jQuery ==> cela ne peut pas fonctionner.

Le développeur du module aurait dû prévoir le coup (et être un développeur compétent) pour ajouter un "J'attends que jQuery soit chargé"

Cela se fait comme ceci :

$(document).ready(function() {
    // Ok, jQuery est dispo, je peux maintenant faire mon slider.
});

En l'absence d'un "j'attends que ...", le code va planter.

Defer, c'est sympa puisque cela permet de ne pas bloquer la page le temps de charger le fichier, mais voilà, cela implique que je vais garantir que mon code ne s'exécutera que si le chargement a été fait ==> cela repose sur la compétence du développeur et pas du webmaster.

Async, c'est aussi sympa que defer (ne pas bloquer le chargement de la page), mais c'est pire : si je charge plusieurs scripts (jQuery, mon slider, un script de copie dans le presse-papier ...), async permet un chargement asynchrone : peu importe l'ordre d'écriture de mes chargements, le navigateur va envoyer les différentes requêtes de chargement et, de manière asynchrone, si le dernier fichier (copie p.ex.) est le plus rapide à charger, mon navigateur va déjà l'exécuter. Ah oui, mais si mon script de copie requiert jQuery et que jQuery n'est pas chargé ... c'est l'embardée.

Ici, encore, c'est le développeur du script qui "sait" : est-ce que mon code JS peut être en defer ? (oui si je garanti le "j'attends que ...") et peut-il être asynchrone ("est-ce qu'un autre script va avoir besoin de moi ?, de mon traitement ?").

Si j'ai réussi à être clair : "defer" et "async" sont des options à tester sur son site, mais qui peuvent le casser. Ils peuvent être inoffensifs sur la homepage, mais ils peuvent casser telle ou telle page du site (où il y a beaucoup de dépendances). À tester, tester, tester.

Au final: que gagne-t-on réellement ? Si GTMetrix me dit que je passe de 90% à 93% (c'est bêtement une valeur théorique), est-ce que ce pourcentage justifie 1. le temps que je vais passer à tenter d'optimiser mon site (des heures), 2. à faire des tests les plus complets possible (des heures) et 3. que demain j'aurai une page cassée parce que j'aurais oublié de faire des tests alors que j'aurais activé un nouveau module.

(Oui, je n'active jamais ces options sur des pages sur lesquelles je n'ai pas la maîtrise totale et entière).

Bonne soirée.

[Eddy.vh]

Bonsoir Christophe.

C'est très clair. Je comprends mieux maintenant la source du problème.

Je te remercie de ces explications et j'abandonne l'idée due de fer ou async proposés par ce plugin.

Bonne soirée.