différer l'analyse du code javascript (Defer parsing of JavaScript)

A1TH · March 15, 2013

Bonjour,

afin d'optimiser mon site et suite aux recommandations de gtmetrix PageSpeed ou autres... il semble qu'il est souhaitable de différer l'analyse du code javascript (Defer parsing of JavaScript).

D'une part au niveau du code est ce code qu'il faut utiliser ? :

<script type="text/javascript" src="/monjava.js" defer async></script>

ou ce code :

<script type="text/javascript" src="/monjava.js" defer></script>

Ensuite où placer de code ?

J'avais pensé dans le header.tpl mais ça ne marche pas.

Dans le header.tpl, il y a déjà ce code :

{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}" </script>
{/foreach}
{/if}

J'ai essayé d'insérer le "defer" sur avant la fermeture de la balise </script>, mais ça me bloque tout. Aucun élement JS ne fonctionne comme par exmple de slide show the la page d'accueil.

Bref, comment faire ça.

Je pense que ce n'est pas compliqué, mais ça fait des heures que je cherche en vain.

Si une bonne volonté pouvait me donner un coup de main ou me guider.

Merci d'avance.

A1TH · March 18, 2013

Un petit up...

Personne pour m'aider ?

Romain28 · April 5, 2013

up, ca m'intéresse aussi

WebTotem · April 22, 2013

Bonjour,

en fouillant un peu sur le net j'ai trouvé ça:

J'ai donc ajouter le "defer" ici:

{if isset($js_files)} {foreach from=$js_files item=js_uri} <script type="text/javascript" src="{$js_uri}" defer='defer'</script> {/foreach} {/if}

Ensuite, il ya d'autres js qui sont inclus dans le header mais là il faut ajouter au cas pas cas.

Chez moi , ça a fonctionné, regardez le code source: www.ugoramoto.com

En espérant que cela sera utile.

Fabien

2FR3 · April 22, 2013

Oui, meme si cela fonctionne, cela reste incohérent pour le validateur W3C car pour etre valide, il faudrait que le JS soit sur la page et non en externe.

En gros, pour le W3C, on demande de lire cette partie de page après le reste, mais ce n'est pas dans la page. Le fait est que cela fonctionne car on va lire le JS en externe quand même.

Cela soulève une question intéressante : valide W3C et rapidité ? Améliore le référencement, mais la c'est un dilemme ou j'ai choisit la rapidité personnellement pour l’expérience client

WebTotem · April 23, 2013

Hello,

alors effectivement comme tu le dis 2FR3, si la validation w3c est remise en cause, on peux se demander si on ne devrait pas également activer la case Compression maximum du code HTML (dangereux) dans le BO de prestashop qui désactive la validation W3C.

D'ailleurs cela soulève d'autres questions: Page Speed (outil de gg si je ne me trompe pas) encourage la pratique du 'defer' mais impose en même temps un maximum de validation W3C. Ce même outil encourage a l'externalisation des css et js.

N'y a t'il pas là quelques contradictions? Quels sont les meilleurs choses à faire?

Quels sont les risques, pour nous e-commmercant, de ne pas respecter scrupleusement ce fameux W3C?

Y a t'il un autre moyen pour associer 'defer' et W3C ?

Voili voilou pour la pensée du jour ...

Fabien

Edited April 23, 2013 by UgoraMoto (see edit history)

2FR3 · April 23, 2013

Oui, copier la totalité du contenu des JS dans le header

FMR · April 24, 2013

Personnellement j'utilise

<script async type="text/javascript" src="/monjava.js"></script>

sous cette forme.

C'est-à-dire en mettant toujours 'async' juste après "script". Cependant, attention, celà peut entrainer des problèmes si vous l'ajouter sur n'importe quel script. Exemple : mon block "produits phares" en page d'accueil ne se chargeait pas correctement si l'on revenait dessus; ou encore, mes produits affichés sous les 2 formes de designs en page catégorie au lieu d'avoir le choix, etc... (peut-être dû à mon thème ?? )

Ma source : http://www.gameandme.fr/creation-web/optimisation-de-code-comment-faire-perdre-du-poids-aux-pages/

aqwzsx159 · June 6, 2013

Bonjour à tous,

Moi aussi j'ai ce problème "différer l'analyse du code javascript", cependant j'ai déjà coché tous ce qui est à cocher dans le BO de prstashop à savoir les caches, le css et js avec cache ...

Maintenant, j'ai toujours ce problème!!

S'il vous plait, un aide serai la bienvenue!!

cdlt,

aqwzsx159

WebTotem · June 6, 2013

Bonjour,

