【ページスピード改善】Lazy Load 使い方プラグインメリットデメリット SEO 解説

2022年4月22日
2022年3月29日
seo
google, SEO, web制作, トレンド, ノウハウ, 初心者, プラグイン, ワードプレス

【ページスピード改善】Lazy Load 使い方プラグインメリットデメリット解説

ページスピード改善につながる Lazy Load 使い方や Lazy Load プラグイン、そして、Lazy Load メリットデメリット解説をしていきます。

ページの表示速度は、UX観点でも、重要な指標です。また、SEOでも、ページの表示速度は、Googleなどの検索結果のランキングの要因となっています。そのため、ページ表示速度改善は、webサイト運営者、マーケッターにとっては、とても大切な要素です。

そして、このページの表示スピードを改善する方法の1つに、Lazy Load というJavaScriptライブラリの活用があります。Lazy Load の使い方１つで、ホームページの表示速度の高速化につながるケースもあります。

そこで、この記事では、Lazy Loadとは、何か？といったLazy Loadの基本知識から、Lazy Loadの使い方、プラグイン、メリット、デメリットなどを解説してみます。

今回この記事では、SEOの内部対策につながるLazy Loadの知っておいた方がいい点、画像の遅延読み込みによる表示速度改善のポイントなどもあわせて、ご紹介していきます。

1 Lazy Load とは
2 ページスピード調査方法 PageSpeed Insights
3 Lazy Load メリット
4 Lazy Load デメリット
5 Lazy Load 対応ブラウザ
6 Lazy Load JS 使い方
7 lazy load WordPress プラグイン
8 Lazy Load プラグインインストール方法使い方動画
9 まとめ Lazy Load 使い方画像遅延読み込みでページスピード改善へ
10 おすすめ SEO対策関連記事

Lazy Load とは

参考）
web.dev 読み込み時間の高速化
 https://web.dev/fast/#lazy-load-images-and-video

Lazy Loadとは、ホームページなどで使用するjpgや、pingなどの画像ファイルの遅延読み込みを行うJavaScriptライブラリです。

Lazy Load は、レイジーロードと呼ばれます。

Lazy Load によって、画像ファイルの読み込みを遅らせることで、ホームページ自体の表示を先行して行い、検索ユーザーや、ホームページにアクセスしてくれたユーザー、検索エンジンのクローラーなどに対して、表示を始めていることを伝え、あとから、画像を配信することで、ページの表示を速くさせる仕組みです。

ちなみに、Lazy Load を活用することで、画面自体の表示も高速化しようとすることが可能になっているため、画像を多く使うようなECサイトなどでも、ページスピードの改善ができるので、おすすめの方法となっております。

Google Chrome や Safari などの、webブラウザは、URLを読み込む際、そのURLのページにある、すべての画像を一気に読み込もうとします。

しかし、画像ファイルのファイルサイズが大きければ、ページの読み込み、そして、表示に時間がかかるようになってしまいます。

その結果、ネットワークやwebサーバ、DBサーバに負担をかけてしまう可能性があります。Lazy Loadは、こういった負荷の増大に対しても、制御が可能な技術として、注目されているJAVAスクリプトのライブラリとなっています。

Lazy Loadには、ユーザーがブラウザをスクロールしたときに、画像の読み込みをスタートさせる方法もあり、ユーザーが見ている画面範囲を見ながら、必要な画像だけを適切に表示させる技術なので、データ量、パケット量の削減にもやさしい技術となっています。

ページスピード調査方法 PageSpeed Insights

ちなみにですが、ページスピード調査方法についても、簡単に解説しておきます。基本的には、Google社の提供しているページである、PageSpeed Insightsを活用して、ページスピードを測定していきます。

PageSpeed Insights
https://pagespeed.web.dev/

ここにURLを入力するだけで、PC、スマホで見たときのホームページの表示速度を調べることができます。

無料で測定できますので、都度、利用してみてくださいね。

Lazy Load メリット

Lazy Load メリットは上述したように、

ホームページの表示速度が上がる
ユーザビリティ向上
通信データの削減
SEO 検索エンジンでの上位表示対策

といった4つがあります。

ページの表示速度が遅いことは直帰率に影響します。要するに、すぐに、ホームページから離脱してしまう可能性があるのです。

Googleの2017年の調査結果です

ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。
ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。

引用：search Consoleヘルプ
 ウェブに関する主な指標レポート
 https://support.google.com/webmasters/answer/9205520?hl=ja

表示が遅いことが、ユーザーにとって、不満になります。

また、2022年3月20日現在、ホームページの表示の高速化はSEOでもプラスになります。好影響を与える要素です。

Googleはホームページの表示速度をGoogle検索結果のランキング要素としているためです。これは、検索ユーザーにとってもメリットにつながるからですね。

Lazy Load メリットは、細かい点で言えば、スマートフォンで、webサイトを見るユーザーにとって、大きいです。

