loading=lazy

- 2月12日にHTML Living Standardが更新され<img>と<iframe>に loadingプロパティが公式に追加されました。 - 「公式に」というのは既に去年の6月4日リリースのChrome75では実装されていたので - 公式に発表されたことでFirebaseの75でもサポートされるようにな
るそうです - Chromiumを使っているMicrosoft Edgeも実装済みです

- loading=lazyは読み込みを遅延するためのプロパティです - 画像がブラウザの表示領域に入ると読み込まれます - 指定をしないとloading=autoと同じになります - ブラウザの指定に従います - 今まで通りに読み込ませたいときにはloading=eagerを指定しま
す

- ちなみにサポートしていないブラウザでも動作させるためにpolyﬁlもあるので、既に導入しても大丈夫です - どうでもいい情報ですが、wordpressに対応させるためのプラグインもあるそうです（Google製）

参考 - https://html.spec.whatwg.org/multipage/urls-and-fetching.html#laz y-loading-attribute - https://github.com/mfranzke/loading-attribute-polyfill - https://ja.wordpress.org/plugins/native-lazyload/ - https://scalable-loading-contribs.firebaseapp.com/test.html

loading=lazy

loading=lazy

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Technology

Featured

Transcript

loading=lazy

- ちなみにサポートしていないブラウザでも動作させるためにpolyﬁlもあるので、既に導入しても大丈夫です - どうでもいい情報ですが、wordpressに対応させるためのプラグインもあるそうです（Google製）

参考 - https://html.spec.whatwg.org/multipage/urls-and-fetching.html#laz y-loading-attribute - https://github.com/mfranzke/loading-attribute-polyfill - https://ja.wordpress.org/plugins/native-lazyload/ - https://scalable-loading-contribs.firebaseapp.com/test.html

loading=lazy

loading=lazy

Kaneko Takeshi

More Decks by Kaneko Takeshi

Other Decks in Technology

Featured

Transcript

loading=lazy

- ちなみにサポートしていないブラウザでも動作させるためにpolyﬁlもあ るので、既に導入しても大丈夫です - どうでもいい情報ですが、wordpressに対応させるためのプラグインも あるそうです（Google製）

参考 - https://html.spec.whatwg.org/multipage/urls-and-fetching.html#laz y-loading-attribute - https://github.com/mfranzke/loading-attribute-polyfill - https://ja.wordpress.org/plugins/native-lazyload/ - https://scalable-loading-contribs.firebaseapp.com/test.html

- ちなみにサポートしていないブラウザでも動作させるためにpolyﬁlもあるので、既に導入しても大丈夫です - どうでもいい情報ですが、wordpressに対応させるためのプラグインもあるそうです（Google製）