SharePoint Online での画像の読み込み遅延と JavaScriptDelay loading images and JavaScript in SharePoint Online

この記事では、JavaScript を使用してイメージの読み込みを遅延し、ページの読み込み後まで重要でない JavaScript の読み込みを待機することで、SharePoint Online ページの読み込み時間を削減する方法について説明します。This article describes how you can decrease the load time for SharePoint Online pages by using JavaScript to delay loading images and also by waiting to load non-essential JavaScript until after the page loads.

イメージは、SharePoint Online のページ読み込み速度に悪影響を及ぼす可能性があります。Images can negatively affect page load speeds on SharePoint Online. 既定では、HTML ページの読み込み時に最新のほとんどのインターネット ブラウザーが画像をプリフェッチします。By default, most modern Internet browsers pre-fetch images when loading an HTML page. これにより、ユーザーが下にスクロールするまで画像が画面に表示されない場合、ページの読み込み速度が不必要に遅くなる可能性があります。This can cause the page to be unnecessarily slow to load if the images are not visible on the screen until the user scrolls down. 画像は、ブラウザーがページの表示部分を読み込むのをブロックできます。The images can block the browser from loading the visible part of the page. この問題を回避するには、JavaScript を使用して、最初にイメージの読み込みをスキップできます。To work around this problem, you can use JavaScript to skip loading the images first. また、重要でない JavaScript を読み込むと、SharePoint ページのダウンロード時間も遅くなる可能性があります。Also, loading non-essential JavaScript can slow download times on your SharePoint pages too. このトピックでは、SharePoint Online の JavaScript でページの読み込み時間を短縮するために使用できるいくつかの方法について説明します。This topic describes some methods you can use to improve page load times with JavaScript in SharePoint Online.

JavaScript を使用して SharePoint Online ページでのイメージの読み込みを遅らせ、ページの読み込み時間を短縮するImprove page load times by delaying image loading in SharePoint Online pages by using JavaScript

JavaScript を使用すると、Web ブラウザーによる画像の事前フェッチを防止できます。You can use JavaScript to prevent a web browser from pre-fetching images. これにより、ドキュメントの全体的なレンダリングが高速化されます。This speeds up overall document rendering. これを行うには、タグから src 属性の値を削除し、それを data-src などのデータ属性内のファイルへのパスに <img> 置き換える必要があります。To do this you remove the value of the src attribute from the <img> tag and replace it with the path to a file in a data attribute such as: data-src. 次に例を示します。For example:

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

このメソッドを使用すると、ブラウザーはイメージをすぐにダウンロードされません。By using this method, the browser doesn't download the images immediately. イメージが既にビューポート内にある場合、JavaScript はブラウザーに対して、データ属性から URL を取得し、src 属性の値として挿入します。If the image is already in the viewport, JavaScript tells the browser to retrieve the URL from the data attribute and insert it as the value for the src attribute. 画像は、ユーザーがスクロールして表示される場合にのみ読み込まれます。The image only loads as the user scrolls and it comes into view.

これをすべて実行するには、JavaScript を使用する必要があります。To make all of this happen, you'll need to use JavaScript.

テキスト ファイルで isElementInViewport() 関数を定義して、ユーザーに表示されるブラウザーの一部に要素が含されているかどうかを確認します。In a text file, define the isElementInViewport() function to check whether or not an element is in the part of the browser that is visible to the user.

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

次に 、loadItemsInView() 関数で isElementInViewport() を使用 します。Next, use isElementInViewport() in the loadItemsInView() function. loadItemsInView() 関数は、ユーザーに表示されるブラウザーの一部にある場合、data-src 属性の値を持つすべてのイメージを読み込むようになります。The loadItemsInView() function will load all images that have a value for the data-src attribute if they are in the part of the browser that is visible to the user. テキスト ファイルに次の関数を追加します。Add the following function to the text file:

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() 内から loadItemsInView() を呼び出します。Finally, call loadItemsInView() from within window.onscroll() as shown in the following example. これにより、ユーザーが必要とするとビューポート内のすべてのイメージが読み込まれますが、以前は読み込まれません。This ensures that any images that are in the viewport are loaded as the user needs them, but not before. テキスト ファイルに次の項目を追加します。Add the following to the text file:

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