そもそも、Googleはモバイルフレンドリーを前面に出しているので、スマホでの表示速度はとても重要なのです。表示速度はそういった点でも重要な要素ですね。

Lazy Load デメリット

こんなにいい話の多い、Lazy Load ですが、導入しない理由は何かあるのかもしれませんよね！Lazy Load デメリットについて解説します。

Lazy Load デメリットは

クローラーに画像を認識してもらえない可能性
Lazy Load 実装に技術が必要
Lazy Load 導入失敗すると逆効果

という3点のデメリットがあります。

クローラーに画像を認識してもらえない可能性

Googleなどの検索エンジンのクローラーは、遅延読み込みさせた画像を認識してくれない可能性があります。

画像検索にひっかからなくなるので、デメリット要素ですね。

ただ、

ビューポート表示時にコンテンツを読み込む
無限スクロール

という2つの方法で、Googleなどの検索エンジンのクローラーから、画像を認識してもらえるようにすることも可能です。

詳細は、Google検索セントラル
 読み込みの遅いコンテンツを修正する
 https://developers.google.com/search/docs/advanced/javascript/lazy-loading

を参考にしてください。

Lazy Load 実装に技術が必要

Lazy Loadを導入するとき、jsなどの知識も必要ですが、jQuery、HTML、CSSなど、関連するスキルも必要です。

ワードプレスのプラグインなどで、実装するなら、話は別ですけどね。

Lazy Load 導入失敗すると逆効果

Lazy Load 導入に失敗すると、ホームページのレイアウトが崩れたり、画像の表示がおかしくなったりします。

逆に、画像を読み込むためのリトライ回数が増えて、ホームページの表示速度改悪になることもあるでしょう。

Lazy Load 対応ブラウザ

Lazy Load 対応ブラウザは、2022年3月1日時点では、

Chrome
Edge
Firefox

となっていて、実は、Safari は、対象外なんです。

しかし、開発者向け Safariでは、実装されているので、近い将来、Lazy Load 対応ブラウザに、Safariも名をつらねることになるでしょうね。

Lazy Load JS 使い方

Lazy Load を JS で導入する方法です。

JavaScriptライブラリ「Layzr.js」を、サイト内に組み込むことで、Lazy Loadを実現させます。

Layzr.jsの使い方具体的な方法は以下の通りです。

https://github.com/tuupola/lazyload　からダウンロード
scriptタグ設定
class=lazyload imgタグに記述
data-src属性 imgタグに記述
lazyload()関数の実行

ファイルのダウンロード後に設定するscriptタグは、github内にありますが、

などのタグを読み込んでください。

CDNで、速いスピードで、Layzr.jsを読み込めます。

lazy load WordPress プラグイン

wordpress のプラグインでも、lazy load は導入可能です。

多くのwordpressユーザー、ブロガーが使用したプラグインは以下の３つです。

Native LazyLoad
a3 Lazy Load
Lazy Loader

新規でインストールすれば、使えます。

ただし、wordpress5.5以降のバージョンを使っている場合、プラグインは避けた方がいいです。

というのも、wordpress5.5以降は、デフォルトでネイティブLazy Loadを導入しているからです。

WordPressのバージョンが、5.5以上の場合、画像タグにwidth属性とheight属性を追加していると、勝手に、loading=lazyが付きます。

要するに、自動で、Lazy Loadが使えるんです。

また、WordPressの「メディア」機能から、画像を追加した場合は、WordPressが画像サイズのwidth属性とheight属性を読み取って設定してくれるので、これも、そのまま、Lazy Loadの導入ができます。

めちゃくちゃ便利な世の中になったわけですよ。

Lazy Load プラグインインストール方法使い方動画

Lazy Load プラグイン。実は、ワードプレスのプラグインとしては、いろいろな種類があります。どれを使っていいのかわからない、、、どう設定したらいいのか、わからない。そういうケースもありますよね。そこで、Lazy Load プラグインインストール方法使い方動画をご紹介します。

この動画では、Lazy Load プラグインインストール方法使い方を解説してくれています。細かい、画面ごとのSTEPで、インストール方法から、wordpressでの設定方法まで、動画で紹介されています。動画自体も6分程度で終わるようになっていますので、結構、さくさく視聴できるので、おすすめのYoutube動画となっています。

Lazy Loadによる、wordpressサイトでのページ表示の高速化対策について、いかがでしたでしょうか？イメージ、沸きましたでしょうか？

基本的には、ある程度のスピード対策は、しっかりとしておくべきだと思っています。URLをクリックして、スマホでも、PCでも、１～２秒程度で、表示がされるようにしないと、ホームページからの離脱が発生するからです。コンテンツボリュームが増えていっても、表示速度をしっかりと担保できるようなページ制作は大切です。

Lazy Loadのプラグインといっても、ワードプレスのプラグインですので、無料で利用が可能です。企業でも、個人でも、Lazy Loadについての設定方法は、参考になる動画になっていますので、ぜひ、視聴してみてくださいね。