Nous avons beaucoup de petits fichiers CSS et JS et l'activation de la fusion semble être un bon choix.
De nombreux fichiers CSS et JS sont utilisés sur chaque page (page d'accueil, page de catégorie, page de détail du produit).
Chaque fois que nous avons vu qu'un fichier fusionné différent est à nouveau chargé sur chaque page, même le CSS contenu doit se chevaucher.
Comment éviter cela et réutiliser plus de données?
css
javascript
frontend
Alex
la source
la source
.csset les.jsfichiers. Dans une installation par défaut de Magento, les.cssfichiers sont globalement les mêmes, donc le fichier fusionné a un hachage identique. Mais.jscela diffère beaucoup - il y a donc un fichier nouvellement combiné pour les pages de produits et pour les pages de catégorie et ainsi de suite - comprenant toujours la bibliothèque complète du prototype.Réponses:
Réponse courte: n'activez jamais la fonction de fusion JS / CSS de Magento. Dans l'ensemble, les performances sont moins bonnes tout au long du cycle de vie d'un paiement classique que l'envoi de chaque élément individuellement.
Réponse longue: vous ne devez servir qu'un seul fichier CSS aux utilisateurs. Plusieurs fichiers bloquent le rendu jusqu'à ce que tous les CSS soient téléchargés. À moins que vous ne serviez une énorme quantité de CSS, il est avantageux de tout envoyer en même temps, le navigateur le met en cache. L'utilisation d'un pré-processeur comme Sass ou LESS peut intégrer cette étape dans votre processus de construction au lieu de laisser Magento le faire de manière inefficace.
Pour JS, idéalement, vous ne devriez pas combiner ces éléments côté serveur. Les chargeurs de script côté client comme AMD / RequireJS sont de meilleurs choix et aident à gérer les dépendances, ce que le Layout XML de Magento ne fait pas. Dans le monde réel, bien que Magento tombe dans les scripts à plusieurs moments du flux de paiement. Vous feriez mieux de prendre le hit de chargement de page initial de plusieurs demandes et d'avoir des actifs séparés mais mis en cache par la suite.
L'extension Fooman Speedster Advanced est votre meilleur pari pour combiner intelligemment les actifs sans duplication (aujourd'hui).
Vous êtes quelque peu limité par l'architecture Magento 1.x qui commence par un tas de mauvaises pratiques pour les performances frontales. Il n'est pas réaliste de changer le cap de ce navire. Contribuez à Magento 2.
la source
Nous utilisons l' extension Fooman Speedster Magento . C'est une merveilleuse extension qui gère la fusion des fichiers CSS et JS pour augmenter les performances de votre page.
Depuis la page:
la source
uglifyjs --compresset mieux gérer les commentaires, vous pourriez obtenir une amélioration supplémentaire d'environ 4% plus petite avec mon code. im en utilisant uglifyjs v3 à partir du nœud.