Le fait de "différer l'analyse du code javascript" ne se fait pas via le BO de presta, aucune fonctions n'étant prévues (pas que je sache en tout cas...) mais bel et bien directement dans les fichiers sources (php ou tpl).

perso je ne suis pas convaincu de l'utilité du 'defer' ou 'async'.

J'explique:

lorsque j'ai mis en place (un peu partout c'est un truc de fou à faire ) tout avait l'air d'aller bien mais parfois les js n'étaient pas lancés correctement, il fallait faire un F5 (actualiser la page quoi ) et seulement là ça fonctionnait normalement. Testé sous FF, IE, et Chrome.

Alors est ce que c'est moi qui ai fait une erreur ou quelqu'un d'autre à rencontré ce problème?

Est ce lié au jquery qui attend le chargement complet de la page?

Fabien

Edited June 6, 2013 by UgoraMoto (see edit history)

aqwzsx159 · June 6, 2013

Rebjr,

Concernant l'emploi de defer et async. C'est fatale pour prestashop! dans header.tpl, prestashop appel tous les fichiers js (cf post numéro 1), toutes les templates de prestashop utilisent la fonction $ de jquery donc jquery doit être loader avant, j'ai essayé avec async, c'est la même chose.

L’emploi de defer et async c'est à éviter donc, mais je ne sais pas quoi d'autre à utiliser!

voici l'analyse gmetrix de mon site

Page Speed Grade:

(88%) B

YSlow Grade:

(85%) B

Page load time: 4.34s

Total page size: 2.23MB

Total number of requests: 62

Combine images using CSS sprites 0

Defer parsing of JavaScript 71

Serve scaled images 81

Specify a character set early 85

Serve resources from a consistent URL 88

Optimize images 92

Tous les sites prestashop atteignent 90 et plus pour le Defer parsing of JavaScript, que dois-je faire alors?

cdlt,

aqwzsx159

Edited June 6, 2013 by aqwzsx159 (see edit history)

aqwzsx159 · June 6, 2013

Je viens de tester avec defer, il n'y a plus de message Defer parsing of JavaScript mais les valeurs restes les mêmes, doncs c'est pas ça qui rend la page lente!

cdlt,

aqwzsx159

WebTotem · June 6, 2013

J'avais également testé et j'ai eu le même résultat que vous avec et sans 'defer' et/ou 'async'. Cependant, même si le site n'est pas plus rapide, j'imagine qu'en terme de référencement cela doit être mieux avec que sans (sans conviction, cela reste à confirmer<img alt="" class="bbc_emoticon" src="http://www.prestashop.com/forums/public/style_emoticons/default/huh.png" title="" /> ).

Pour infos, voila mes scores, et je suis moins bon que vous sur Yslow.

Page Speed Grade:

(94%)

YSlow Grade:

(82%)

Page load time: 4.64s

Total page size: 751KB

Total number of requests: 101

