Lazy Load(画像の非同期読み込みや遅延読み込み)

2023年10月21日

画像はWEBサイトの見た目やユーザー体験に大きく影響しますが、同時にサイトの速度やSEOにも重要な要素です。

画像が多くて重いサイトでは、ページの読み込み時間が長くなり、ユーザーの離脱率やバウンス率が高くなります。

また、Googleなどの検索エンジンは、サイトの速度をランキングの要因の一つとして評価しています。

SEO影響度	導入し易さ	重要度
★★★☆☆	★☆☆☆☆	★★★☆☆

そこで、画像の非同期読み込みや遅延読み込み(Lazy load)という技術が注目されています。この記事では、Lazy loadとは何か、WORDPRESSでの設定方法とSEOへの効果について解説します。

記載情報の責任者

カトさん@PV1億のSEOプロ

SEO専門家歴15年
法人サイトSEO 200件以上
個人サイトSEO 50件以上
月間1億PVサイトSEO9年担当
SEOブログで月収400万円

某渋谷サイバー系SEO会社でSEOコンサル→某外資グローバル企業でSEOマネージャー→独立、現在はSEOコンサルと実店舗ビジネスで事業展開中

カトさんについて＞

Lazy Load(画像の非同期読み込みや遅延読み込み)とは

Lazy loadとは、WEBサイトのパフォーマンスやSEOを改善するために、画像を必要に応じて読み込む技術です。

通常、WEBサイトでは、ページを開くときにページに含まれる全ての画像を一度にダウンロードします。しかし、これは以下のような問題を引き起こします。

ページの読み込み時間が長くなります。
ユーザーが見ることのない画像にもネットワーク帯域やサーバー負荷がかかります。
ユーザーのデータ通信量が増えます。
検索エンジンがページの内容を正しく評価できない可能性があります。

Lazy loadを使うと、これらの問題を解決できます。Lazy loadでは、画像はページ全体の読み込みとは別に、非同期的に読み込まれます。非同期的に読み込むとは、画像のダウンロードがページの表示や操作に影響しないようにすることです。Lazy loadでは、非同期的に読み込むタイミングを以下のように設定できます。

非同期読み込み：ページを開くときに、HTMLやCSSなどのコードだけをダウンロードし、画像はコードよりも後からダウンロードする。
遅延読み込み：画像がブラウザの表示領域（ビューポート）に入る直前にダウンロードする。

Lazy loadのメリット

Lazy loadを使うと、以下のようなメリットがあります。

ページの読み込み時間が短くなります。
ユーザーが見ることのある画像だけにネットワーク帯域やサーバー負荷がかかります。
ユーザーのデータ通信量が減ります。
検索エンジンがページの内容を正しく評価できる可能性が高まります。

Lazy LoadのSEOへのメリット

Lazy loadを使うと、サイトの速度が改善されるだけでなく、ユーザー体験や検索エンジンの評価も向上することができます。Lazy loadのSEOへのメリットを3つ紹介します。

サイト速度が改善する
ユーザー体験が改善する
検索エンジンからの評価が向上する

サイト速度改善のメリット

サイト速度は、ユーザーがサイトに滞在する時間やコンバージョン率に影響します。サイト速度が遅いと、ユーザーはイライラして離脱しやすくなります。

また、サイト速度はGoogleなどの検索エンジンがランキングを決める要因の一つです。サイト速度が早いと、検索エンジンに好まれて上位に表示されやすくなります。

Lazy loadを使うと、画像のダウンロード量や時間が減り、サイト速度が改善されます。

ユーザー体験改善のメリット

ユーザー体験は、ユーザーがサイトでどのように感じるかやどのように行動するかに影響します。ユーザー体験が良いと、ユーザーはサイトに興味を持ち、信頼感や満足感を得ます。

また、ユーザー体験は検索エンジンがランキングを決める要因の一つです。ユーザー体験が良いと、検索エンジンに好まれて上位に表示されやすくなります。

Lazy loadを使うと、画像が必要なときに読み込まれるため、ユーザーはスムーズにページを閲覧できます。

検索エンジン評価向上のメリット

検索エンジン評価は、サイトがどれだけ検索エンジンに適しているかやどれだけ価値があるかに影響します。検索エンジン評価が高いと、検索エンジンに好まれて上位に表示されやすくなります。

また、検索エンジン評価はユーザーにも信頼感や信用感を与えます。Lazy loadを使うと、サイト速度やユーザー体験が改善されるため、検索エンジン評価も向上します。

Lazy LoadのSEOへのデメリット

Lazy loadを使うと、サイトの速度やユーザー体験や検索エンジンの評価が向上することができますが、一方で実装のやり方次第でデメリットも発生します。Lazy loadのSEOへのデメリットを3つ紹介します。

