CSSまたはJSをマージすると、ページタイプごとに新しいファイルが生成されます

たくさんの小さなCSSファイルとJSファイルがあり、マージを有効にすることは良い選択のようです。

CSSおよびJSファイルの多くは、すべてのページ（ホームページ、カテゴリページ、製品詳細ページ）で使用されます。

別のマージされたファイルが各ページに再度ロードされるのを見るたびに、含まれるCSSでさえ重複している必要があります。

どうすればこれを回避し、より多くのデータを再利用できますか？

簡単な答え： MagentoのJS / CSSマージ機能を有効にしないでください。全体的に、各アセットを個別に送信するよりも、一般的なチェックアウトのライフサイクル全体のパフォーマンスが低下します。

長い答え：ユーザーに提供するCSSファイルは1つだけにしてください。複数のファイルは、すべてのCSSがダウンロードされるまでレンダリングをブロックします。大量のCSSを提供していない限り、一度にすべてを送信する方が有利です。その後、ブラウザにキャッシュされます。SassやLESSなどのプリプロセッサを使用すると、Magentoに非効率的に実行させる代わりに、このステップをビルドプロセスに組み込むことができます。

JSの場合、理想的には、これらのサーバー側を結合しないでください。AMD / RequireJSのようなクライアント側のスクリプトローダーはより適切な選択肢であり、MagentoのレイアウトXMLにはない依存関係の管理に役立ちます。実際の世界では、Magentoはチェックアウトフローのいくつかのポイントでスクリプトを削除します。複数のリクエストの最初のページロードヒットを取得し、後で個別のキャッシュされたアセットを使用する方が良いでしょう。

Fooman Speedster Advanced拡張機能は、（今日）重複することなく資産をインテリジェントに結合するための最善の方法です。

Magento 1.xアーキテクチャでは、フロントエンドのパフォーマンスに関する貧弱なプラクティスが山積みになっているため、多少の制限があります。その船の進路を変えることは現実的ではありません。Magento 2に貢献してください。

Fooman Speedster Magento Extensionを使用しています。CSSとJSファイルのマージを処理してページのパフォーマンスを向上させるすばらしい拡張機能です。

ページから：

JavascriptファイルとCSSファイルを組み合わせ、圧縮、キャッシュすることにより、ストアを高速化します。Fooman Speedsterは、複数のJavascriptとCSSファイルを単一のJavascriptファイルと単一のCSSファイルに結合して、ページの読み込み時間を短縮します。