【ページの表示速度改善】遅延読み込みのやり方

Webコンサルタントの松崎です。

 

これまで「表示速度の改善はユーザーへの配慮で一番大事です」というテーマで、「画像の軽量化のやり方」や「次世代画像形式WebP・AVIFのメリットと変換方法」、「過剰なモーションの見直し（JavaScript最適化）」、そして「Webフォントの見直し」など、ホームページの表示速度を改善して、ユーザーの使いやすさをアップさせるための具体的な方法をご紹介してきました。

 

今回は表示速度改善の有効な手法「遅延読み込み（レイジーロード）」について解説します。

 

 

 

スマホを操作する女性

 

初期表示で必要ないコンテンツの読み込みを後回しにするこの技術を使えば、ページの初期表示速度を大幅にアップすることができます。ユーザーに必要なものから順に表示して、スムーズで快適なホームページになるように改善します。

遅延読み込みとは何か？

遅延読み込み（レイジーローディング）とは、ページを開いた瞬間にすべてのコンテンツを一度に読み込むのではなく、スクロールしていった時、表示が必要になった時点で読み込む技術のことです。

 

具体的には、画面に表示されていない部分（スクロールしないと見えない下の方の画像など）は、ユーザーがその部分までスクロールした時に初めて読み込むようにする方法です。これにより、初期表示時に読み込むデータ量を減らし、ページの表示速度を向上させることができます。

 

例えば、長いページがあって、そこに10枚の大きな画像が使われているとします。普通なら10枚全部を最初に読み込むので時間がかかりますが、遅延読み込みを使えば、まず画面に見える最初の2枚だけを読み込み、他の8枚は下にスクロールした時に必要に応じて読み込むといった具合です。

遅延読み込みのメリット

遅延読み込みには、いくつかの大きなメリットがあります。

初期表示速度の向上

最も大きなメリットは、ページを開いた瞬間の表示速度がかなり速くなることです。

画面に見えない部分の読み込みを後回しにするので、初期表示に必要なデータ量が減り、ユーザーが素早くコンテンツを見始められるようになります。

 

スマホの通信環境が不安定な場所では、このメリットはとても大きいです。

例えば、3G回線では5MBのデータをダウンロードするのに10秒以上かかることもありますが、遅延読み込みで初期表示を1MB程度に抑えれば、2秒程度で表示できるようになります。

ネットワーク帯域の効率的な利用

実際に見られることのないコンテンツ（ユーザーがスクロールせずに離脱するページ下部など）の読み込みを省略できるため、サーバーとユーザー間の通信量を削減できます。

 

ユーザーのデータ通信量の節約にもなりますし、サーバー側の負荷軽減にもつながります。また細かいことですが、データ量の節約になるのでありがたい配慮です。

サーバー負荷の軽減

必要なコンテンツだけを配信することで、サーバーの処理負荷やトラフィックを減らすことができます。

アクセスが多いホームページでは、この効果が積み重なって大きな負荷軽減につながります。

ユーザーのデータ通信量削減

スマホユーザーにとって、データ通信量の削減は直接的なメリットです。

データプランに制限があるユーザーや、通信速度制限がかかっているユーザーにとって、必要最小限のデータだけをダウンロードすることは重要です。

遅延読み込みに適したコンテンツ

すべてのコンテンツに遅延読み込みを適用すればいいというわけではありません。遅延読み込みに適したコンテンツは以下のようなものがそうです。

画像

ホームページの中で、最も容量が大きいのはほとんどの場合で画像です。そのため、画像は遅延読み込みの最も一般的な対象となります。

 

【遅延読み込みが適している画像】

  • 画面下部に配置された画像
  • 商品ギャラリーやフォトギャラリーの画像
  • ブログの記事中に複数使われている画像
  • カルーセル（スライダー）内の2枚目以降の画像

ECサイトの商品一覧ページでは多くの商品画像が使われることが多いため、遅延読み込みの効果が顕著に表れます。最初の画面に表示される商品だけをすぐに表示し、スクロールしながら次の商品画像を読み込んでいくことで、ユーザーにスムーズな操作環境を提供することができます。

動画

動画ファイルは画像よりもさらに重いので、遅延読み込みの効果が大きいです。特にホームページ内に複数の動画を埋め込んでいる場合は、必ず遅延読み込みを検討すべきです。

 

YouTube動画を埋め込んでいる場合も、プレビュー画像だけを表示して実際に再生ボタンを押したときに動画プレーヤーを読み込むという方法が効果的です。これにより、ユーザーが視聴する意思のない動画については、重いプレーヤーの読み込みを完全に省略できます。

