ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

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を組み合わせるのがお薦めです。

WebPとLazyLoadを使って表示速度を上げる方法

ITTIのサイトでは上記の方法を導入しています。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