レイジーロードとは?遅延読み込みの設定・確認方法を解説のアイキャッチ画像

SEO

更新日: 2024/5/4

レイジーロードとは?遅延読み込みの設定・確認方法を解説

character_balloon

ブルーちゃん、SEOの勉強をしていたらLazy Load(レイジーロード)という言葉が出てきたの。

character_balloon

これってどういう意味かしら?

それは画像を遅延読み込みさせるための処理のことだよ~。

character_balloon

ユーザビリティに影響を与えるから、SEOにも重要なポイントなんだ。

character_balloon
character_balloon

そうなのね!もっと詳しく教えてもらえるかしら?

もちろん~。使い方や確認方法も解説するね~。

character_balloon

Lazy Load(レイジーロード)とは?

レイジーロードとは?遅延読み込みの設定・確認方法を解説の画像_2枚目
character_balloon

Lazy Loadっていうのは、「画像を遅延読み込みさせるための処理」を指すよ。

ええと、遅延読み込みって何かしら?

character_balloon
character_balloon

遅延読み込みは、「表示されている画面にある画像だけを読み込むこと」

character_balloon

遅延読み込みをしないと、見えていない部分も一斉に画像を読み込むことになるんだ。

見えていないのに読み込むなんて、なんだかもったいないわね。

character_balloon
character_balloon

でしょ~。効率的に画像表示をするために活躍してくれるのが遅延読み込みってわけ。

それで登場するのがLazy Loadなのね!

character_balloon

Lazy Load(レイジーロード)はどうやって設定するの?使い方を紹介!

character_balloon

Lazy Loadの概要はわかったかな?

ええ!早速使ってみたいんだけど、どうやればいいのかしら?

character_balloon
character_balloon

主に3つの方法があるよ~。

character_balloon

使っているブラウザやソフトウェアに合わせて、自分に合ったものを選んでみてね。

Lazy Loadの設定方法

1.JavaScriptのライブラリを使う


2.loading="lazy"を挿入する


3.WordPressのプラグインを使う

Lazy Loadの設定方法1.JavaScriptのライブラリを使う

character_balloon

昔から一般的に使われていたのが、JavaScriptのライブラリを使う方法だよ。

character_balloon

まずはGitHubというソフトウェアのプラットフォームにコードが公開されているから、そのファイルをダウンロードしよう。

character_balloon

そして、「scriptタグ→imgタグ→lazyload()関数」の順に設定・記述していけばOK!

最後の関数はどこに書くの?

character_balloon
character_balloon

「lazyload()関数」はbodyの最後に記述するといいよ~。

Lazy Loadの設定方法2.「loading="lazy"」を挿入する

JavaScriptって難しいわね……。

character_balloon
character_balloon

そんなピンクちゃんに朗報だよ。

character_balloon

2019年にGoogle Chromeがアップデートされて、Lazy Loadが標準装備されたんだ。

character_balloon

だから今はimgタグに「loading="lazy"」を加えればいいだけで遅延読み込みが設定できるよ。

それならそうと早く言ってちょうだい!

character_balloon
character_balloon

ごめんごめん。さらに主要なブラウザでも対応済み(IE、Opera Miniは非対応、Firefox for Androidは一部対応)だから、安心して使えるね。

Lazy Loadの設定方法3.WordPressのプラグインを使う

character_balloon

WordPressを使っているなら、プラグインを利用するのがおすすめだよ。

character_balloon

さっきはimgタグに記述が必要だったけど、プラグインを使えば「loading=”lazy”」が自動的に挿入されるようになるんだ。

とっても便利な機能ね。

character_balloon
character_balloon

プラグインの中でも、「Lazy Load–Optimize Images」は“使いやすい”“動画にも適応できる”と評判が良いよ~。

Lazy Load(レイジーロード)をちゃんと設定できている?確認方法の紹介!

Lazy Load、設定してみたわよ!

character_balloon
character_balloon

さすがピンクちゃん、仕事が早い!

でもこれで合っているのか心配だわ……。

character_balloon
character_balloon

設定できているか確認する方法があるから、今から教えるね。

Lazy Loadの確認方法(※Chrome)

1.デベロッパーツールを開き、「Network」タブに切り替える


2.該当ページをリロードし、スクロールさせる


3.読み込まれた画像が増加すればOK

character_balloon

デベロッパーツールはF12キーを押すと出てくるよ~。

character_balloon

注意してほしいのは、サイト自体が重たいとそもそも画像の表示が遅いということ。

つまり、どういうことなの?

character_balloon
character_balloon

Lazy Loadができているから遅いのか、サイトが重いから遅いのかが判別しにくいんだ。

character_balloon

表示されてすぐにスクロールしないで、少し待ってからスクロールしてみるのがおすすめだよ~。

Lazy Load(レイジーロード)のメリットとデメリットは?

設定は済んだけど、もう少し具体的にLazy Loadの利点を知りたいわ。

character_balloon
character_balloon

おっけ~。じゃあ、最後にLazy Loadのメリットとデメリットを説明するよ。

やっぱりデメリットもあるのね……。

character_balloon
character_balloon

ある程度対策可能だからそんなに落ち込まなくても大丈夫だよ。

character_balloon

Lazy Loadのメリットとデメリットは次の通りだよ~。

