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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Lazy Load（レイジーロード）をまとめると、こんな感じかな～。

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