Joomladay francophone 2019 à Paris, les 8 et 9 mars 2019

defer javascript

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Eddy.vh
    a crée un sujet defer javascript

    defer javascript

    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.

  • Eddy.vh
    a répondu
    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.

    Laisser un commentaire:


  • cavo789
    a répondu
    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:

    Code:
    début de ma page
    chargement de jQuery
    mon slider d'images qui fait appel à jQuery
    KO ("bardaf, c'est l'embardée"):

    Code:
    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:

    Code:
    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:

    Code:
    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 :

    Code:
    $(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.

    Laisser un commentaire:

Annonce

Réduire
1 sur 2 < >

C'est [Réglé] et on n'en parle plus ?

A quoi ça sert ?
La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
Comment ajouter la mention [Réglé] à votre discussion ?
1 - Aller sur votre discussion et éditer votre premier message :


2 - Cliquer sur la liste déroulante Préfixe.

3 - Choisir le préfixe [Réglé].


4 - Et voilà… votre discussion est désormais identifiée comme réglée.

2 sur 2 < >

Assistance au forum - Outil de publication d'infos de votre site

Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

UTILISER À VOS PROPRES RISQUES :
L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

Problèmes connus :
FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

Installation :

1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

Archive zip : https://github.com/AFUJ/FPA/zipball/master

2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
et remplacer www. votresite .com par votre nom de domaine


Exemples:
Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/
Pour executer le script: http://www..com/fpa-fr.php

Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/cms/
Pour executer le script: http://www..com/cms/fpa-fr.php

En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
Voir plus
Voir moins

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X