PR




[PR]ランサーズ

SEO

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

投稿日:

SEO漫画3話-023

簡単な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" 」と書くだけ!お試しください!

[広告]おすすめ記事

記事執筆/サイト管理者

記事執筆/サイト運営者


名前:白石竜次 Shiraishi Ryuji
肩書:SEOコンサルタント
高校卒業後、調理師を経て数々の職業を経験し、その後IT企業でHTMLおよびSEO対策を学ぶ。
その経験を知識を生かしながら各企業でSEO担当者となりインハウスSEOを行う。
現在ではフリーで様々な企業のSEOコンサルティングを行っている。
2011年11月 「SEO対策<検索上位にヒットする>コレだけ!技(技術評論社)」を出版。
2014年1月「世界一わかりやすいSEO対策 最初に読む本(技術評論社)」を出版。
2014年1月「たった30分でできるSEO検索エンジン最適化(秀和システム)」を出版。
2017年 書籍「DeNAと万引きメディアの大罪(宝島社)」に寄稿。


ストアカ

白石 竜次

元お笑い芸人の初心者・中小企業向けSEOセミナー

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

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

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

SEO漫画「ウェブマブ!」

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

-SEO

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