画像SEOでの評価が低下する
検索クローラーが読み取れない
検索エンジンからの評価が低下する

画像SEOでの評価低下のデメリット

画像SEOとは、画像を検索エンジンに認識させて、画像検索で上位に表示させることです。画像SEOをするには、画像に適切なファイル名やalt属性やtitle属性などを付ける必要があります。

しかし、Lazy loadを使うと、画像が読み込まれる前に検索エンジンがページをクロールする可能性があります。その場合、検索エンジンは画像を認識できず、画像SEOでの評価が低下する可能性があります。

検索クローラーが読み取れないコンテンツのデメリット

検索クローラーとは、検索エンジンがページの内容を読み取るために使うプログラムです。検索クローラーは、ページのコードやテキストや画像などを解析して、ページのトピックやキーワードや品質などを判断します。

しかし、Lazy loadを使うと、ページに含まれる画像やテキストや動画などが非同期的に読み込まれるため、検索クローラーが正しく読み取れない可能性があります。

その場合、検索クローラーはページの内容を正確に理解できず、検索エンジン評価に影響する可能性があります。

検索エンジン評価低下のデメリット

Lazy loadを使うと、上記のように画像SEOや検索クローラーに影響する可能性があります。その場合、検索エンジン評価も低下する可能性があります。

以上がLazy loadのSEOへのデメリットです。次の章では、Lazy loadをSEO的に最適化するための実装方法を紹介します。

Lazy loadの設定方法

Lazy loadをWORDPRESSで実現するには、主に次の3つです。それぞれの方法のメリットやデメリット、手順を紹介します。

WordPressプラグインを利用する
JavaScriptライブラリを利用する
HTML属性を利用する

プラグインを利用する方法

プラグインを利用する方法は、簡単にLazy loadを設定できるというメリットがあります。しかし、プラグインによっては互換性や安定性の問題があるかもしれません。また、プラグインの数が多くなるとサイトの速度に影響する可能性もあります。

WordPressプラグインを利用する場合は、EWWW Image OptimizerやAutoptimizeなどがおすすめです。これらのプラグインは、画像の遅延読み込みだけでなく、画像の圧縮や最適化も行ってくれます。

プラグインを利用する場合は、以下の手順で行います。

管理画面のメニューから「プラグイン」をクリックし、「新規追加」をクリックします。
検索窓に「EWWW Image Optimizer」や「Autoptimize」と入力します
選んだプラグインの「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックします。
管理画面のメニューから「設定」や「ツール」などにあるプラグインの設定画面を開きます。
プラグインによって設定項目は異なりますが、基本的には画像や動画などの遅延読み込みを有効化し、必要に応じて除外したい要素や効果などを指定します。
設定が完了したら「保存」や「更新」などのボタンをクリックします。

HTML属性を利用する方法

HTML属性を利用する場合は、decoding=”async”やloading=”lazy”などがあります。これらの属性は、imgタグに直接記述することで、画像のデコードや読み込みを非同期化または遅延化することができます。

ただし、これらの属性はまだすべてのブラウザでサポートされていないため、互換性に注意する必要があります。

コードを利用する方法

コードを利用する方法は、プラグインに依存しないというメリットがあります。しかし、コードの編集には技術的な知識やスキルが必要です。また、コードに誤りがあるとサイトが正常に表示されなくなる可能性もあります。コードを利用する場合は、以下の手順で行います。

管理画面のメニューから「外観」をクリックし、「テーマエディター」をクリックします。
「テーマファイル」の中から「functions.php」というファイルを選びます。
ファイルの最後に以下のコードを追加します。

