Comment puis-je réduire les coûts de chargement de grandes bibliothèques JS?
Si j'utilise une grande bibliothèque Javascript pour ma page, comment puis-je m'assurer que cela ne nuit pas à l'utilisation du site par l'utilisateur?
Il y a 4 choses que vous pouvez faire.
- Réduisez votre fichier JS. Cela supprime tous les commentaires et les espaces pour réduire sa taille.
- Combinez vos fichiers JS sur chaque page pour qu’il n’y ait qu’un seul fichier.
- Utilisez un paquet pour gzip vos fichiers lorsque vous les envoyez. Cela les rendra encore plus petit
- Mettez du Javascript qui n'est pas requis immédiatement au bas de la page pour qu'il se charge à la fin. Cela permettra à l'utilisateur de voir et d'utiliser la page avant même que le JS ne soit complètement chargé.
Et d'autres personnes ont suggéré:
- Apache gérera automatiquement la compression (et la mise en cache du contenu compressé), ce qui simplifie énormément la gestion des fichiers.
- Si JavaScript est correctement mis en cache, vous obtiendrez de grands avantages.
- Les domaines génériques (avec plusieurs URI) autoriseront davantage de connexions simultanées. La prélecture n'est pas seulement pour les images /
Si vous utilisez des bibliothèques communes (telles que jQuery, Prototype ou Dojo), vous pouvez décharger le fichier sur Google et les rendre le servir , cela vous offre plusieurs avantages:
- Vous n'avez pas à vous soucier de la minification, de la compression, etc.
- Ce n'est pas votre bande passante
- Ces fichiers proviennent d’un domaine différent, vous pouvez donc (au moins partiellement) contourner le problème limite de 2 demandes parallèles par nom d’hôte
- Si vous avez de la chance, l'utilisateur a déjà visité un autre site utilisant la même bibliothèque du même fournisseur et l'a donc déjà dans le cache du navigateur.
Remarque: la version que vous demandez peut avoir un impact important sur les caractéristiques de la mise en cache: demander jQuery 1.4.2 vous donnera un fichier pouvant être mis en cache pendant un an, mais la version 1.4 ne peut l'être que pendant une heure.
Vous pouvez mettre toute la bibliothèque dans un fichier js et le compresser. Cependant, cela ne compte vraiment que pour le premier chargement d'une page. Après cela, votre fichier js sera mis en cache dans le navigateur, en particulier si vous définissez l’expiration de la mémoire cache assez longtemps. Par conséquent, tout coup consécutif ne chargera plus votre fichier js.
Outre les réponses ci-dessus, vous pouvez utiliser le Google Closure Compiler pour compresser et optimiser automatiquement votre JS lors de l'intégration à des bibliothèques tierces (jQuery, YUI, mootools, etc.).
Si vous disposez de plusieurs éléments de page et d’accès à un domaine distinct, vous pouvez envisager d’héberger tous les fichiers statiques, y compris le fichier JS volumineux, sur le deuxième domaine.
Comme Steve Souders le note dans son blog sur les sites Web de haute performance -
... dans certaines situations, il est intéressant de prendre un ensemble de ressources en cours de téléchargement sur un seul domaine et de les répartir sur plusieurs domaines. J'appelle ce domaine sharding. Cela permet de télécharger plus de ressources en parallèle, ce qui réduit le temps de chargement global de la page.
ailleurs il écrit ..
Les navigateurs ouvrent un nombre limité de connexions par domaine ... La division ou le partage des requêtes entre deux domaines, par opposition à un domaine, permet d'obtenir une page plus rapide, en particulier dans IE 6 & 7.