Y compris les charges de fichiers CSS et fichier Javascript - comment puis-je optimiser

Question

Dupliquer: Plusieurs fichiers javascript / css: bonnes pratiques ?

Bonjour les gars, mon application est presque terminée, mais le problème, c’est que j’ai remarqué que j’incluais beaucoup de fichiers javascript externes et de css. J'utilise beaucoup de plugins gratuits tiers et je ne voulais pas toucher au code, de peur de foirer quelque chose.

Mais le résultat est que je remarque que j'ai maintenant inclus 8 fichiers CSS externes ainsi que 20 fichiers Javascript externes: O - Je ne me souviens pas avoir vu un site Web important inclure plus de 2 ou 3 fichiers css_ js combiné donc je dois certainement faire quelque chose de mal ici. Comment résoudre ce problème - je lis quelque part qu'un gros fichier js est plus rapide à charger que 2 ou 3 fichiers, ce qui représente même la moitié de la taille cumulée.

Toute aide serait grandement appréciée

Answer 1

Un gros fichier vaut mieux qu'un groupe de petits parce que dans ce cas, le navigateur Web envoie une demande au serveur Web au lieu de 8 demandes par exemple. Ce qui compte plus, ce ne sont pas les légères différences de taille totale, mais le total latence 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, le temps total est de 80 ms (temps de transfert) + 50 ms (latence) = 130 ms

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

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

Donc, si possible, fusionnez les fichiers ensemble. Compressez le contenu pour réduire la quantité de données à transférer. Et utilisez la mise en cache pour vous débarrasser des requêtes répétitives.

Answer 2

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

Et un bon tutoriel: http: // beardscratchers. com / journal / compression-css-et-javascript-with-yui-compresseur

Answer 3

Si vous combinez vos fichiers CSS en un seul fichier (identique pour JS) dans l'ordre dans lequel ils sont actuellement chargés sur la page, ils fonctionneront exactement comme avant. c’est lorsque vous commencez à modifier l’ordre que les règles peuvent remplacer de manière inattendue celles qu’elles n’avaient pas l'habitude de faire.

Answer 4

De toute façon, la plupart de vos fichiers devraient se retrouver dans le cache côté client afin que je ne m'en inquiète pas trop. Assurez-vous simplement que vous définissez les bons en-têtes. Bien sûr, s’il s’agit de la page de couverture de votre site, alors vous devriez probablement l’optimiser davantage.

Answer 5

Lisez ceci: Meilleures pratiques pour accélérer votre site Web

Answer 6

Dans les projets précédents, j’utilisais SmartOptimizer pour compresser des fichiers JS et CSS à la volée. C'est un minificateur de fichier basé sur PHP.

En utilisant un minifier juste-à-temps, vous évitez d'avoir à conserver des fichiers séparés et des fichiers source. Bien sûr, il faut un peu de puissance de calcul pour continuer à minifier les fichiers. En outre, le chargement d’un seul fichier minifié présente les avantages suivants:

1. Taille de fichier réduite (à coup sûr)
2. Pas de délai de téléchargement parallèle des composants car moins de scripts / feuilles de style.