SharePoint Online での縮小とバンドル

この記事では、Web Essentials で縮小とバンドルの手法を使用して HTTP 要求の数を減らし、SharePoint Online でページを読み込むのにかかる時間を短縮する方法について説明します。

Web サイトをカスタマイズすると、カスタマイズをサポートするために多数の追加ファイルをサーバーに追加できます。 JavaScript、CSS、およびイメージを追加すると、サーバーへの HTTP 要求の数が増え、Web ページの表示にかかる時間が長くなります。 同じ種類のファイルが複数ある場合は、これらのファイルをバンドルして、これらのファイルのダウンロードを高速化できます。

JavaScript ファイルと CSS ファイルの場合は、minification というアプローチを使用することもできます。ここで、不要な空白文字やその他の文字を削除することで、ファイルの合計サイズを小さくすることができます。

Web Essentials を使用した JavaScript ファイルと CSS ファイルの縮小とバンドル

Web Essentials などのサードパーティ製ソフトウェアを使用して、CSS ファイルと JavaScript ファイルをバンドルできます。

重要

Web Essentials は、サードパーティのオープン ソースのコミュニティ ベースのプロジェクトです。 このソフトウェアは Visual Studio 2012 および Visual Studio 2013 の拡張機能であり、Microsoft ではサポートされていません。 Web Essentials をダウンロードするには、 Web Essentials 2012 の Web サイトにアクセスしてください。

Web Essentials には、次の 2 つの形式のバンドルが用意されています。

• .bundle: CSS ファイルと JavaScript ファイルの場合
• .sprite: イメージの場合 (Visual Studio 2013でのみ使用可能)

カスタム マスター ページ内で参照されるいくつかのブランド化要素を持つ既存の機能がある場合は、次のような Web Essentials を使用できます。

Web Essentials で TE000127218 および CSS バンドルを作成するには

1. Visual Studio のソリューション エクスプローラーで、バンドルに含めるファイルを選択します。

2. 選択したファイルを右クリックし、コンテキスト メニューから [Web EssentialsCreate JavaScript bundle file]\(Web Essentials > Create JavaScript バンドル ファイル\) を選択します。 例:

   

JavaScript ファイルと CSS ファイルをバンドルした結果の表示

JavaScript と CSS バンドルを作成すると、Web Essentials は、JavaScript ファイルと CSS ファイルとその他の構成情報を識別するレシピ ファイルと呼ばれる XML ファイルを作成します。

さらに、バンドル レシピで minify フラグが true に設定されている場合、ファイルのサイズが小さくなり、まとめてバンドルされます。 これは、マスター ページで参照できる JavaScript ファイルの新しい縮小バージョンが作成されたことを意味します。

Web サイトからページを読み込むときは、Internet Explorer 11 などの Web ブラウザーから開発者ツールを使用して、サーバーに送信された要求の数と、各ファイルの読み込みにかかった時間を確認できます。

次の図は、縮小前に JavaScript ファイルと CSS ファイルを読み込む結果です。

CSS ファイルと JavaScript ファイルをバンドルした後、要求の数は 74 に減少し、各ファイルは個別にダウンロードするために元のファイルよりもわずかに長くかかりました。

バンドル後、JavaScript バンドル ファイルは 815 KB から 365 KB に大幅に削減されます。

イメージ スプライトを作成してイメージをバンドルする

JavaScript ファイルと CSS ファイルをバンドルする方法と同様に、多数の小さなアイコンやその他の一般的な画像を大きなスプライト シートに結合し、CSS を使用して個々の画像を表示できます。 個々のイメージをダウンロードする代わりに、ユーザーの Web ブラウザーはスプライト シートを 1 回ダウンロードし、ローカル コンピューターにキャッシュします。 これにより、ダウンロード数と Web サーバーへのラウンド トリップを減らすことで、ページ読み込みのパフォーマンスが向上します。

Web Essentials でイメージ スプライトを作成するには**

1. Visual Studio のソリューション エクスプローラーで、バンドルに含めるファイルを選択します。

2. 選択したファイルを右クリックし、コンテキスト メニューから [Web EssentialsCreate image sprite]\(Web Essentials> イメージ スプライトの作成\) を選択します。 例:

   

3. スプライト ファイルを保存する場所を選択します。 .sprite ファイルは、スプライト内の設定とファイルを記述する XML ファイルです。 次の図は、スプライト PNG ファイルとそれに対応する .sprite XML ファイルの例を示しています。