performance/iframe-loading · iframe の loading 属性

画面外の iframe は、スクリプト・フォント・メディアを含むサードパーティのドキュメント全体を先読みし、画面外の画像より高くつくのが普通です。loading="lazy" で遅延できます。

重大度: info · カテゴリ: performance

performance/image-loading-hint と同じく info です: ファーストビュー内の iframe は eager で正当であり、静的解析にはロード時に iframe がどこにあるか分からないため、このルールは助言に留まります。

チェック内容

loading 属性を持たない <iframe> 要素を検出します。

<iframe src="https://www.youtube.com/embed/…" title="Video"></iframe>

検出しないもの:

値が何であれリテラルの loading 属性。loading="lazy" でも loading="eager" でも、作者が選択したものです。
式による loading={expr}。描画される値は静的に判定できません。
スプレッド属性。loading を供給しうるためです。

loading 属性のない iframe は eager にロードされます。画面外の iframe（埋め込み動画プレーヤー、地図、広告枠）は通常、スクリプト・フォント・メディアを含むサードパーティのドキュメント一式をロードするため、eager にロードするコストは画像より大きくなるのが普通です。<iframe> の loading="lazy" は何年も前からすべてのエバーグリーンブラウザでサポートされており、ビューポートが近づくまでロードを遅延します。

画像と違って iframe が LCP 要素になることはまれで、遅延ロードが Core Web Vitals を悪化させることはほぼありません。

修正方法

ロード時に画面外にありうる iframe には loading="lazy" を追加します。

<iframe src="https://www.youtube.com/embed/…" title="Video" loading="lazy"></iframe>

ファーストビュー内の iframe は eager のままにします。明示的な loading="eager" は選択を記録し、このルールも黙らせます。

export default {
  rules: {
    'performance/iframe-loading': 'off'
  }
};

performance/iframe-loading · iframe の loading 属性

チェック内容

なぜ重要か

修正方法

制限事項

モードによる違い

無効化