requestIdleCallback を使ってリソースを読み込ませる

1. このページの目的

requestIdleCallback を使って、Google Tag Manager のタグを読み込んでみる。

2. コード

HTML

<script class="lazyload" data-src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>

JavaScript

window.addEventListener("load", (event) => {

  const processPendingAnalyticsEvents = (deadline) => {
    // script タグを読み込ませる
    document.querySelectorAll('script.lazyload[data-src]').forEach(e => {
      e.src = e.getAttribute('data-src');
      e.removeAttribute('data-src');
    });
  };
  // コールバック関数を渡す（アイドル時に実行してくれる）
  requestIdleCallback(processPendingAnalyticsEvents);
  //requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });

});

• 最低限の実装にしてある。
• コールバック関数 processPendingAnalyticsEvents() はメインスレッドで実行される。
• 今回、他に処理がないので processPendingAnalyticsEvents() はすぐに実行される。

3. 結果

• 今回、他に処理がなくすぐにコールバック関数が実行される。

4. 考察

• CWV 的にはあまり意味がないと思われる。
  • ユーザー・インタラクティブなイベントをトリガーとしてリソースを読み込ませる方法^[1]と違い、そのリソースの読み込み処理が Lighthouse の評価対象になってしまい、評価を下げる一因となる。

[1] ユーザー・インタラクションをトリガーとして .css / .js を読み込む

5. 参考

• Cooperative Scheduling of Background Tasks (W3C Proposed Recommendation 10 October 2017)
• window.requestIdleCallback() - Web APIs | MDN
• Using requestIdleCallback  |  Web  |  Google Developers
• requestIdleCallback | Can I use... (ブラウザのサポート状況)