こんにちは永田です。

二月になって（もう後半ですが）一気に寒くなりましたね・・。
今冬は出番なしかと思われたダウンコートを今更引っ張り出して着ている日々です。

さて今回は技術情報記事です。

タイトルの通り、画像遅延ロードをHTML 属性で実装しようというもの。
大量の画像が貼られたページは、画像の読み込みの為にページ速度が遅くなってしまうことがあります。
これを解消するため、ページ内の画像を一度に読み込まず必要な分だけ読み込むようにします。
表示外の画像の読み込みを後回しにすることで、表示速度を速くすることができる！！というものです。

これまではJSにて実装していた画像遅延（lazyload）ですが、”loading”というHTML属性を使うことで、ユーザーがスクロールするまで読み込みを遅らせることができます。

実装方法は以下。

loading属性のオプションは以下となります。

• loading=”lazy”
  遅延ロードを行う

• loading=”eager”
  遅延ロードを行わない

• loading=”auto”
  遅延ロードするかしないかをブラウザにゆだねる

いまのところはChromeにしか対応していないが、ウェブ標準になったとのこと。
参考記事：海外SEOブログ様
Chrome以外のブラウザ、FirefoxやSafariもサポート対象になることが期待できそうです。

ではこのへんで！