画像のdecoding属性 loading属性 WordPressの取り扱い。画像のdecoding属性、loading属性どちらも初期値(未設定時)はautoであり自動的に最適な描画が行われます。画像の非同期デコード「decoding=”async”」と画像の遅延読み込み「loading=”lazy”」で、これらをはっきりと設定しておくことで、ページの読み込み速度を向上させることができるためページの高速表示化に繋がります。
- 画像の非同期デコード decoding=”async”とは、画像を読み込む時に他のコンテンツの読み込みを妨げない工夫
- 画像の遅延読み込みloading=”lazy”は、画像の遅延読み込みにより、ページのファーストビュー(画面内に表示される領域)速度を向上させる工夫
WordPress上のdecoding属性 loading属性
WordPressにおいては、バージョン6.1以降から画像に対してdecoding=”async”が、バージョン5.5以降からloading=”lazy”が標準機能として自動設置されるようになっています。
decoding属性
- auto
- async
- sync
loading属性
- auto
- lazy
- eager
decoding=”async”とloading=”lazy”の相違点
decoding=”async”とloading=”lazy”の相違点として、、decoding=”async”は、現在表示されている描画領域以外の画像も読み込みますが、loading=”lazy”は、ページがスクロールされ描画領域に近づいた時に画像を読み込みます。decoding=”async”は、ページ中の画像読み込み自体はするものの、デコードは非同期で行い、loading=”lazy”は描画領域に近づいた時に読み込み始めます。