ホームページの画像遅延読み込みの重要性とワードプレスでの実装方法を詳しく解説！

この記事では、

• 画像の遅延読み込みとは何か？
• どういう理由で重要になっているのか？
• ワードプレスで実装するためのプラグインでの設定方法について

についてご紹介していきます。

この記事を読んで、画像の遅延読み込みの導入し、ユーザー満足度の高いサイトを構築しましょう。

画像の遅延読み込みとは？

画像の遅延読み込み（あるいは遅延ロードとも）とは、ホームページのページ表示時において、文字などの容量の小さいものをあらかじめ読み込み、その後に画像を読み込むことで、閲覧者のページ表示時の待ち時間を少なくさせる仕組みです。

何も設定をしないままだとブラウザは、記事内の文字も画像も一緒に上から順に読み込もうとします。
しかし、遅延読み込みを設定することで、ブラウザは容量の少ない文字を先に読み込んでくれるので、ネットの速度が遅い環境からアクセスしてきた閲覧者にとっても、取り急ぎ必要な情報が素早く表示されるというわけです。

画像の遅延読み込みを実装するべき理由

大手の通販サイトなどでも画像の遅延読み込みが実装されていることが多く、今や画像の遅延読み込みはホームページの公開において搭載すべきものの１つとなっています。

その理由は以下の２つです。

• サイトの読み込み速度がアップしユーザーの満足度が上がる
• Googleのツールでも画像遅延読み込みすることを推奨している

順に解説します。

サイトの読み込み速度がアップしユーザーの満足度が上がる

先ほどの内容と重複しますが、画像遅延読み込みを行うメリットとして、サイトの読み込み速度がアップすることが挙げられます。
またページ下部の画像は、その場所までスクロールをしないと読み込まれないためネットワーク的にも無駄がなく、サーバーの負荷の低減にもなります。

ユーザーは画像の読み込みが遅くなることから感じるストレスがなくなり、スムーズにサイトを観覧することができるので、滞在時間の上昇やページ途中での離脱率の低下を期待できます。
これらの数値をアップさせれば、SEOの評価がアップし、検索順位がアップすることが期待できます。

画像の遅延読み込みはユーザーにとっても、サイトの制作側にとっても大きなメリットがあるものなのです。

GoogleのPage Speed Insightでも遅延読み込みにより点数がアップする

Googleが提供している、ウェブページの表示速度をスコア化し表示するウェブツールとしてPage Speed Insightがあります。
このツールでスコアの点数をアップさせるための方法として、画像の遅延読み込みをおこなうことが推奨されています。（といいますか画像遅延読み込みをしていないと、その点が減点され、遅延読み込みをするようにメッセージが出されます）

なお、画像については本記事の遅延読み込みの他にも、画像を圧縮することでも読み込み速度をアップさせ、Page Speed Insightの点数もアップさせることができます。
画像については遅延読み込みと圧縮の両方をおこなうのがオススメです。
画像圧縮については、内容とワードプレスでプラグインを使って行う方法を以下の記事で解説していますので、ぜひ参照してください。

このスコア＝SEOの評価というわけではありませんが、SEOは今やほぼGoogleの評価次第という現状です。
検索エンジンの１つしてGoogleの次にメジャーなのはYahoo!ですが、Yahoo!の検索結果もGoogleのデータを使ってますので、Googleの評価を上げることでYahoo!の評価も上がります。

したがって、Googleが公式に提供しているツールの点数を高くすることは、ユーザーの満足度やSEO評価を高くするために重要なことの１つであると言えます。

WordPressのデフォルトの機能ではカバーしきれないことも

実は、今のバージョンのWordPressにはデフォルトで画像を遅延読み込みする機能が搭載されています。特別な設定などはなく、普通に画像をアップしてページに公開すれば遅延読み込みとなるのです。

さすがWordPress！・・・・と言いたいところなのですが、WordPressの機能の画像遅延読み込みの手法は残念ながら、一部対応していないブラウザが存在する手法なのです。

ですので、現状は確実に画像遅延読み込みをおこない、閲覧者にページ表示時の待ち時間を減らしてSEOの効果を上げるためにも、プラグインを導入して画像遅延読み込みをおこなうようにした方がいいでしょう。

補足：画像以外の遅延読み込みについて

ここまで画像の遅延読み込みと表現してきましたが、実は画像以外にも以下のようなものを埋め込んでいる場合はそれらを遅延読み込みすることでページの表示速度は劇的に改善されます。

• Googleマップ
• Twitterのツイート
• YouTubeの動画

これらはHTML（ホームページの表示内容を書くためのプログラミング言語）のiframeという機能で表示をしているのですが、iframeの機能もデータ通信量が増えますので、ページを開く際の速度が低下する要因になります。

YouTubeの動画をページ内に複数入れていて、遅延読み込みをしていないページだと表示に時間が非常にかかり、Page Speed Insightの点数も非常に下がってしまいます・・・

今回主にご紹介する３つの遅延読み込みのプラグインは、設定することでこれらのiframeも遅延読み込みしてくれるようになりますので、これらものをホームページ内に入れている場合は、そちらの設定もおこなっておくことをおすすめします。

遅延読み込みを実装するためのワードプレスのプラグインは？

それではワードプレスのホームページで遅延読み込みを実装するためのワードプレスのプラグインをご紹介していきます。
ワードプレスのプラグインを導入する以外でも、JavaScriptのプログラムを組むことで遅延読み込みを実装はできますが、難易度がかなり高くなります。
ですので、現実的にはプラグインを導入して実装するのがオススメです。

