ホームページ制作・SEO(SEO対策)

画像のdecoding=”async”とloading=”lazy”

画像のdecoding async loading lazy

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

  • 画像の非同期デコード decoding=”async”とは、画像を読み込む時に他のコンテンツの読み込みを妨げない工夫
  • 画像の遅延読み込みloading=”lazy”は、画像の遅延読み込みにより、ページのファーストビュー(画面内に表示される領域)速度を向上させる工夫

WordPress上のdecoding属性 loading属性

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”は、ページがスクロールされ描画領域に近づいた時に画像を読み込みます。decoding=”async”は、ページ中の画像読み込み自体はするものの、デコードは非同期で行い、loading=”lazy”は描画領域に近づいた時に読み込み始めます。

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