ChromeのLazy-Loadを使う方法
小規模案件でChromeのLazyloadを使う機会があり、ネイティブLazyLoadを実装してみました。
ChormeのネイティブLazyLoadの実装方法をご説明します。
今までJavaScriptで実装していた「Lazy Load」がChromeでは機能として実装されました。
ネイティブLazy Loadは、JavaScriptの使用に制限があるAMPに対応しているウェブサイトにも最適な方法ですね。
ChromeのLazy Lordの実装方法
実装方法は簡単です。
画像ファイルの場合は、imgタグに「loading="lazy"」を記述するだけです。
この時に画像サイズも記述することが推奨されています。
img
<img src="●●.jpg" loading="lazy" width="100" height="100" alt="画像">Picture
<picture> <source media="(min-width: 300px)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" loading="lazy" width="300" height="300" alt="画像"></picture>Srcset
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 360px) 33.3vw, 100vw" loading="lazy" alt="画像" >iframeに使用する場合は下記になります。
iframe
<iframe src="ex.html" loading="lazy" width="500" height="500">データ内容</iframe>Lazy Lordには以下のオプションが用意されています。
| loading="lazy" | 読み込みの遅延をさせる |
| loading="eager" | 従来の方法でコンテンツを読み込む |
| loading="auto" | ブラウザの判断に任せる |
ChromeのLazy Loadを実装するプラグイン
GoogleがオフィシャルでWordPress用のネイティブLazy Loadを実装するプラグインをリリースしています。
レビューを見ると評判は良くないデスネ。
クロスブラウザ対応のLazyloadプラグインやJavaScript、LazyLoad機能があるキャッシュ系プラグインなど選択肢は多いので、あえてこのプラグインを導入する必要は無いかとは思います。
ユーザーのUXを向上せさせるにはWebPとLazyLoadを組み合わせるのがお薦めです。
ITTIのサイトでは上記の方法を導入しています。