SharePoint Online では、次の関数をワークスペース タグのスクロール イベントに#s4する必要 <div> があります。For SharePoint Online, you need to attach the following function to the scroll event on the #s4-workspace <div> tag. これは、リボンがページの上部に接続されたままに維持するために、ウィンドウ イベントが上書きされるためです。This is because the window events are overridden in order to ensure the ribbon remains attached to the top of the page.

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

テキスト ファイルを拡張子 .js を持つ JavaScript ファイルとして保存します (たとえば、delayLoadImages.js。Save the text file as a JavaScript file with the extension .js, for example delayLoadImages.js.

ファイルの作成がdelayLoadImages.jsしたら、SharePoint Online のマスター ページにファイルの内容を追加できます。Once you've finished writing delayLoadImages.js, you can add the contents of the file to a master page in SharePoint Online. これを行うには、マスター ページのヘッダーにスクリプト リンクを追加します。You do this by adding a script link to the header in the master page. マスター ページが作成されると、そのマスター ページ レイアウトを使用する SharePoint Online サイトのすべてのページに JavaScript が適用されます。Once it's in a master page, the JavaScript will be applied to all pages in your SharePoint Online site that use that master page layout. または、サイトの 1 ページでのみこれを使用する場合は、スクリプト エディター Web パーツを使用して JavaScript をページに埋め込む必要があります。Alternatively, if you intend to only use this on one page of your site, use the script editor Web Part to embed the JavaScript into the page. 詳細については、次のトピックを参照してください。See these topics for more information:

例: SharePoint Online delayLoadImages.jsページから JavaScript ファイルを参照するExample: Referencing the JavaScript delayLoadImages.js file from a master page in SharePoint Online

これを機能するには、マスター ページで jQuery も参照する必要があります。In order for this to work, you also need to reference jQuery in the master page. 次の例では、最初のページの読み込みで、読み込まれるイメージは 1 つのみですが、ページにはさらに複数のイメージが読み込まれているのを確認できます。In the following example, you can see in the initial page load that there is only one image loaded but there are several more on the page.

ページ上に読み込まれる 1 つのイメージが表示されたスクリーンショット

次のスクリーンショットは、スクロールして表示した後にダウンロードされる残りのイメージを示しています。The following screenshot shows the rest of the images that are downloaded after they scroll into view.

ページ上に読み込まれる複数のイメージが表示されたスクリーンショット

JavaScript を使用してイメージの読み込みを遅延させるのは、パフォーマンスを向上させる効果的な手法です。ただし、この手法がパブリック Web サイトに適用されている場合、検索エンジンは、定期的に形成されたイメージをクロールするのと同じ方法でイメージをクロールできます。Delaying image loading by using JavaScript can be an effective technique in increasing performance; however, if the technique is applied on a public website then search engines are not able to crawl the images in the same way they would crawl a regularly formed image. これは、ページが読み込まれるまで画像自体のメタデータが実際にはそこにないので、検索エンジンのランク付けに影響を与える可能性があります。This can affect rankings on search engines because metadata on the image itself is not really there until the page loads. 検索エンジン のクローラは HTML のみを読み取り、ページに画像をコンテンツとして表示しない。Search engine crawlers only read the HTML and therefore will not see the images as content on the page. 画像は、検索結果のページのランク付けに使用される要素の 1 つです。Images are one of the factors used to rank pages in search results. これを回避する 1 つの方法は、画像に入門テキストを使用する方法です。One way to work around this is to use introductory text for your images.

GitHub コード サンプル: JavaScript を挿入してパフォーマンスを向上させるGitHub code sample: Injecting JavaScript to improve performance

GitHub で提供される JavaScript インジェクションに関する記事とコード サンプルをお見逃しなく。Don't miss the article and code sample on JavaScript injection provided on GitHub.

関連項目See also

エンタープライズ向け Office 2013 Microsoft 365 Apps でサポートされるブラウザーSupported browsers in Office 2013 and Microsoft 365 Apps for enterprise

[方法]: SharePoint Server 2013 のサイトにマスター ページを適用するHow to: Apply a master page to a site in SharePoint 2013

[方法]: SharePoint 2013 でページ レイアウトを作成する方法How to: Create a page layout in SharePoint 2013