SharePoint Online の縮小およびバンドル

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

Web サイトをカスタマイズすると、カスタマイズをサポートするために大量のファイルがサーバーに追加されてしまうことがあります。 JavaScript、CSS、画像が追加されると、サーバーへの HTTP リクエストの数が増えるため、Web ページの表示に時間がかかるようになります。 同じ種類のファイルが複数ある場合は、それらのファイルを 1 つにまとめて (バンドルして)、ファイルのダウンロードにかかる時間を短縮できます。

JavaScript ファイルや CSS ファイルの場合は、縮小と呼ばれる方法を使うこともできます。これは、空白やその他の不要な文字を削除して、ファイルの合計サイズを小さくする方法です。

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

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

重要: Web Essentials は、サード パーティのオープンソースで提供されるコミュニティベース プロジェクトです。 このソフトウェアは、Visual Studio 2012 と Visual Studio 2013 の拡張機能で、Microsoft ではサポートされていません。 Web Essentials をダウンロードするには、Web サイト (http://vswebessentials.com/download) にアクセスします。

Web Essentials のバンドルには、次の 2 つの形式があります。

  • .bundle: CSS ファイルと JavaScript ファイルの場合

  • .sprite: 画像の場合 (Visual Studio 2013 でのみ利用可能)

下の画像のように、ユーザー設定マスター ページの内部で参照されているブランド設定要素を伴う既存の機能がある場合は、Web Essentials を使うことができます。

ユーザー設定マスター ページのブランドの構成要素のスクリーンショット

Web Essentials で TE000127218 と CSS のバンドルを作成するには

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

  2. 選択したファイルを右クリックして、コンテキスト メニューで [Web Essentials]、[JavaScript バンドル ファイルの作成] の順に選びます。 次に例を示します。

    Web Essentials のメニューのオプションを示すスクリーンショット

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

JavaScript と CSS のバンドルを作成すると、Web Essentials では、下の画像のように JavaScript ファイルと CSS ファイルやその他の設定情報を識別するレシピ ファイルと呼ばれる XML ファイルが作成されます。

JavaScript および CSS レシピ ファイルのスクリーンショット

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

true に設定されている minify フラグのスクリーンショット

Web サイトからページを読み込む場合は、Internet Explorer 11 などの Web ブラウザーの開発者ツールを使って、サーバーに送信されたリクエストの数や各ファイルの読み込みにかかった時間を表示できます。

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

ダウンロード中の 80 のアイテムを示すスクリーンショット

CSS ファイルと JavaScript ファイルのバンドル後、リクエストの数は 74 まで減少し、各ファイルのダウンロードにかかる時間は、元のファイルを個別にダウンロードした場合より若干長くなるだけでした。

ダウンロード中の 74 のアイテムを示すスクリーンショット

バンドル後の JavaScript バンドル ファイルのサイズは、815 KB から 365 KB へと大幅に小さくなりました。

減少したダウンロード サイズを示すスクリーンショット

画像スプライトの作成による画像のバンドル

JavaScript ファイルと CSS ファイルのバンドルと同様、多数の小さいアイコンやその他の一般的な画像を 1 つの大きいスプライト シートにまとめて、CSS を使って個々の画像を表示することができます。 ユーザーの Web ブラウザーでは、各画像を個別にダウンロードする代わりに、スプライト シートを 1 回ダウンロードして、そのキャッシュをローカル コンピューターに作成します。 その結果、ダウンロードの回数と Web サーバーへのラウンド トリップの回数が減り、ページの読み込み速度が速くなります。

Web Essentials で画像スプライトを作成するには

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

  2. 選択したファイルを右クリックして、コンテキスト メニューで [Web Essentials]、[画像スプライトの作成] の順に選びます。 次に例を示します。

    画像スプライトを作成する方法を示すスクリーンショット
  3. スプライト ファイルの保存先を選びます。 .sprite ファイルは、スプライトの設定やファイルについて記述した XML ファイルです。 下の図は、スプライト PNG ファイルとそれに対応する .sprite XML ファイルの例です。

    スプライト ファイルのスクリーンショット

    スプライト XML ファイルのスクリーンショット

スキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×