このページは Cloud Translation API によって翻訳されました。

サードパーティの JavaScript を最適化する

Milica Mihajlija

サードパーティのスクリプトはパフォーマンスに影響します。そのため、スクリプトを定期的に監査し、効率的な読み込み方法を使用することが重要です。この Codelab では、サードパーティリソースの読み込みを最適化する方法について説明します。次の手法について説明します。

スクリプトの読み込みを延期する
重要でないリソースの遅延読み込み
必要なオリジンへの事前接続

付属のサンプルアプリには、サードパーティのソースから取得した 3 つの機能を備えたシンプルなウェブページが含まれています。

動画の埋め込み
折れ線グラフをレンダリングするためのデータ可視化ライブラリ
ソーシャルメディア共有ウィジェット

サードパーティのリソースがハイライト表示されたページのスクリーンショット。 — サンプルアプリ内のサードパーティリソース

まずアプリのパフォーマンスを測定し、それぞれの手法を適用してアプリのパフォーマンスのさまざまな側面を改善します。

パフォーマンスの測定

まず、全画面ビューでサンプルアプリを開きます。

[Remix to Edit] をクリックしてプロジェクトを編集可能にします。
サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。

ページで Lighthouse のパフォーマンス監査を実行し、ベースラインパフォーマンスを確認します。

Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[Lighthouse] タブをクリックします。
[モバイル] をクリックします。
[パフォーマンス] チェックボックスをオンにします。（[監査] セクションの他のチェックボックスをオフにします）。
[Simulated Fast 3G, 4x CPU Slowdown] をクリックします。
[ストレージを消去] チェックボックスをオンにします。
[Run audits] をクリックします。

マシンで監査を実行した場合、正確な結果は異なる場合がありますが、First Contentful Paint（FCP）の時間はかなり長く、Lighthouse では調査すべき 2 つの提案（レンダリングブロックリソースの排除と必要なオリジンへの事前接続）が提案されています。（指標がすべて緑色になっている場合でも、最適化によって改善は見込まれます）。

2.4 秒の FCP と、レンダリングブロックリソースの排除と必要なオリジンへの事前接続の 2 つの機会を示す Lighthouse の監査のスクリーンショット。

サードパーティの JavaScript を遅延させる

「レンダリングブロックリソースの排除」の監査では、d3js.org からのスクリプトを延期することで時間を節約できることが判明しました。

d3.v3.min.js スクリプトがハイライト表示された、レンダリングブロックリソースの監査の排除のスクリーンショット。

D3.js は、データを可視化するための JavaScript ライブラリです。サンプルアプリの script.js ファイルでは、D3 ユーティリティ関数を使用して SVG 折れ線グラフを作成し、ページに追加します。ここではオペレーションの順序が重要です。script.js は、ドキュメントが解析されて D3 ライブラリが読み込まれた後に実行する必要があるため、index.html の </body> 終了タグの直前に含まれています。

ただし、D3 スクリプトがページの <head> に含まれているため、残りのドキュメントの解析がブロックされます。

head 内のスクリプトタグがハイライト表示された index.html のスクリーンショット。

スクリプトタグに追加される次の 2 つのマジック属性でパーサーをブロック解除できます。

async を使用すると、スクリプトがバックグラウンドでダウンロードされ、ダウンロードの完了後に最初のタイミングで実行されます。
defer を使用すると、スクリプトがバックグラウンドでダウンロードされ、解析が完了した後に実行されます。

このグラフはページ全体にとって重要ではなく、スクロールしなければ見えない範囲にある可能性が高いため、defer を使用してパーサーブロックがないことを確認してください。

ステップ 1: `defer` 属性を使用してスクリプトを非同期で読み込む

index.html の 17 行目で、defer 属性を <script> 要素に追加します。

<script src="https://d3js.org/d3.v3.min.js" defer></script>

ステップ 2: オペレーションの順序が正しいことを確認する

D3 が延期されたため、D3 の準備が整う前に script.js が実行され、エラーが発生します。

defer 属性が指定されたスクリプトは、指定された順序で実行されます。D3 の準備が整った後で script.js が実行されるようにするには、これに defer を追加して、ドキュメントの <head>（D3 の <script> 要素の直後）に移動します。これでパーサーがブロックされなくなり、ダウンロードがより早く開始されます。

<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./script.js" defer></script>

サードパーティリソースを遅延読み込みする

スクロールしなければ見えない範囲にあるリソースはすべて、遅延読み込みに適しています。

サンプルアプリでは、iframe に YouTube 動画が埋め込まれています。ページで行われたリクエストの数と、埋め込みの YouTube iframe からのリクエストを確認するには:

サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[Network] タブをクリックします。
[キャッシュを無効にする] チェックボックスをオンにします。
[Throttling] プルダウンメニューで [Fast 3G] を選択します。
ページを再読み込みする。

DevTools の [Network] パネルのスクリーンショット。

[Network] パネルには、このページで合計 28 件のリクエストが送信され、約 1 MB の圧縮リソースが転送されたことが表示されます。

YouTube iframe が行ったリクエストを特定するには、[Initiator] 列で動画 ID 6lfaiXM6waw を探します。すべてのリクエストをドメイン別にグループ化するには:

[Network] パネルで列のタイトルを右クリックします。
プルダウンメニューで [ドメイン] 列を選択します。
リクエストをドメインで並べ替えるには、[ドメイン] 列のタイトルをクリックします。

新しい並べ替えにより、Google ドメインに対する追加のリクエストがあることがわかります。YouTube iframe では、スクリプト、スタイルシート、画像、フォントに対して合計 14 件のリクエストが行われます。ただし、ユーザーが実際に下にスクロールして動画を再生しない限り、すべてのアセットが必要なわけではありません。

