J'ai une application tierce partie qui charge de nombreux fichiers CSS et JavaScript, et je souhaite maintenant l'optimiser en concainant tous les javascripts dans un seul fichier, comprimé par le yuicompresseur, mais ... quand ... Nous avons un mélange comme: est-il important qu'il y a un CSS au milieu ici? Dois-je conciser et yuicompresser les 4 javascripts et les charger avant le CSS ou après?
3 Réponses :
Peu importe, bien que si le chargement prend un certain temps, l'utilisateur pourrait voir sa page changer d'apparence et se demander pourquoi. Je mettais d'abord les fichiers CSS à avoir les définitions de style en place avant toute manipulation DOM, minimisant probablement le changement visible que la page chargée de la page, mais cela n'a pas vraiment d'importance à la fin.
Cela dépend. Si tous les JS ne fonctionnent que sur DOM prêt, la commande est sans importance. Cependant, s'il existe un JavaScript en ligne qui change de style CSS d'éléments DOM, vous aurez alors des problèmes.
Plus pratiquement, vous devriez probablement mettre le CSS d'abord, il est donc moins de temps où l'utilisateur doit faire l'expérience de contenu non collé.
Si les scripts sont exécutés sur DOM prêt, vous voudrez peut-être simplement les coller tout juste avant la balise . C'est un peu d'économies, mais chaque seconde compte.
+1 pour l'impact de la manipulation de style JavaScript. Par exemple. Si Javasscript qui modifie les courses de positionnement CSS avant qu'un fichier CSS dépendant a été chargé, le rendu inattendu pourrait se produire. Donc, les fichiers CSS doivent être chargés en premier.
Check out Les meilleures pratiques de Yahoo pour accélérer votre site Web , ils recommandent de charger votre CSS d'abord (de préférence dans l'en-tête), et votre JS DERNIER (après tout le contenu du corps). Les meilleures pratiques de Google ont également recommandé de charger CSS en premier.
Les meilleures pratiques de Google n'ont plus cette recommandation pour une raison quelconque, mais l'audit de Chrome 45 note encore "optimiser l'ordre des styles et des scripts. Les fichiers CSS externes suivants ont été inclus après un fichier JavaScript externe dans la tête du document. Pour assurer des fichiers CSS. sont téléchargés en parallèle, incluent toujours des CSS externes avant JavaScript externe. "