オーディオプレーヤーはデフォルトで遅延読み込みされます。訪問者がプレーヤーの近くまでスクロールするまで、JavaScriptやCSSは読み込まれません。これにより、ページのLargest Contentful Paint（LCP）を高速に保てます。
遅延読み込みの動作
- ページ読み込み時、プレーヤーの位置に小さなプレースホルダーが表示されます
- フルプレーヤー用のJavaScriptとCSSはまだ読み込まれません
- 訪問者がプレーヤーから500px以内にスクロールすると、フルプレーヤーが読み込まれてプレースホルダーと置き換わります
- 切り替えは視覚的にスムーズです（通常100ms未満）
Core Web Vitalsへの効果
遅延読み込みなしの場合、プレーヤーのあるすべてのページで初回読み込み時にプレーヤーのJSとCSSのコストが発生します。遅延読み込みを使うと:
- LCP: 影響なし - プレーヤーはファーストビューのコンテンツに含まれません
- INP: 影響なし - 読み込み時に重いJSが実行されません
- CLS: 影響なし - プレースホルダーは最終的なプレーヤーと同じ高さを持ちます
オフにする場合
遅延読み込みはデフォルトでオンです。以下の場合はオフにしてください:
- プレーヤーが常にファーストビューにある場合（まれ）
- 自動再生を使用し、プレーヤーを即座に準備したい場合（非常にまれ）
- デバッグのために遅延読み込みなしでテストしたい場合
オフにする方法
- テキスト読み上げ → 詳細設定 に移動します。
- 遅延読み込みプレーヤー をオフに切り替えます。
- 保存します。
技術的な仕組み
- プラグインは
IntersectionObserverを使用して、プレーヤーがビューにスクロールされたタイミングを検出します - 交差時に、必要なJSとCSSを動的に読み込みます
- 読み込まれたスクリプトは、セッションの残りの間ブラウザにキャッシュされます
IntersectionObserverに対応していない非常に古いブラウザでは、ページ読み込み時にスクリプトを読み込むフォールバックが使用されます。
既知のエッジケース
非表示要素内のプレーヤー
プレーヤーが display: none のセクション（折りたたまれたアコーディオンなど）の中にある場合、セクションが表示されるまで遅延読み込みはトリガーされません。表示されていないものを読み込む必要はないため、通常はこれが望ましい動作です。
オーディオの自動再生
プレーヤーに自動再生を設定して遅延読み込みにした場合、訪問者がスクロールするまで再生されません。自動再生はプレーヤーが読み込まれると同時に開始されます。