SharePoint Online で画像と JavaScript の読み込みを遅延させる

この資料では、SharePoint Online ページの読み込み時間を短縮する方法について説明します。そのためには、JavaScript を使用して、画像の読み込みを遅らせ、ページが読み込まれるまで重要ではない JavaScript の読み込みを待機します。

画像は SharePoint Online でのページの読み込み速度を低下させる可能性があります。 既定では、ほとんどの最新のインターネット ブラウザーは HTML ページを読み込むときに画像を事前に取り込みます。 ユーザーが下にスクロールするまで画像が画面に表示されない場合、このためにページの読み込みに余計な時間がかかることがあります。 画像を読み込むためにページの表示される部分の読み込みがブロックされることがあります。 この問題を回避するために、JavaScript を使用して最初に画像の読み込みをスキップすることができます。 また、重要ではない JavaScript の読み込みも SharePoint ページでの読み込み速度が遅くなる原因になることがあります。 このトピックでは、SharePoint Online で JavaScript を使用してページの読み込み速度を向上させることができる方法をいくつか紹介します。

JavaScript による SharePoint Online ページ内画像の遅延読み込みで、ページの読み込み速度を向上させる

JavaScript を使用して、Web ブラウザーが画像を事前に取り込むのを防ぎます。 このようにすると、全体的なドキュメントのレンダリング速度が向上します。 この操作を行うには、<img> タグの src 属性の値を削除し、data-src などのデータ属性内のファイルへのパスに置き換えます。 次に例を示します。

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg” />

この方法を使用すると、ブラウザーが画像をすぐにダウンロードしなくなります。 画像が既にビューポートにある場合、JavaScript は、データ属性から URL を取得して src 属性の値として挿入するようにブラウザーに指示します。 画像は、ユーザーがスクロールして表示されるようになるときに読み込まれます。

このすべてを行うには、JavaScript を使用する必要があります。

テキスト ファイルで、isElementInViewport() 関数を定義し、ブラウザーでユーザーに表示される部分の中に要素があるかどうかを確認します。

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
  );
}

次に、loadItemsInView() 関数内で isElementInViewport() を使用します。loadItemsInView() 関数は、画像がブラウザーでユーザーに表示される部分内にある場合に、data-src 属性の値が指定されているすべての画像を読み込みます。次の関数をテキスト ファイルに追加します。

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

最後に、次の例に示すように window.onscroll()    内から window.onscroll()    を呼び出します。これで、ビューポート内にあるすべての画像が、事前に読み込まれずに、ユーザーに必要なときに読み込まれるようになります。 次のコードをテキスト ファイルに追加します。

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

SharePoint Online の場合は、#s4-workspace <div> タグで次の関数をスクロール イベントに関連付ける必要があります。 これは、リボンがページの一番上に表示された状態を維持するために、ウィンドウ イベントが上書きされるためです。

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

テキストファイルを拡張子 .js が付いた JavaScript ファイル (たとえば、delayLoadImages.js) として保存します。

delayLoadImages.js の作成が終了したら、SharePoint Online でファイルのコンテンツをマスター ページに追加できます。 このためには、スクリプトのリンクをマスター ページのヘッダーに追加します。 マスター ページにリンクが追加されると、SharePoint Online サイトでそのマスター ページのレイアウトを使用するすべてのページに JavaScript が適用されます。 または、サイトの 1 つのページでのみ使用する場合は、スクリプト エディター Web パーツを使用して、JavaScript をページに埋め込みます。 詳細については、次のトピックを参照してください。

例: SharePoint Online でマスター ページから JavaScript delayLoadImages.js ファイルを参照する   

この操作を実行するには、マスター ページ内で jQuery も参照する必要があります。 次の例では、最初のページの読み込みでは画像は 1 つのみですが、ページ上にはさらに複数の画像があります。

ページに読み込まれている 1 つの画像を示すスクリーンショット

次のスクリーンショットは、ビュー内にスクロールされた後にダウンロードされる残りの画像を示しています。

ページに読み込まれている複数の画像を示すスクリーンショット

JavaScript を使用して画像の読み込みを遅延させる手法はパフォーマンスを向上させるには有効です。しかし、この手法を一般向け Web サイトに適用する場合、検索エンジンは、通常の形式の画像をクロールするのと同じ方法でこれらの画像をクロールできません。 ページが読み込まれるまで画像のメタデータ自体が実際にそこにないため、これは検索エンジンのランキングに影響します。 検索エンジンのクローラーは、HTML のみを読み取るので、ページ上のコンテンツとして画像を認識しません。 画像は、検索結果でページのランク付けに使用される要素の 1 つです。 この問題を回避するための 1 つの方法として、画像の紹介テキストを使用することができます。

GitHub コードのサンプル: JavaScript を埋め込んでパフォーマンスを向上させる

GitHub で提供される JavaScript の挿入に関する記事とコード サンプルを参照してください。

関連項目

Office 2013 および Office 365 ProPlus でサポートされているブラウザー

[方法]: SharePoint Server 2013 のサイトにマスター ページを適用する

[方法]: SharePoint 2013 でページ レイアウトを作成する方法

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

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

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

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

×