AI時代のウェブパフォーマンスエンジニアリング (Japanese Edition)

第10章 サードパーティ製スクリプトのスケジューリング と最適化（およびAIの役割）

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

どのサードパーティ製スクリプトをいつ読み込むかを決めた後も、特定の作業をいつ実行するかという点で、さらなる最適化の余地がある。ブラウザには、アイドル状態の時やメインの読み込みが完了した後にタスクをスケジューリングする機能があり、緊急性のないサードパーティ製タスクの処理に役立つ。この手法により、重要度の低いサードパーティ製コードは、レスポンスやレンダリングを妨げないタイミングで確実に実行される。

サードパーティ製スクリプトのスケジューリング

ブラウザで緊急性の低い作業のスケジューリングを行う主なツールはwindow.requestIdleCallback だ。

requestIdleCallback API

この APIは、ブラウザのイベントループがアイドル状態（レイアウト、描画、ユーザ入力処理などの緊急タスクがない状態）になった際に実行すべき関数を登録できる。ブラウザはアイドルの隙間時間にこのコールバックを実行しようとする。アイドル時間が少ない場合でも確実に実行されるよう、タイムアウトを設定することも可能だ。

Windows.requestIdleCallback の使用例は以下の通りだ：

if ('requestIdleCallback' in window) {

  requestIdleCallback(() => {

    // Execute non-critical third-party init here

    loadThirdPartyAnalytics();

  }, { timeout: 3000 });

} else {

  // Fallback: if no support, run after a delay

  setTimeout(() => loadThirdPartyAnalytics(), 2000);

}

このスニペットは、ブラウザがアイドル状態になった時、または最大3秒後にloadThirdPartyAnalytics()を実行するようにスケジューリングする。高速なデバイスでは、ページ処理が完了次第すぐに実行される可能性がある。負荷の高いデバイスでは少し待機するが、3秒以内に確実に実行される。これは、即時実行が不要なアナリティクスやウィジェットの初期化などに最適だ。 例えば、アナリティクススクリプトファイルの読み込みを遅延させた場合でも、そのスクリプトは実行され、ページデータの送信などの処理を開始する可能性がある。この初期化処理をrequestIdleCallbackで囲むことで、メインスレッドが空き状態になった時点でのみデータ送信を開始させられる。

注意点：requestIdleCallbackは全てのブラウザで利用できるわけではない（Safariは2024年12月リリース版18.2でサポートを追加したが、旧バージョンでは未対応）。そのためsetTimeoutへのフォールバックがよく使われる。フォールバックによりコードは遅延は生じるものの確実に実行され、重要な タスクのブロックを回避できる。

Onload または最初のやり取り後

より簡単な方法は、ページの「ロード」イベントを待つことだ。window.onloadイベントは、画像やスクリプトなどの全リソースの読み込みが完了した時に発火する。サードパーティの初期化をこのイベントまで遅らせれば、重要なリソースの読み込みと競合しないことを保証できる。例えば： ...