画像の非同期デコード「decoding=”async”」と画像の遅延読み込み「loading=”lazy”」について触れていきます。decoding属性、loading属性どちらも初期値（未設定時）はautoであり自動的に最適な描画がなされますが、これらをはっきりと設定しておくことで、ページの読み込み速度を向上させることができます（つまりページの高速表示化に繋がります）。細かい点といえば細かい点になりますが、ページの読み込み速度に関するSEOのひとつです。
端的には、画像の非同期デコード decoding=”async”とは、画像を読み込む時に他のコンテンツの読み込みを妨げないという工夫であり、loading=”lazy”とは、画像の遅延読み込みにより、ページのファーストビュー（画面内に表示される領域）速度を向上させる工夫です。
なお、WordPressにおいては、バージョン6.1以降から画像に対してdecoding=”async”が、バージョン5.5以降からloading=”lazy”が標準機能として自動設置されるようになっています。
画像の非同期デコード decoding=”async”
画像を設置する際に使用する<img>タグにはdecoding属性を付与することができます。これにより、画像のデコード（別の形式に変換されたデータを元に戻す作業）の同期・非同期を設定することができます。
その効果としては、他のコンテンツの読み込みを妨げるかどうかという点です。
ページ表示の時、ブラウザは画像をデコードします。デコード中はページの読み込み、ページのレンダリング（ページ内容の描画）をブロックしてしまいます。
そのためページ表示速度が遅延します。
こうしたレンダリングブロックに対して、画像のデコードをバックグラウンドで非同期に行う指定が画像の非同期デコード decoding=”async”です。
すなわち、ページ表示時に画像の読み込みは行うものの、それをページレンダリングと並行して行う指定です。この設定により、ページの読み込みを妨げないため、ページの表示速度が向上します。
decoding=”async” コード例
<img src="https://funfairfanfare.com/xxxx.jpg" alt="ホームページ制作" decoding="async" width="270" height="250" />
decoding属性には次のような種類があります。
decoding属性
- auto
- async
- sync
auto
decoding=”auto”は、decoding属性未設定時の初期値です。ブラウザによって、最適な読み込み方法が自動的に選択されます。
async
decoding=”async”は、画像を非同期にデコードします。非同期のため他のコンテンツの読み込みを妨げないことからサイトの読み込み速度が向上します。
sync
decoding=”sync”は、画像を同期的にデコードします。デコード中は他のコンテンツの読み込みを妨げるためサイトの読み込み速度は低下しますが、画像がしっかりと表示されます。
なお、decoding属性は、現在の主要ブラウザで使用可能な属性です。現在は<img>タグのみで利用可能です。
画像の遅延読み込み loading=”lazy”
画像を設置する際に使用する<img>タグにはloading属性を付与することができます。これにより、画像の遅延読み込みを設定することができます。
近年のホームページには画像が多く設置されており、ページのファイルサイズも大きな物となっています。ページ中の画像が多い場合、ページの読み込み速度が低下します。これを回避するのが、「画像の遅延読み込み」です。
「画像の遅延読み込み」とは、ページ表示時のファーストビュー、つまり最初に表示される領域内の画像だけを読み込むようにし、画面上に表示されていない領域の画像については、ページスクロールによって表示が必要となったタイミングで読み込むという工夫です。この実装にloading=”lazy”を使用します。
「画像の遅延読み込み」を実装すると、ページ表示の最初に読み込むファイルサイズが低減するためページのファーストビュー速度を向上させることができます。
なお、以前は画像の遅延読み込みといえば、JavaScriptライブラリ（lazysizes等）を使用する方法が一般的でしたが、現在のブラウザは概ねloading属性に対応しているためこのloading属性を利用して画像の遅延読み込みを実装することが一般的となりました。
loading=”lazy” コード例
<img src="https://funfairfanfare.com/xxxx.jpg" alt="ホームページ制作" loading="lazy" width="270" height="250" />
loading属性
- auto
- lazy
- eager
auto
loading=”auto”は、loading属性未設定時の初期値です。ページの読み込み速度やユーザーの接続速度に基づき、ブラウザがlazyかeagerのいずれかを自動選択します。
lazy
loading=”lazy”は、ページ表示時に画像読み込まず、ページがスクロールされて表示位置が近づいたタイミングで画像を読み込みこみます。サイトの表示速度は向上しますが、画像がすぐに表示されずに描画に問題が生じる場合もあります。
eager
loading=”eager”は、ページ表示時に画像を読み込みます。このためサイトの表示速度は低下しますが、ページが表示された段階で画像はしっかりと表示されます。
iframeタグにも使用可能
なお、loading属性は、<img>タグの他、<iframe>タグにも使用することができます。
二番目以降の画像にloading=”lazy”
この画像に対するloading=”lazy”は、「ページがスクロールされて描画領域になったら画像を読み込んで表示する」という設定であるため、ファーストビュー（ページを開いた段階で描画される画面領域）に表示される画像に対しては設定すべきではありません。
こうしたことからloading=”lazy”は、概ねページ本文中の二番目以降の画像に設定されます。
なお、WordPressにおいては、コンテンツ部分の二番目以降の画像にloading=”lazy”が自動付与され、一番目の画像にはloading=”lazy”は付与されません（decoding=”async”のみが付け加えられます）。
decoding=”async”とloading=”lazy”の違いと併用
decoding=”async”とloading=”lazy”の違いとして、decoding=”async”は、ページ中の画像読み込み自体はするものの、デコードは非同期で行うというものであり、loading=”lazy”は描画領域に近づいた時に読み込み始めるという点です。
すなわち、decoding=”async”は、現在表示されている描画領域以外の画像も読み込みますが、loading=”lazy”は、ページがスクロールされ描画領域に近づいた時に画像を読み込むという違いがあります
なお、これらdecoding=”async”とloading=”lazy”を併記して併用した場合、loading=”lazy”が優先されます。
WordPressでは標準機能として自動設置される
decoding=”async”やloading=”lazy”
バージョン6.1以降のWordPressから標準機能として画像に対してdecoding=”async”が、そしてそれ以前のバージョン5.5以降のWordPressからloading=”lazy”が自動設置されるようになっています（自動設置によりAMPでエラーが出たり等の症状もありました）。
- WordPressバージョン5.5以降 loading=”lazy”
- WordPressバージョン6.1以降 decoding=”async”
こうしたことからバージョン6.1以降のWordPressを利用している場合は、改めて画像にdecoding=”async”やloading=”lazy”を付与する必要はありません。
しかしそれはコンテンツ部分（本文部分）など、WordPress内で挿入した画像に限定されます。
盲点となりがちなのが、オリジナルテーマを筆頭としたWordPressテーマ内に組み込まれた画像です。これらにはdecoding=”async”やloading=”lazy”は自動付与されません。
WordPressテーマ内の画像に注意
コンテンツ部分やウィジェット部分等であれば設置した画像に対してWordPress本体がdecoding=”async”やloading=”lazy”を自動設定してくれます。
しかしながら、テーマファイル内の投稿や固定ページ、アーカイブ系ページなどに組み込んだ画像などに関しては、decoding=”async”やloading=”lazy”は自動設定されません。
このため、投稿や固定ページのコンテンツ部分（本文部分）に設置された画像などはWordPressの自動設定に任せておけば良いものの、その他のテーマファイルのphpなどに組み込まれた画像に対しては手動でdecoding=”async”やloading=”lazy”を付与していく必要があります。
WordPressテーマ内の画像にdecoding=”async”やloading=”lazy”を設定する
WordPressテーマ内の画像にdecoding=”async”やloading=”lazy”を設定する場合、テーマファイルを編集し手動で設置画像にこれらコードを付け加える必要があります。
テーマファイル内の該当phpを開き<img>タグが設置された箇所にdecoding=”async”やloading=”lazy”を付け加えていきます。
decoding=”async” loading=”lazy” コード例
<img src="https://funfairfanfare.com/xxxx.jpg" alt="ホームページ制作" decoding="async" loading="lazy" width="270" height="250" />
背景画像の遅延読み込み
なお、decoding属性、loading属性は、HTMLの<img>タグに設定する属性であるため、css側で設定する背景画像などには、画像の遅延読み込み等を設定することができません。
背景画像の遅延読み込みなどを実装する場合には、lazysizesなどのJavaScriptライブラリを使用する必要があります。
HTML <img>タグ例（decoding属性、loading属性による画像の遅延読み込み等が可能）
<img src="https://funfairfanfare.com/decoding-loading.jpg" alt="decoding属性、loading属性" decoding="async" loading="lazy" width="270" height="250" />
CSSによる背景画像設定例（decoding属性、loading属性による画像の遅延読み込み等が不可）
CSS
.haikei {
background-image: url(https://funfairfanfare.com/decoding-loading.jpg);
}
HTML
<div class="haikei">ここに内容</div>
静的HTMLサイトでも可能な限りdecoding=”async”やloading=”lazy”を
decoding=”async”やloading=”lazy”は、画像の読み込みとそれに関係するページの表示速度（主にファーストビュー）に関係しています。
ページの表示速度に関するSEOのひとつでもあり、閲覧ユーザーの快適な閲覧にも繋がります。
こうしたことから静的HTMLサイトでも可能な限りdecoding=”async”やloading=”lazy”を設定しておくに越したことはありません。
すべての画像に個別で設定するとなるとかなりの手間になりますが、一括編集ツール等で設定できるのであれば、なるべくdecoding=”async”やloading=”lazy”を設定しておいたほうが良いでしょう。
画像に関する最適化の「自動化」
もちろん画像に関する最適化はこれだけではありません。
モバイル表示用に画像を指定するsrcset属性（画面サイズ、デバイスに応じて最適な画像を読み込む指定。小さい画面サイズであるのならばサイズの大きい画像を読み込まずに小さいサイズの画像を読み込むという指定）などの設定も心がける必要があります。
近年ではモバイルファーストインデックスをはじめとしてモバイル版（スマートフォン版）のページ表示が、サイト評価の基準となっている傾向にあります。
基本的なホームページ制作自体は、表面的には旧来からそれほど変化していませんが、細かな部分においては、工夫が求められている面があります。
個別に画像遅延読み込みの指定をしたり、デバイスサイズごとに画像を準備したり、という部分は、静的HTMLサイトでも実装していくことはできます。
しかしながら、WordPressなどのCMSは、日々のバージョンアップによりこうした面も自動対応するようになっています。
SEOの面でも、細かなクオリティの差がついていきますし、静的HTMLサイトでそれを追いかけようとすると、ページ数やページ内の情報ボリュームに応じた手間が必要になっていきます。
画像の非同期デコードや遅延読み込みは、ページの読み込み速度に関するSEOのひとつで、細かい点といえば細かい点になりますが、「ホームページはどこまでも改良していくことができる」という楽しみの一つでもあります。
（初回投稿日 2023年7月11日）
