Optimiser le chargement de nombreux scripts

Bonjour,

j'ai hérité il y a peu de temps de l'optimisation du front end d'une plateforme qui dispose de nombreux scripts chargés sur toutes les pages; presque 40 fichiers.
Quand j'aurais le temps de le faire je ferais une refonte à ma façon mais pour l'instant je dois faire au mieux pour limiter l'impact d'un tel chargement.

J'ai souvent optimisé le chargement javascript de sites ayant un grand nombre de script mais jamais autant. Je connais les bonnes pratiques (CDN, body, compression, regroupement des scripts...) mais j'avoue ne jamais avoir eu autant à optimiser sans possibilité de refonte complète du front end.

Je recherche donc des solutions d'optimisation du chargement de tous ces scripts afin de limiter le nombre de requêtes HTTP. J'avais pensé regrouper pas mal de scripts en quelques fichiers (jQuery, jQueryUI, plugins, classes, functions, app) et les charger en asynchrone via un JS loader tel que headJS, requireJS, labJS ou encore $scriptJS. Je ne sais pas si c'est la meilleure solution mais je vais manquer de temps pour expérimenter donc si certains ont des retours d'expérience, des conseils ou astuces à me faire partager: je suis preneur.

Si je puis me permettre un conseil pour jQuery, jQueryUI, etc... passe par les liens google. (et éventuellement même par google loader)

Les avantages sont nombreux,
- économie de la bande passante de ton site
- vitesse maximum (si ton serveur envoit le fichier plus vite que le serveur google, chapeau)
- premier chargement de ta page + rapide (en général jquery de google se trouve 9 fois sur 10 dans le cache du visiteur ayant visité un autre site, ça épargne donc la première mise en cache)
- les serveur de google ne sont jamais offline.

:ccool:

Le 2ème conseil c'est simplement de regrouper tous les scripts dans un seul, tu ne dois même pas t'amuser à tout couper/coller, tu peux créer simplement un fichier script.php avec que des "include"s vers tous les scripts, au final l'usage de la bande passante sera quasi aussi important en volume, mais ça réduira le nombre d'appels différents au serveur.

J'utilise déjà les CDN de Google et microsoft pour les scripts le permettant et je vais certainement utiliser notre propre CDN (amazon) lorsque la version finale sera en prod pour tous les autres scripts, pour l'instant j'utilise un simple serveur debian OVH. On est plutôt gâté de ce côté là.

Regrouper en un seul fichier est une solution mais 95% des interactions du site se font via javascript et j'ai donc besoin de charger en priorité certains scripts, d'où mon idée d'utiliser les possibilités de chargement asynchrone des navigateurs. Et pourquoi pas la gestion de cache de requireJS que je n'ai jamais explorée...