簡単なHTML修正でできる「画像lazy-load」…「imgタグにloading 属性を追加」

手間なしUX改善！ HTMLちょい修正で実現できる、かんたん画像lazy-load

ページ表示を高速化してUXを改善するのに、ページをスクロールに従って画像を読み込むようにする「遅延読み込み（lazy-load）」が効果的だ。

これまで画像の遅延読み込みはJavaScriptライブラリなどを使って実現するものだったのだが、ついにGoogle Chromeウェブブラウザが、ネイティブ lazy-load を正式にサポートした（Chrome 76から）。

つまり、JavaScript のライブラリを使用しなくても、HTMLタグを少しいじるだけで画像が遅延読み込みされるようになったのだ（さらにiframeも同様に遅延読み込みできる）。

画像であれば、img タグに loading 属性を追加し、値に "lazy" を指定するだけでいい

あなたのサイトで実装してみたい場合、技術がわかる人に「グーグルの技術情報」とともに「polyfill（ポリフィル）もあるらしい」と伝えるといいだろう。

こえのブログ http://voice.ameba.jp でしれっとNative lazy-loading(img[loading="lazy"])に対応しました😴 サポートブラウザではIntersection Observerでの実装より優先されます。

こえのブログ https://t.co/weAFZO1M1a でしれっとNative lazy-loading(img[loading="lazy"])に対応しました😴 サポートブラウザではIntersection Observerでの実装より優先されます。 pic.twitter.com/ay5R61wwfP

— Hara Kazunari 🎆 (@herablog) 2019年8月22日

画像lazy-loadのタグ

▼imgタグに「loading="lazy" 」と書く。

画像lazy-load資料

グーグルの技術情報
Join GitHub today

SEOコンサルタントのまとめ

これは簡単ですね、画像タグに「loading="lazy" 」と書くだけ！お試しください！