遅延ロードの「Lazy Load」の実装方法、

画像などを後からロードさせることでページ表示の改善などができる「Lazy Load」。

その「Lazy Load」の実装するためのライブラリなどをご紹介します。

Lazy Loadとは?そのメリットとデメリット

Lazy Load(レイジーロード)とは画像などを読み込む時に遅延読み込み(遅延ロード)を行うためのJavaScriptライブラリです。

Lazy Loadを使うと画像などは閲覧しているユーザーが実際に見ているページの画面外にある画像は読み込まず、画面内に入った時に読み込まれて表示されます。

Lazy Loadのメリット

ブラウザがページを表示する時に、表示されるものを1度にダウンロードしようとするため、特に画像などが多いページなどではページの読み込みに時間がかかり、アクセスしたユーザーが離脱する可能性が高まります。

Lazy Load(レイジーロード)はそれを改善するための1つの方法であり、ユーザーの離脱を下げる効果があります。

また、Googleにとっても表示速度はページ評価の要素の1つとなっているので、表示速度を上げることで、サイトの評価も高める効果があります。

Lazy Loadのデメリット

Lazy LoadのデメリットはGoogleなどの検索クローラーが画像を認識しない場合があることです。

これは検索クローラーが人と同じようにスクロールしてページをクロールするということを行わないため、画像を認識しない場合があります。

この対応方法に関してはGoogleが対策方法を掲載しています。

読み込みの遅いコンテンツを修正する | Google 検索セントラル  |  Google Developers

Lazy Loadが実装できるライブラリまとめ

ここではLazy Loadを利用するための各ライブラリなどを紹介します。

lazysizes.js

lazysizes.js

GitHub – aFarkas/lazysizes

多く利用されているLazy Loadライブラリ。

Lazy Load Remastered

Lazy Load Remastered

Lazy Load Remastered

多くのサイトで紹介されているLazy Loadライブラリ。MITライセンスです。

Lazy Load XT

Lazy Load XT

jQuery Lazy Load XT plugin

フェードインやスピナーなど様々な表現での遅延表示ができるjQueryプラグイン。

画像だけでなく、動画、iframeなどでも遅延ロードが可能です。

react-lazyload

react-lazyload

GitHub – twobin/react-lazyload

ReactでLazy Loadを使うためのコンポーネント。

Google ChromeでのLazy Load標準サポート

Google Chrome 76以降ではJSを使わなくてもタグによってLazy Loadが実現するようになりました。

やり方はimgタグにloading属性を追加するだけです。

<img loading=lazy>

ただしGoogle Chrome以外のブラウザでは非対応な場合もあるので注意が必要です。

WordPress5.5以降では標準でLazy Loadを自動適用

WordPressではバージョン5.5以降から画像挿入時に自動で、imgタグにloading属性として付与されます。

またバージョン5.9以降では、LCPが低下するのを考慮して1つ目の画像はLazy Loadなしの設定で表示されるようになりました。