PR




[PR]ランサーズ

SEO

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

投稿日:

簡単な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での実装より優先されます。

画像lazy-loadのタグ

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

画像の説明

画像lazy-load資料

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

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

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

[広告]おすすめ記事

SEOコンサルタント問い合わせ

・SEOコンサルのご依頼
・SEOや誹謗中傷対策のご相談
・講演会・セミナーのご依頼

SEOコンサルタント問い合わせ

ニョッキーのお笑いオリジナルネタ

-SEO

Copyright© SEOコンサルタント.com , 2019 All Rights Reserved.