アイフレーム（iframe）

SNSフィードやマップ、外部サイトのコンテンツを表示するアイフレームも、遅延読み込みするようにしましょう。

特にGoogleマップは読み込みが重いので、必要になったときだけ読み込むように設定すると効果的です。

 

FacebookやTwitterなどのSNSウィジェットも、予想以上に多くのリソースを消費します。これらは画面下部に配置されることが多いので、遅延読み込みの良い候補となります。

大きなデータテーブル

製品スペック表や価格表など、大量の行や列を持つデータテーブルも、遅延読み込みの対象となります。特に初期状態で折りたたまれているようなテーブルは、展開されたときに初めて読み込むようにすると効果的です。

遅延読み込みのやり方

それでは、実際にどのように遅延読み込みを実装すればよいのか、具体的な方法を見ていきます。

1. 画像の遅延読み込み

画像の遅延読み込みの設定は一般的で、様々なやり方があります。

 

HTML5のloading属性を使う方法（最も簡単）

最新のブラウザでは、img要素にloading="lazy"を追加するだけで、簡単に遅延読み込みを実装できます。

 

<img src="example.jpg" loading="lazy" alt="例の画像">

 

この方法は最も簡単ですが、古いブラウザでは動作しない点に注意が必要です。ただ、最近のブラウザのほとんどはサポートしているので、おそらくはこれで十分です。

 

JavaScriptライブラリを使う方法

より細かい制御や古いブラウザへの対応が必要な場合は、JavaScriptライブラリを使う方法があります。代表的なライブラリには以下のようなものがあります。

  • lazysizes
  • lozad.js
  • vanilla-lazyload

例えば、lazysizesを使った実装は以下のようになります。

 

<!--lazysizes.min.jsを読み込む -->

<script src="lazysizes.min.js"></script>

 

<!--画像に必要なクラスを追加 -->

<img src="example.jpg" class="lazyload" alt="例の画像">

 

このように、src属性の代わりにsrc属性を使い、classに「lazyload」を追加します。これにより、画像が表示領域に入ったときに自動的に読み込まれるようになります。

2. 動画の遅延読み込み

動画も画像と同様に遅延読み込みが可能です。

 

YouTube動画の遅延読み込み方法

YouTube動画の埋め込みは、遅延読み込みの効果が特に大きい対象です。以下のような方法で実装できます。

  1. まず、通常のiframe埋め込みではなく、動画IDだけを持つコンテナを用意します
  2. そのコンテナ内に、YouTubeのサムネイル画像を表示します（これは軽量です）
  3. 再生ボタンの見た目のデザインも配置します
  4. ユーザーがクリックしたときだけ、JavaScriptでiframeを生成して実際の動画プレーヤーを読み込みます

この方法の優れている点は、ユーザーが実際に動画を見たいと思うまで、重いYouTubeプレーヤーを読み込まないことです。サムネイル画像は数十KBしかないのに対し、YouTubeプレーヤーは1MB以上のデータをダウンロードするため、大きな通信量の削減になります。

 

また、複数の動画がある場合は特に効果が高く、ユーザーが興味を持った動画だけが読み込まれるので、不要なデータ通信が発生しません。ページの初期表示も大幅に速くなります。

 

CSSでプレイボタンをきれいに表示すれば、ユーザーにとっては普通の埋め込み動画と変わらない見た目になるので、使い勝手も損なわれません。

WordPressでのやり方

WordPressを使っている方も多いと思いますので、WordPressでの遅延読み込みの実装方法も紹介します。

プラグインを使う方法

WordPressでは、プラグインを使えば簡単に遅延読み込みを実装できます。人気のプラグインには以下のようなものがあります。

  • WP Rocket（有料）
  • Autoptimize
  • a3 Lazy Load
  • Lazy Load by WP Rocket（無料）

例えば、「Lazy Load by WP Rocket」をインストールして有効化するだけで、ホームページ内のすべての画像に自動的に遅延読み込みが適用されます。設定画面で細かい調整も可能です。

手動でコードを追加する方法

より細かい制御が必要な場合は、子テーマのfunctions.phpなどにコードを追加する方法もあります。

 

function add_lazy_loading_to_images( $content ) {

    return preg_replace( '/(<img[^>]+)src=/i', '$1 loading="lazy" src=', $content );

}

add_filter( 'the_content', 'add_lazy_loading_to_images' );

 

このようなコードを追加すれば、投稿内のすべての画像に自動的にloading="lazy"属性が追加されます。

遅延読み込みの注意点

