Y compris les charges de fichiers CSS et Javascript fichier - Comment optimiser

Question

double:Multiple javascript/css files: best practices?

Salut les gars, ma demande est presque fait, mais la chose est que je l'ai remarqué que je suis, y compris beaucoup de fichiers javascript externes et css. J'utilise beaucoup de plugins gratuits de tiers ici et je n'ai pas voulu toucher le code de peur de tout chambouler.

Mais le résultat est que j'ai maintenant inclus 8 fichiers css externes ainsi que 20 énormes fichiers Javascript externes: O - Je ne me souviens pas d'avoir vu un site majeur inclure plus de 2 ou 3 css_ js fichiers combinés donc je dois certainement faire quelque chose de mal ici. Comment puis-je résoudre ce problème - j'ai lu quelque part qu'un gros fichier js est plus rapide à charger que 2 ou 3 fichiers qui sont même la moitié de la taille accumulée.

Toute aide serait grandement appréciée

Answer 1

Un fichier volumineux est préférable à un petit groupe car dans ce cas, le navigateur Web envoie une requête au serveur Web au lieu de, disons, 8 demandes. Ce qui compte le plus, ce ne sont pas les légères différences de taille totale, mais le total latency des demandes. Imaginez deux scénarios: vous téléchargez un fichier de 8 Ko et 8 fichiers de 1 Ko chacun.

1. Dans le premier scénario temps total est lissée comme 80 msec (temps de transfert) + 50 ms (temps de latence) = 130 msec

2. Dans le second scénario, vous avez smth comme 8x10 msec (temps de transfert) + 8x50 msec (!) De latence = 480 msec (!)

Vous voyez la différence. Ce n'est en aucun cas un exemple complet, mais vous avez l'idée.

Donc, si possible, fusionner les fichiers ensemble. Compresser le contenu pour diminuer la quantité de données à transférer. Et utilisez la mise en cache pour vous débarrasser des demandes répétitives.

Answer 2

YUI Compresseur http://developer.yahoo.com/yui/compressor/

Et un beau tutoriel: http://beardscratchers.com/journal/compressing-css-and-javascript-with-yui-compressor

Answer 3

lire ceci: Best Practices for Speeding Up Your Web Site

Answer 4

Dans les projets passés, j'ai utilisé SmartOptimizer pour la compression JS et Fichiers CSS à la volée. C'est un mini-fichier basé sur PHP. L'utilisation d'un minifi- cateur «juste à temps» vous évite d'avoir à séparer les fichiers sources et les fichiers miniaturisés. Bien sûr, il y a une petite puissance de traitement nécessaire pour continuer à réduire les fichiers. En outre, le chargement d'un seul fichier minified est mieux avec les avantages suivants:

1. taille du fichier (pour sûr)
2. Aucun retard de téléchargement composante parallèle, car moins de scripts/feuilles de style.

Answer 5

Si vous combinez vos fichiers CSS dans un fichier (et même pour JS) dans l'ordre où ils sont actuellement chargés sur la page, ils fonctionneront exactement comme avant; C'est quand vous commencez à changer l'ordre que les règles peuvent remplacer de façon inattendue celles auxquelles ils n'avaient pas l'habitude.

Answer 6

La plupart de vos fichiers devraient se retrouver dans le cache côté client de toute façon, donc je ne serais pas trop inquiet à ce sujet. Assurez-vous simplement que vous définissez les bons en-têtes. Bien sûr, si c'est la première page de votre site alors oui, vous devriez probablement optimiser davantage.