Pour vous un plus serait de faire des sprites avec vos images de background afin de gagner en requêtes et de mettre en 'defer' éventuellement le premier script (<a href="http://www.stephaina.com/themes/stephaina/cache/c09fd5c67b1d0204fb6a7f82157d9a82.js" style="color: rgb(99, 151, 203); font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 12px; line-height: 14px; background-color: rgb(251, 251, 251);" target="_blank">http://www.stephaina.com/themes/stephaina/cache/c09fd5c67b1d0204fb6a7f82157d9a82.js</a>) et voir ce que ça donne car les autres ne vous appartiennent pas donc c'est difficile (mais peut être pas impossible si quelqu'un s'y connait suffisamment).<img alt="" class="bbc_emoticon" src="http://www.prestashop.com/forums/public/style_emoticons/default/cool.png" title="" />

Sinon vous avez une réponse serveur pas mal du tout par rapport au mien. Chez qui êtes vous, et quelle est la configuration?

Cordialement

WebTotem · June 6, 2013

Désolé pou cette mise en forme . Je ne sais pas pourquoi c'est comme ça!!!!

FMR · June 7, 2013

Non mais allo quoi ! Mdr.

Ne croyez pas que votre site va aller 2 fois plus vite avec 'Defer' ou 'Async' : Ils sont là pour charger les .Js après le reste, et non en même temps. Ce qui signifie un léger gain de temps, c'est tout ! Par contre, il ne faut pas les utiliser sur tout les .js, au risque d'en voir ne pas fonctionner correctement ! Comme je l'ai déjà dit plus haut...

A vous de faire vos tests : Y a rien de compliqué, un âne y arriverait, faut juste être patient.

aqwzsx159 · June 7, 2013

Bjr Fete-Moi-Rire.com,

Oui t'as raison avec defer et async, Ils perturbent le chargement de ma page, je les ai écarté de ma solution, en plus t'as vu mon post ci dessus, j'ai déjà utilisé les deux mais ça ne résoud pas mon problème.

En fait, moi j'utilise beaucoup d'image et c'est ça qui rend ma page lente! j'ai déjà testé cette possibilité et j'arrive jusqu'à 95% avec google speed et 90% avec yslow!

Donc, async et defer ne sert à rien avec prestashop, il faut juste redimensionner les images pour avoir ce qu'on veut!

et ne jamais utiliser des images de taille grande puis redimensionner avec les width et height (erreur fondamentale)

cdlt,

aqwzsx159

WebTotem · June 7, 2013

Je remets mon précédent post en clair cette fois-ci. J'avoue que je n'ai pas compris ce qu'il s'est passé.

J'avais également testé et j'ai eu le même résultat que vous avec et sans 'defer' et/ou 'async'. Cependant, même si le site n'est pas plus rapide, j'imagine qu'en terme de référencement cela doit être mieux avec que sans (sans conviction, cela reste à confirmer ).

Pour infos, voila mes scores, et je suis moins bon que vous sur Yslow.

Page Speed Grade:

(94%)

YSlow Grade:

(82%)

78%

Page load time: 4.64s

Total page size: 751KB

Total number of requests: 101

Pour vous un plus serait de faire des sprites avec vos images de background afin de gagner en requêtes et de mettre en 'defer' éventuellement le premier script (http://www.stephaina.com/themes/stephaina/cache/c09fd5c67b1d0204fb6a7f82157d9a82.js) et voir ce que ça donne car les autres ne vous appartiennent pas donc c'est difficile (mais peut être pas impossible si quelqu'un s'y connait suffisamment).

Sinon vous avez une réponse serveur pas mal du tout par rapport au mien. Chez qui êtes vous, et quelle est la configuration?

Cordialement

Fabien

WebTotem · June 7, 2013

Bonjour,

effectivement les images sont un point important dans la vitesse de chargement d'une page. Les optimiser est primordial, perso j'ai utilisé un petit soft que j'ai trouvé sur le net qui s'appele "jpegtran" et c'est vraiement pas mal et super simple d'utilisation.

En plus comme vous le dites, il ne faut pas utiliser de redimensionnement car ce sont des requetes inutiles. Penser également à définir les tailles width et height dans les balises img pour soulager encore le serveur.

Bonne journée

Fabien

FMR · June 7, 2013

Plusieurs choses sont à prendre en compte, mais je ne dirais pas que ca ne sert à rien avec Prestashop. Chez moi, Async a été bénéfique. Pareil pour les images, plus que la dimension, le poids de celles-ci est important ! Possibilité de réduire le temps de chargement en faisant des images moins lourdes. (avec GTMetrix, vous pouvez récupérer vos images avec poids optimisé.)

Perso : Page Speed : 91% - Yslow 79%

Mais, je ne me suis pas penché beaucoup sur Yslow, étant bien moins important.

UgoraMoto, vous êtes sûr que c'est pas dû à votre grand nombre de requêtes( 101) ?

Edited June 7, 2013 by Fete-Moi-Rire.com (see edit history)

aqwzsx159 · June 7, 2013

aqwzsx159 -> UgorMoto

OVH

aqwzsx159 · June 7, 2013

Personellement, mon problème se situe sur les image, si vous regarder mon site, j'ai le carrousel + homefeatured + category_image.

les images du homefeatured sont les mêmes que celles de category_image (mettre curseur sur le lien chaussure et vous trouverais).

homeslider => avec 16 image de 100Ko en moyenne

homefeatured => 4 images (que j'ai redimensionné de 600x600 à 205x200 ===> à éviter j'ai créer manuellement ces 4 images après car j'ai pas envie de bousiller mon site)

category_image => 5 images de même que homefeatured (600x600 à 100x100 ===> à éviter j'ai créer manuellement ces 4 images après )

Le defer ou async je les laisse comme ça!

UgoraMoto => ça http://www.stephaina...7f82157d9a82.js, je peux pas deferer car dans cette js se trouve toutes mes js!

juste les images, ça booste mon site de 4.33s à 3.55s

J'ai plus d'autre chose à faire.

le css sprite => ça marche aussi mais j'ai pas compté sur ce point car j'ai des version mobile et je ne veux pas modifier.

cdlt,

aqwzsx159

Edited June 7, 2013 by aqwzsx159 (see edit history)

différer l'analyse du code javascript (Defer parsing of JavaScript)

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

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