遅延読み込みは効果的な技術ですが、いくつか注意すべき点もあります。

SEOへの影響

Googleは画像やコンテンツのインデックスを作成する際、遅延読み込みされたコンテンツも基本的にはクロールできますが、実装方法によっては問題が生じることがあります。特に、JavaScriptに依存した実装では、クローラーがそのコンテンツを見つけられない可能性があります。

 

【注意するポイント】

  • HTML5のloading="lazy"属性を優先して使用する
  • noscript要素内にも画像を記述する
  • 重要なコンテンツは遅延読み込みを避ける

商品画像など、検索エンジンからの流入に重要な画像は、遅延読み込みを避けるか、SEOに配慮した実装にすることが大切です。

ユーザーの使いやすさへの影響

遅延読み込みはユーザーの使いやすさを向上させる目的で行いますが、間違ったやり方をすると逆効果になることもあります。

  • スクロール時に画像が遅れて表示されて、がたつきが発生する
  • プレースホルダーがなく、空白が表示されてしまう
  • スクロールが速すぎると画像が読み込まれない

【注意するポイント】

  • 適切なプレースホルダーを用意する（ブラウザの表示幅変更防止）
  • 画像サイズ（width/height属性）を明示的に指定する
  • スクロール前に少し先の画像も先読みするよう設定する

プレースホルダーについては、グレーの背景や、画像のアウトラインだけを表示するなどの工夫ができます。こうすることで、画像読み込み時のレイアウト崩れを防ぎつつ、ユーザーにも「ここに画像が表示される」ことを伝えられます。

ファーストビューのコンテンツ

ページを開いたときに最初に表示される部分（ファーストビュー）のコンテンツには、遅延読み込みを適用すべきではありません。これらのコンテンツは可能な限り早く表示することが重要です。

 

ホームページのヒーローイメージ（メイン画像）やロゴ、メニューなどは遅延読み込みの対象外としなければなりません。

重要な指標への配慮

GoogleのCore Web Vitalsなど、表示速度に関する重要な指標への影響も考慮する必要があります。特にLargest Contentful Paint（LCP）という、ページの主要なコンテンツが表示されるまでの時間を示す指標は重要です。

 

LCPの対象となる可能性が高い大きな画像や要素には、遅延読み込みを適用せず、優先的に読み込むようにしましょう。逆に、LCP対象外の画像には積極的に遅延読み込みを適用することで、バランスを取ることができます。

ユーザーへの思いやりとしての遅延読み込み

遅延読み込みは、ユーザーの使いやすさを考えた配慮です。

 

インターネットを利用するユーザーは、様々な環境で私たちのホームページを訪れます。高速な光回線を使っている人もいれば、地下鉄の中で不安定な通信環境の中でアクセスしている人もいます。データ通信量を節約したい人や、古いスマホを使っている人もいます。

 

そんな多様なユーザーすべてに、快適なホームページ体験を提供するためには、「必要なものを、必要なときに」というアプローチが大切です。遅延読み込みはまさにその考え方を実現する技術なのです。

 

またこういった表示速度の改善を含む、ユーザーに優しい親切なWebサイトにするための取り組みを紹介している記事もありますので、是非あわせて読んでください。

効果的な遅延読み込みでユーザーの使いやすさを向上

遅延読み込みは、初期表示速度の向上、通信量の削減、サーバー負荷の軽減などの効果をもたらし、結果としてユーザーの満足度を高める効果的な技術です。

 

画像、動画、アイフレームなど、容量の大きいコンテンツを後から読み込むことで、「見たいコンテンツをすぐに見られる」という快適な閲覧体験をユーザーに提供できます。

 

実装方法も、HTMLのloading属性やJavaScriptライブラリ、WordPressプラグインなど様々な選択肢があり、ホームページの規模や目的に応じて最適な方法を選べます。

 

SEOへの影響や使いやすさなど配慮すべき点はありますが、適切に実装すれば「速さ」と「使いやすさ」の両立が可能です。表示速度の向上は、直帰率の低下、滞在時間の延長、コンバージョン率の向上など、大きなメリットが出てきます。

 

是非あなたのホームページにも、ユーザーへの思いやりとして遅延読み込みを取り入れてみてください。

それが「使いやすいホームページ」への第一歩となるはずです。

 

表示速度に関してお悩みであれば、当社のホームページを使いやすく改善する取り組みを重視したWebコンサルティングを是非ご検討ください。

ユーザーファーストの視点で、サクサク動く快適なホームページに改善するお手伝いができます。

 

初回相談は無料です。

いつでもお気軽にお問い合わせください。