2サーバー側でJavaScriptとCSSファイルをマージして圧縮する
Web パフォーマンス最適化の最も重要なベスト プラクティスの 1 つは、HTTP リクエストを減らすことです。これは、YSlow の最も重要なルールでもあります。 HTTP リクエストを減らすソリューションには、JavaScript と CSS ファイル、CSS スプライト、イメージ マップのマージ、データ URI を使用したイメージのエンコードなどがあります。 CSS スプライトと画像マッピングは現在広く利用可能になっていますが、IE6 と IE7 がデータ URI をサポートしていないこととパフォーマンスの問題のため、このテクノロジーは広く使用されていません。現在、ほとんどの Web ページのJavaScript および CSSファイルの数は開発時と同じです。実際の状況に応じて、少数の Web ページがローカルでマージされます。これらのマージのかなりの部分は選択的に手動で行われます。新しいマージはそれぞれローカルで再度実行する必要があり、完了してサーバーにアップロードするのは比較的簡単で面倒ですが、同じファイルの圧縮でも同様の状況になります。サーバー側のマージと圧縮を使用すると、開発ロジックに従ってファイルの粒度を可能な限り小さくすることができ、Web ページの URL ルールを使用してファイルを自動的にマージおよび圧縮することができ、非常に柔軟で効率的になります。
YUIコンボハンドラー
2008 年 7 月、YUI チームは、YAHOO! CDN で YUI JavaScript コンポーネントのコンボ ハンドラーサービスを提供すると発表しました。 Combo Handler は Yahoo! が開発した Apache モジュールで、開発者は URL を通じて JavaScript と CSS ファイルを簡単かつ便利に組み合わせることができるため、ファイル リクエストの数が大幅に削減されます。たとえば、ページで YUI2 のリッチ テキスト エディター コンポーネントを使用するには、複数の JavaScript ファイルを導入する必要があります。一般的な方法は次のとおりです。
Combo Handler サービスを使用した後、上記のコードは次のように記述できます。
Combo Handler サービスを使用すると、コードの可読性がわずかに低下するだけでなく、HTTP リクエストの数が大幅に削減され、Web パフォーマンスの最適化にとって重要な URL コードの量も削減されます。したがって、YUI 2.6.0 以降、そのコア コンポーネントである YUI Loader には Combo Handling 機能が組み込まれており、YUI Loader を使用する場合、combine 属性を設定することで、ロードする複数の JavaScript または CSS ファイルを 1 つのファイルにロードできます。静的ファイル サーバーがコンボ ハンドラーをサポートしている限り、コンボ ハンドラー サービスを使用する形式。 YUI では、combine が true に設定されている場合、CDN はデフォルトで Yahoo! CDN ( http://yui.yahooapis.com ) を使用するため、問題はありません。それがYUIの最大の魅力の一つです。
残念ながら、中国のhttp://yui.yahooapis.comの速度はあまり良くありません。もともと Yahoo China はhttp://cn.yui.yahooapis.com/を提供していましたが、まだ Combo Handler サービスを提供していません。同時に、さまざまな理由により、YUI 2.7.0 以降、更新が停止しています。さらに悪いことに、Combo Handler をサポートするために Yahoo! が開発した Apache モジュールはオープンソースになる予定であると伝えられていますが、少なくとも現時点では、それを使用するには同様の機能を自分で実装する必要があるため、いくつかの機能が存在します。中国では同様の技術の応用はあまり多くない。
<script src="http://yui.yahooapis.com/combo? <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>