はじめに
Webサイトの表示速度を最適化する上で、非常に効果的でありながら見落とされがちなのが 「画面外（非表示領域）のリソース読み込み遅延」 です。
特に、ページ下部に配置されている画像や、YouTube動画の埋め込み、SNSのタイムライン、広告バナーなどの <iframe> 要素は、ページの初期ロード時に裏側で大量の通信（JavaScriptや画像データなど）を実行し、メインスレッドの動作を重くする大きな原因になります。
これらの問題を解決するために、ブラウザに標準搭載された機能が ネイティブ Lazy-loading (loading="lazy") です。本記事では、画像やiframeに対する遅延読み込みの設定方法と、SEO上の注意点について解説します。
1. ネイティブ Lazy-loading とは？
ネイティブ Lazy-loading とは、JavaScriptの外部ライブラリを使うことなく、HTML属性を1つ付与するだけで、**「ユーザーがスクロールしてその要素に近づくまで、リソースのダウンロードをブラウザが自動的に保留する」**機能です。
導入前と導入後の通信の挙動
- 導入前 (デフォルト): ページを開いた瞬間、画面下に隠れている見えない画像や動画データもすべて一斉にロードを開始します。
- 導入後 (
loading="lazy"): 初期表示領域（ファーストビュー）にあるアセットだけを読み込み、それ以外はスクロールされて画面に入る直前（数画素手前）に初めて読み込みを開始します。
2. 具体的な実装コード
① 画像に対する遅延読み込み
<img> タグに loading="lazy" 属性を追加します。
<!-- 画像の遅延読み込み -->
<img src="large-photo.jpg"
alt="詳細な写真"
width="800"
height="600"
loading="lazy">
- 重要なポイント:
遅延読み込みを行う画像には、必ず
widthとheight属性（アスペクト比） を明示します。サイズ指定がないと、画像がロードされる前に高さが「0」として計算されてしまい、ロードされた瞬間にコンテンツがガタッと下に押し下げられる「CLS（累積レイアウトシフト）」が発生し、ユーザー体験を損ねます。
② iframe（埋め込みコンテンツ）に対する遅延読み込み
YouTubeの動画埋め込みや、Googleマップ、外部の広告配信枠などの <iframe> に対しても、同様に適用できます。
<!-- YouTube埋め込みの遅延読み込み -->
<iframe src="https://www.youtube.com/embed/example"
width="560"
height="315"
loading="lazy"
title="デモ動画"
frameborder="0"
allowfullscreen>
</iframe>
- 効果: 特にYouTubeなどの外部iframeは、ロード時に大量の関連JSスクリプトを読み込むため、これらを遅延させるだけで、ページの初期表示完了（Lighthouseの「TBT：総ブロック時間」）が劇的に改善します。
3. 遅延読み込みを適用してはいけない「例外」
すべての要素に loading="lazy" を付ければ良いというわけではありません。以下のケースでは、意図的にオプトアウト（設定を避ける）する必要があります。
① ファーストビュー（初期表示領域）の画像
ページのヘッダー画像や、記事のメインアイキャッチ画像など、ユーザーがページを開いた瞬間に最初に見える位置にある画像には、絶対に loading="lazy" を設定してはいけません。
- 理由: ブラウザが遅延読み込み判定の処理（スクロール位置の計算など）を挟むため、初期表示されるべき画像の描画が通常よりワンテンポ遅れてしまい、Core Web Vitalsの重要指標である LCP（最大視覚コンテンツの表示時間） がかえって悪化します。
ファーストビュー画像の最適化
ファーストビューの画像に対しては、遅延読み込みを外した上で、HTMLの <head> 内で以下のように事前ロード（Preload）を設定するのが正しいアプローチです。
<!-- LCP画像の事前読み込み -->
<link rel="preload" as="image" href="hero-image.jpg">
まとめ
ネイティブ Lazy-loading は、わずか数文字の属性を追加するだけで、サイト全体の初期読み込みパフォーマンスを大幅に向上させることができる極めてコスパの良い改善手法です。
- 画面外にある画像や外部 iframe には、一律で
loading="lazy"を設定する - 遅延読み込みを設定する際は、CLS防止のために
width/heightを必ず書く - ファーストビューの主要画像（LCP対象）には設定せず、むしろ
preloadを活用する
これらの原則を開発テンプレートに組み込み、最初からパフォーマンスに配慮したWebサイト制作を行いましょう。