ユーザーがページのそのセクションまでスクロールダウンするまで動画の遅延読み込みを待つことで、ページが最初に行うリクエストの数を削減できます。このアプローチにより、ユーザーのデータが保存され、初期読み込みが高速化されます。

遅延読み込みを実装する 1 つの方法は、Intersection Observer を使用することです。これは、要素がブラウザのビューポートに出入りしたときに通知を受け取るブラウザ API です。

ステップ 1: 最初に動画が読み込まれないようにする

動画 iframe を遅延読み込みするには、まず、通常の方法で読み込まれないようにする必要があります。そのためには、src 属性を data-src 属性に置き換えて、動画の URL を指定します。

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/lS9D6w1GzGY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

data-src は、標準の HTML 要素に関する追加情報を格納するためのデータ属性です。データ属性には、「data-」で始まる任意の名前を指定できます。

src がない iframe は読み込まれません。

ステップ 2: Intersection Observer を使用して動画を遅延読み込みする

ユーザーがスクロールして動画を読み込むには、そのタイミングを把握する必要があります。そこで出番となるのが Intersection Observer API です。Intersection Observer API を使用すると、トラッキングする要素がビューポートを出入りするたびに実行されるコールバック関数を登録できます。

まず、新しいファイルを作成して lazy-load.js という名前を付けます。

[New File] をクリックして名前を付けます。
[Add This File] をクリックします。

ドキュメントヘッドにスクリプトタグを追加します。

 <script src="/lazy-load.js" defer></script>

lazy-load.js で、新しい IntersectionObserver を作成し、実行するコールバック関数を渡します。

// create a new Intersection Observer
let observer = new IntersectionObserver(callback);

次に、observe メソッドで引数として渡して、observer に再生するターゲット要素（この場合は動画 iframe）を指定します。

// the element that you want to watch
const element = document.querySelector('iframe');

// register the element with the observe method
observer.observe(element);

callback は、IntersectionObserverEntry オブジェクトと IntersectionObserver オブジェクト自体のリストを受け取ります。各エントリには target 要素と、寸法、位置、ビューポートに入った時刻などを記述するプロパティが含まれます。IntersectionObserverEntry のプロパティの一つは isIntersecting です。これは、要素がビューポートに入るときの true と等しいブール値です。

この例では、target は iframe です。target がビューポートに入ると、isIntersecting は true と等しくなります。実際の動作を確認するには、callback を次の関数に置き換えます。

let observer = new IntersectionObserver(callback);
let observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      console.log(entry.target);
      console.log(entry.isIntersecting);
    });
  });

サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 を押します。
Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
[コンソール] タブをクリックします。

上下にスクロールしてみます。isIntersecting の値が変更され、ターゲット要素がコンソールにログに記録されます。

ユーザーが特定の位置までスクロールしたときに動画を読み込むには、loadElement 関数を実行する条件として isIntersecting を使用します。この関数は、iframe 要素の data-src から値を取得し、iframe 要素の src 属性として設定します。その置き換えによって動画の読み込みがトリガーされます。次に、動画が読み込まれたら、observer で unobserve メソッドを呼び出して、ターゲット要素の監視を停止します。

let observer = new IntersectionObserver(function (entries, observer) {
  entries.forEach(entry => {
    console.log(entry.target);
    console.log(entry.isIntersecting);
  });
});
    if (entry.isIntersecting) {
      // do this when the element enters the viewport
      loadElement(entry.target);
      // stop watching
      observer.unobserve(entry.target);
    }
  });
});

function loadElement(element) {
  const src = element.getAttribute('data-src');
  element.src = src;
}

ステップ 3: パフォーマンスを再評価する

リソースのサイズと数がどのように変化したかを確認するには、DevTools の [ネットワーク] パネルを開いて、ページを再度再読み込みします。[Network] パネルには、ページで 14 件のリクエストがあり、わずか 260 KB であることが表示されます。これは大きな改善です。

ページを下にスクロールして [ネットワーク] パネルを確認します。動画にアクセスすると、そのページで追加のリクエストがトリガーされていることを確認できます。

注: この例では、要素がビューポートに入ると読み込まれます（上の動画を参照）。この遅延を回避し、ビューポートに入る少し前に要素を読み込むことで、よりスムーズなユーザーエクスペリエンスを実現できます。そのためには、rootMargin プロパティを使用して、ターゲット要素の周囲にマージンを定義して、isIntersecting の変更をトリガーする領域を効果的に拡大（または縮小）します。

必要なオリジンに事前接続する

重要性の低い JavaScript を遅延させ、YouTube リクエストを遅延読み込みしたので、今度は残りのサードパーティコンテンツを最適化します。

rel=preconnect 属性をリンクに追加すると、そのリソースのリクエストが行われる前にドメインへの接続を確立するようにブラウザに指示します。この属性は、ページが必要とする確実なリソースを提供するオリジンに最適です。

必要なオリジンに事前接続するで提案した最初のステップで実施した Lighthouse の監査では、staticxx.facebook.com と youtube.com への早期接続を確立することで約 400 ミリ秒を節約できます。

staticxx.facebook.com ドメインがハイライト表示された、必要なオリジンの監査に事前接続します。

YouTube 動画が遅延読み込みされるようになったため、ソーシャルメディア共有ウィジェットのソースである staticxx.facebook.com のみが残ります。このドメインへの早期接続は、<link> タグをドキュメントの <head> に追加するだけで簡単に確立できます。

  <link rel="preconnect" href="https://staticxx.facebook.com">

パフォーマンスを再評価する

以下に、最適化後のページの状態を示します。この Codelab のパフォーマンスを測定するセクションの手順に沿って、別の Lighthouse 監査を実施します。

Lighthouse の監査。FCP が 1 秒、パフォーマンススコアが 99 と表示されている。