Lazy Loadのメリット・デメリット

<メリット>


1.表示速度が上がり、データ容量が節約できる


2.SEO対策に効果がある


<デメリット>


1.画質が悪くなったり、ページがずれたりする可能性がある


2.クローラーが画像を見落とす可能性がある

Lazy Loadのメリット1. 表示速度が上がり、データ容量が節約できる

レイジーロードとは?遅延読み込みの設定・確認方法を解説の画像_16枚目
character_balloon

遅延読み込みをすれば、今見えている画面にある画像を読み込むだけでいいから、表示速度が上がるんだ。

表示速度が上がればユーザーがすぐに画像を見られるから、ストレスを感じにくくなりそうね!

character_balloon
character_balloon

その通り!つまり、ユーザビリティ向上に効果があるということだね。

character_balloon

画像をいっぱい載せたいサイトだと、より恩恵を受けられると思うよ~。

character_balloon

画面外の画像を読み込まないから、その分のデータ転送容量を節約することができるんだ。

私の契約プランだとWi-Fiがないところではあまりデータを使えないから、最小限の読み込みでいいのはとってもありがたいわ!

character_balloon
character_balloon

運営者もサーバーの運営コストを下げることができるんだよ~。

運営者・ユーザーどちらにとっても嬉しい効果なのね!

character_balloon

Lazy Loadのメリット2.SEO対策に効果がある

レイジーロードとは?遅延読み込みの設定・確認方法を解説の画像_18枚目
character_balloon

ピンクちゃんが最初に言っていた通り、SEO対策にもある程度効果があるよ。

character_balloon

というのも、2018年からGoogleはWebページの読み込み速度をランキングの対象にしたんだ。

ということは、表示速度が速ければ速いほど、検索結果の上位に載りやすくなるってこと……?

character_balloon
character_balloon

残念ながら、この対象は「ユーザーがかなり遅いと感じるようなページのみ」(参照:Google 検索セントラル ブログ)で、少しくらい遅くてもサイトの質が良ければ上位になる可能性があると明言されているよ。

なんですって……!?

character_balloon
character_balloon

まったく関係ないわけではないし、速い方が評価される傾向にはあるから、ちゃんと意識しておこうね。

Lazy Loadのデメリット1.低画質表示、ページがずれる可能性がある

レイジーロードとは?遅延読み込みの設定・確認方法を解説の画像_20枚目
character_balloon

遅延読み込みはスクロールに合わせて読み込むことになるけど、通信環境が悪かったり、端末の調子が悪かったりすると、スクロールと読み込みのタイミングが合わなくなることがあるんだ~。

サイトを見ているとたまに画像がダミーのままだったり画像が荒かったりすることがあるんだけど、その影響だったかもしれないのね。

character_balloon
character_balloon

うん。でも、画像を最初から圧縮しておけば読み込みにかかる労力が抑えられるから、ある程度防止することができるよ。

ページのずれっていうのは?

character_balloon
character_balloon

読み込みが遅れて画面内でダミーから本来の画像に変わる場合、それぞれの画像サイズに差があると読んでいた文章が下にずれてしまって読みにくくなってしまうことがあるんだ。

character_balloon

それならまだしも、何かしらをクリックしようとした瞬間にずれてしまうと、意思に反した選択をしてしまうことにもなりかねないよね。

購入ボタンとか、取り返しのつかないものだったら怖いわね……。

character_balloon
character_balloon

でも、ダミー画像と本来の画像を同じサイズにするためのコード入力をしておけば改善できるから安心してね。

character_balloon

HTMLのimgタグなら「width=”数字“」と「height=”数字“」を追加するといいよ~。

レイジーロードとは?遅延読み込みの設定・確認方法を解説の画像_21枚目

Lazy Loadのデメリット3. クローラーが画像を見落とす可能性がある

character_balloon

クローラーは人と違ってスクロールをしないから、ページ内を巡回しても画像を認識できない可能性があるんだ。

character_balloon

そうなると正しい情報を収集してもらえないから、インデックスにも影響が出てしまうかも

クローラーはSEOにも影響があるから、これは困るわね……。

character_balloon
character_balloon

でも、Googleはこれに対する改善策を提示しているんだ。

・画像や iframe にネイティブ遅延読み込みを使用する ・IntersectionObserver API とポリフィルを使用する ・ビューポートに表示されるデータのみを読み込む JavaScript ライブラリを使用する 参照:https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading?hl=ja

あら?ネイティブ遅延読み込みってlayzy=loadingのことじゃない?

character_balloon
character_balloon

そう。だから、正しく設定できていれば気に病む必要はないよ。

まとめ

character_balloon

Lazy Load(レイジーロード)をまとめると、こんな感じかな~。

まとめ

◆Lazy Loadとは、画像を遅延読み込みさせるための処理


◆Java scriptだけでなく、画像を表示するHTMLに直接挿入することも可能


◆Lazy Loadを設定すると、ユーザビリティの向上やデータ転送量節約に役立つ!

Lazy Loadはユーザーが快適にサイトを使うのに大事な操作なのね!

character_balloon

今日は教えてくれてありがとう。

character_balloon
character_balloon

いえいえ~。またいつでも聞いてよ。

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧
最新の記事一覧