Utilsation de "script async"

[OTP]

Bonsoir et bon début de WE à tous,

Je planche en ce moment sur PageSpeed Insights.
Notre ami GG me conseille de rendre asynchrone le chargement de mes scripts.
Je vois qu'un simple ajout de "async" fonctionne.

Mais... il y a t-il un risque de dysfonctionnement de la page ?
Par exemple, pour un script Google Maps, s'il est chargé après affichage, à quoi va ressembler ma carte ?
Il faudra rafraîchir pour la voir ???

Suis largué...

Merci,

OTP

 

[Blount]

Qui dit asynchrone dit ordre aléatoire. Il faut donc être prudent dans son utilisation.
Si ton code dépend d'une library, il ne sera pas garanti que celle-ci soit chargée au moment de l'exécution de ton code.
Il y a "defer" qui existe aussi. Il est censé conserver l'ordre d'exécution.
En gros, avec ces attribut, le navigateur ne va pas stopper le rendu de la page durant le téléchargement du script et de l'exécution de celui-ci est atteint. Car en temps normal, il est obligé d'attendre car le script pourrait contenir un document.write.

Mais bon, franchement, si tes scripts sont avant </body>, le gain ne devrait pas être extraordinaire.

Pour ton Google Map, ce sera simplement un contenu vide jusqu'à ce que le script s’exécute.

Quelques infos :
http://www.alsacreations.com/astuce/lire/1562-script-attribut-async-defer.html

 

[-Tony-]

Bonjour
En fait le plus dur en les faisant individuellement, c'est de garder le même ordre et surtout que les bibliothèques soient chargées avant les fonctions qui sont inline dans le body, c'est un peu prise de tête.

Personnellement je fais comme ca : un seul script maitre js avec tout dedans, rien dans le body.
Un pour chaque modèle de page, appelé avec des conditions.
Ce qui donnerai pour ta page d'accueil dans ton www (si j'en ai pas oublié) :
(toujours respecter le même ordre qu’initialement)

search.js
ajax/libs/jquery/1/jquery.js (tu l'heberges)
jquery-migrate-1.2.1.js (tu l'heberges)
jquery.cycle2.js
jquery.cycle2.carousel.js
jquery.cycle2.tile.js
jcarousellite_1.0.1.min.js
static/layers.96314b8cfc4d7ee86850.js (tu l'heberges)
static/menu.e3557b028b0f35d79e37.js (tu l'heberges)
static/hi-res-css.b682784ccc4edc880e48.js (tu l'heberges)
pages/scripts/0034/9712.js?402065 (tu l'heberges)
analytics.js (tu l'heberges)
fonction 1 les "$" => a remplacer
fonction 2 les "$" => a remplacer
fonction 3
fonction 4 => ga('create', 'UA-XXXXXXX', 'auto');ga('send', 'pageview'); (suffisant pas besoin du reste)
fonction 5 => a adapter

Dans le même script

Et donc avant body

<?php if (ma condition) : ?><script src="js/master.js" defer="defer"></script><?php endif; ?>

Donc 12 requêtes http en moins, et en defer donc le chargement des scripts ne bloque pas le chargement.
Ca envoie bien.
De plus plus de scripts inline donc tu peux mettre une CSPolicy efficace.
La seule contrepartie est de penser à maintenir les scripts à jour (analytics, etc...).

 

[OTP]

Bonjour (enfin, façon de parler, vu l'actu...)

Merci pour vos réponses.
J'ai placé seulement deux scripts en async. Pour les autres je ne vais pas prendre le risque d'avoir des soucis.

@Tony : mon WWW n'est pas mon site. Il s'agit de thewindpower . net

@+
OTP