画像のdecoding属性「async」、loading属性「lazy」

画像のdecoding属性「async」、loading属性「lazy」とWordPressにおけるdecoding属性、loading属性について。画像の非同期デコード decoding=”async”とは、画像を読み込む時に他のコンテンツの読み込みを妨げないという工夫であり、loading=”lazy”とは、画像の遅延読み込みにより、ページのファーストビュー(画面内に表示される領域)速度を向上させる工夫であり、画像に関するSEOのひとつとなります。

この画像のdecoding属性、loading属性どちらも初期値(未設定時)はautoであり自動的に最適な描画が行われます。非同期デコード「decoding=”async”」と画像の遅延読み込み「loading=”lazy”」で、これらをはっきりと設定しておくことで、ページの読み込み速度を向上させることができるためページの高速表示化に繋がります。

非同期デコード decoding=”async”

decoding属性「async」

ページ表示の時、ブラウザは画像をデコードします。デコード中はページの読み込み、ページのレンダリング(ページ内容の描画)をブロックするためページ表示速度が遅延します。こうしたレンダリングブロックに対して、画像のデコードをバックグラウンドで非同期に行う指定が画像の非同期デコード decoding=”async”です。この設定により、ページの読み込みを妨げないため、ページの表示速度が向上します。

遅延読み込みloading=”lazy”

loading属性「lazy」

loading=”lazy”は、ページ表示時に画像読み込まず、ページがスクロールされて表示位置が近づいたタイミングで画像を読み込みこみます。サイトの表示速度は向上します。場合によっては、画像がすぐに表示されずに描画に問題が生じる場合もあります

WordPressにおけるdecoding=”async”とloading=”lazy”

WordPress decoding属性「async」、loading属性「lazy」

画像のdecoding属性「async」、loading属性「lazy」について、WordPressにおいては、バージョン6.1以降から画像に対してdecoding=”async”が、バージョン5.5以降からloading=”lazy”が標準機能として自動設置されるようになっています。

画像の非同期デコード「decoding=”async”」と遅延読み込み「loading=”lazy”」