```php
// Lazy load images
function add_lazyload($content) {
    $content = preg_replace('/<img(.*?)src=/i', '<img$1src="" data-src=', $content);
    $content = preg_replace('/<img(.*?)srcset=/i', '<img$1srcset="" data-srcset=', $content);
    return $content;
}
add_filter('the_content', 'add_lazyload');

// Lazy load iframes
function add_lazyload_iframe($content) {
    $content = preg_replace('/<iframe(.*?)src=/i', '<iframe$1src="" data-src=', $content);
    return $content;
}
add_filter('the_content', 'add_lazyload_iframe');

「ファイルを更新」ボタンをクリックします。
このコードは、画像やiframeにloading=”lazy”属性ではなくdata-srcやdata-srcset属性を付与します。これにより、ブラウザが標準的なLazy loadに対応していなくても遅延読み込みができます。しかし、これだけでは画像やiframeが表示されません。JavaScriptでdata-srcやdata-srcset属性の値をsrcやsrcset属性に置き換える必要があります。
そのためには、以下のJavaScriptコードをサイトに追加します。このコードは、「LazyLoad」というライブラリを利用しています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.5.0/lazyload.min.js"></script>
<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: "img[data-src],iframe[data-src]"
});
</script>

このJavaScriptコードをサイトに追加する方法はいくつかありますが、例えば以下のようにします。

管理画面のメニューから「外観」をクリックし、「テーマエディター」をクリックします。
「テーマファイル」の中から「footer.php」というファイルを選びます。
ファイルの最後にある</body>タグの直前に上記のJavaScriptコードを貼り付けます。
「ファイルを更新」ボタンをクリックします。

Lazy loadのSEO的ベストプラクティスな実装方法とは

Lazy loadを使うと、サイトの速度やユーザー体験や検索エンジンの評価が向上することができますが、一方でデメリットもあります。そこで、Lazy loadを使っても画像やページ全体が検索エンジンにインデックスされるようにする実装方法を紹介します。

Lazy loadを使っても画像がインデックスされる実装方法

Lazy loadを使っても画像が検索エンジンにインデックスされるようにするには、以下の2つの方法があります。 – loading=”lazy”属性を使う方法 – noscriptタグを使う方法 loading=”lazy”属性を使う方法は、HTML5で追加された属性で、ブラウザが標準的にLazy loadに対応している場合に有効です。

この属性を画像やiframeに付与すると、ブラウザが自動的に遅延読み込みを行います。この場合、検索エンジンはsrcやsrcset属性の値を読み取ってインデックスできます。loading=”lazy”属性を使う場合は、以下のようにします。

<img src="image.jpg" loading="lazy" alt="image"> 

<iframe src="video.mp4" loading="lazy"></iframe>

noscriptタグを使う方法は、JavaScriptが無効化された場合やブラウザがLazy loadに対応していない場合に有効です。このタグは、JavaScriptが動作しない場合に表示されるコンテンツを指定できます。

このタグの中に画像やiframeを入れると、検索エンジンはその中のコンテンツを読み取ってインデックスできます。noscriptタグを使う場合は、以下のようにします。

<img src="" data-src="image.jpg" alt="image">
<noscript>
  <img src="image.jpg" alt="image">
</noscript>
<iframe src="" data-src="video.mp4"></iframe>
<noscript>
  <iframe src="video.mp4"></iframe>
</noscript>

Lazy loadを使ってもページ全体がインデックスされる実装方法

Lazy loadを使ってもページ全体が検索エンジンにインデックスされるようにするには、以下の2つの方法があります。

ページネーションを使う方法
スクロールイベントを使わない方法

ページネーションを使う方法は、長い記事やリストなどを複数のページに分割することです。これにより、各ページが個別に検索エンジンにインデックスされます。また、ユーザーも必要なページに素早くアクセスできます。ページネーションを使う場合は、以下のようにします。

各ページに固有のURLやタイトルやメタデータなどを付けます。
各ページの先頭や末尾に前のページや次のページへのリンクやナビゲーションメニューなどを設置します。
rel=”next”やrel=”prev”などの属性をリンクに付与して、検索エンジンにページ間の関係性を伝えます。
rel=”canonical”属性を使って、重複するコンテンツがある場合に正規版のURLを指定します。

スクロールイベントを使わない方法は、Lazy loadを実現するためにスクロールイベントを使わないことです。スクロールイベントとは、ユーザーがページをスクロールすると発生するイベントです。Lazy loadの一般的な方法は、スクロールイベントを監視して、画像やテキストや動画などが画面に表示される直前に読み込むことです。

しかし、この方法は検索エンジンにとって不都合です。なぜなら、検索エンジンはページをスクロールしないからです。そのため、検索エンジンはスクロールイベントによって読み込まれるコンテンツをインデックスできません。スクロールイベントを使わない方法は、Intersection Observer APIという機能を使うことです。

この機能は、要素が画面に表示されるかどうかを監視して、適切なタイミングでコールバック関数を実行できます。この場合、検索エンジンはIntersection Observer APIによって読み込まれるコンテンツをインデックスできます。スクロールイベントを使わない方法は、以下のようにします。

Intersection Observer APIをサポートしているブラウザかどうかを判定します。
サポートしている場合は、Intersection Observer APIを使って画像やテキストや動画などの要素を監視します。
サポートしていない場合は、フォールバックとして通常の読み込み方法を使います。
監視している要素が画面に表示されたら、コールバック関数でdata-srcやdata-srcset属性の値をsrcやsrcset属性に置き換えます。

まとめ

この記事では、Lazy loadとは何か、WORDPRESSでの設定方法とSEOへの効果について解説。

Lazy loadをWORDPRESSで実現するには、プラグインやコードを利用する方法があります。それぞれの方法のメリットやデメリットや手順を紹介しました。

Lazy loadは、SEOに興味が高いものの、あくまでSEOの初心者である方にとっても有用な技術です。この記事が、Lazy loadの理解や設定や最適化に役立てば幸いです。