画像などを後からロードさせることでページ表示の改善などができる「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
多く利用されているLazy Loadライブラリ。
Lazy Load Remastered
多くのサイトで紹介されているLazy Loadライブラリ。MITライセンスです。
Lazy Load XT
フェードインやスピナーなど様々な表現での遅延表示ができるjQueryプラグイン。
画像だけでなく、動画、iframeなどでも遅延ロードが可能です。
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なしの設定で表示されるようになりました。