簡単に設定可能な3つのプラグインと設定方法

それではWordPress初心者でも簡単に設定ができる、遅延読み込み実装のためのプラグイン3つと、その設定方法をそれぞれ解説していきます。

これからご紹介していくプラグインは以下の３つです。それぞれの特徴を表にまとめます。

それでは、それぞれのプラグインを詳しく解説していきます。

a3 Lazy Loadの設定方法

まずは、a3 Lazy Loadのインストール方法や、設定方法をご紹介していきます。
a3 Lazy Loadはダウンロード数が多く、ネット上の情報も豊富で利用しやすいプラグインと言えるでしょう。

【手順1】プラグインをインストールする

1. 「ダッシュボード」をクリックする
2. 「ダッシュボード」の中から「プラグイン」をクリック
3. 「プラグイン」の中から「新規追加」をクリックする

4.「a3 Lazy Load」で検索
5. 「今すぐインストール」をクリック
6. 「有効化」をクリックする

【手順2】希望に合わせて設定をチューニングする

a3 Lazy Loadはこのような設定画面から、ONまたはOFFをボタンで選択することにより、詳細を設定できます。

1. 管理画面から「プラグイン」をクリック
2. 「a3 Lazy Load」の「setting」をクリック

設定画面に入ると上の画像のように様々な設定項目が出てきますが、主に利用したいものだけをピックアップしてご紹介します。

基本的に必ず必要な設定はON、そうでないものはOFFにデフォルトで設定されています。

以下、設定画面の各項目について解説します。

a3 Lazy Loadを利用する際、特定の画像や動画のみ遅延読み込みさせない設定にする場合は、CSSを書き込む必要があります。

最後に、save changesを忘れずにクリックしてください。

Lazy Loadの設定方法

次に、Lazy Loadのインストール方法や設定方法をご紹介していきます。
Lazy Loadは３つのチェックボックスのみで詳細設定が完了するので、手軽に利用できるプラグインを探している人におすすめです。

【手順1】プラグインをインストールする

1. 「ダッシュボード」をクリックする
2. 「ダッシュボード」の中から「プラグイン」をクリック
3. 「プラグイン」の中から「新規追加」をクリックする。

4. 「Lazy Load」で検索
5. 「今すぐインストール」をクリック
6. 「有効化」をクリックする

【手順2】希望に合わせて設定をチューニングする

1. 管理画面から「プラグイン」をクリック
2. 「Lazy Load」の「setting」をクリック
3. 3つのボタンをクリックし設定をカスタマイズする

３つのボタンの設定内容は以下のようなものです。
デフォルトでは全ての項目にチェックが入っていないので、ご自身で設定する必要があります。

最後に、save changesを忘れずにクリックしてください。

Lazy Loaderの設定方法

次にLazy Loaderのインストール方法や、設定方法をご紹介していきます。
Lazy Loaderは画像を読み込んでいる際に、アニメーションを表示させるように設定することができます。

【手順1】プラグインをインストールする

1. 「ダッシュボード」をクリックする
2. 「ダッシュボード」の中から「プラグイン」をクリック
3. 「プラグイン」の中から「新規追加」をクリックする。

4. 「Lazy Loader」で検索
5. 「今すぐインストール」をクリック
6. 「有効化」をクリックする

【手順2】希望に合わせて設定をチューニングする

Lazy Loaderをインストールし、有効化したら自動で全ての画像や動画が、遅延読み込みされるようになります。
1部の画像や動画のみ遅延読み込みさせたい場合、設定で変更することが可能です。

1. 管理画面から「プラグイン」をクリック
2. 「Lazy Loader」の「setting」をクリック

様々な設定項目がありますが、HTMLなどの知識がなくても簡単に利用できるものをピックアップしてご紹介します。

最後に、変更を保存を忘れずにクリックしてください。

3つのプラグインの比較

簡単に遅延読み込みが実装できる3つのプラグインを比較し、おすすめするのはa3 Lazy Loadまたは、Lazy Loadです。

その理由としては

・ダウンロード数が多い
・こまめに更新が行われており最新バージョンのWordPressにも対応している

という点が挙げられます。

その他の遅延読み込みが実装できるプラグイン

ここまででご紹介した3つ以外にも、遅延読み込みを実装できるプラグインは存在します。

などが例として挙げられます。

利用しているテーマによっては、プラグインと相性が悪いこともあります。
プラグインを導入したことで画像が読み込まれない、ページの表示に乱れがでたなどの口コミも見受けられるので、事前にリサーチをして利用を検討してください。
不具合が起こった場合などは、別のプラグインの利用も検討してみてください。

数年単位などと、長い期間更新されていないプラグインは導入をした際、不具合が起こる可能性が高いので基本的に使用しない方が良いです。
また、テーマに画像遅延読み込みの機能が搭載されており、それをONにしてる状態でプラグインを導入するとプログラムが競合し、不具合が起こることがあります。

プラグインが問題なくきちんと動くか、きちんと確認した上で利用するようにしましょう。

まとめ

画像などの遅延読み込みを実装することで、ユーザー体験の満足度が高まることが期待されます。
それにより、サイト内での行動の活発化や、それに伴ったSEO評価のアップも期待できます。

今回ご紹介したように、ワードプレスではプラグインを使用することで簡単に画像遅延読み込みの設定が可能です。

遅延読み込みと一緒に以下の記事を参考に画像圧縮もおこなうのがオススメです。

ワードプレスでホームページを作成する際は、ぜひ今回ご紹介したプラグインを活用して、画像などの遅延読み込みを実装しておきましょう。