画像のdecoding-async：非同期処理による高速化について

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。decoding-asyncは画像の非同期処理を示唆する二羽の燕が縦に並んで空を斜めに飛んでいる

Two swallows by Capri23auto / Pixabay

decodingは画像のimg要素に使える属性で、画像のデコード（ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程）の扱いを制御する。decoding属性で指定できる三つの値

auto

同期と非同期の処理の仕方をブラウザに任せる（初期値）

sync

同期処理を示唆する

async

非同期処理を示唆する

decoding属性は画像と画像以外のコンテンツをどのような順番で表示するかに影響を与える。画像のデコードの同期処理とは何か文書などの画像以外のコンテンツの間に画像があった場合、文書の出現の後半部分は画像のデコードが終了するまで止められる。画像のデコードの非同期処理とは何か文書などの画像以外のコンテンツの間に画像があった場合、文書の出現の後半部分は画像のデコードが終了するまで止められない。画像がその他のコンテンツの前にないと同期と非同期の扱いに差はない。後ろにその他のコンテンツがある画像は非同期ならばその他のコンテンツの処理を止めない、いい換えるとそれぞれの表示過程が並列進行になる（画像のデコードはバックグラウンドに回ってその他のコンテンツの新たな処理を妨げずに続けられる）からブラウザの処理の全体にかかる時間は止められて直列進行になる同期よりも短縮されるわけなんだ。ただし注意を要するのは画像の非同期処理で有利になる短縮されたその他のコンテンツの表示過程を実際に画面に反映させるかどうかはブラウザに依存しているらしい。

同期と非同期のデコード方式の両方とも最後のコンテンツは同程度の時間が経過した後に表示される。主な違いはユーザーエージェントが画像でないコンテンツを最後のコンテンツを表示する前に表示するかどうかにある。

原文

In both synchronous and asynchronous decoding modes, the final content is presented to screen after the same amount of time has elapsed. The main difference is whether the user agent presents non-image content ahead of presenting the final content.

Decoding images｜HTML Standard（訳出）｜WHATWG

ブラウザのHTMLの解析を画像のデコードで妨げないことが全体の処理速度を上げて表示速度も上げ得る。これはJavaScriptを読み込む場合と同じだけれどもデザインのCSSを含めてサイトのHTMLのメインスレッド（主な処理の流れ）への割り込みを減らすことが円滑で迅速な動作に繋がるけれども表示速度へ活かされるかどうかは定かではない。decoding属性がブラウザに指定するのではなく、示唆するといわれるのはそのためだと考えられる。HTMLの記載例<img src="画像URL" alt="説明文" decoding="async">どんなブラウザでも動作が同じではないかも知れないけれどもサイトの表示速度の改善に役立つという声が多いようで、しかも人気のブラウザの全てが対応済み（HTML element: img: decoding）だから非常に使い易い。サイトのヘッダーやコンテンツの上の方の画像、訪問者の初回表示で扱われる可能性が高いものがdecoding-asyncに向いている。全ての画像、直ぐに見えないものにまで使うと却って画像以外の初回表示に支障を来すくらいブラウザの負担にならないともかぎらないからなるべく控えたい。使うのは初回表示の画像に絞れば画像もその他のコンテンツも良く高速化できるはずだ。来ても開かず、参ったり、場合によって帰ってしまう訪問者を少しでも減らせると有り難い。img要素以外の画像の非同期処理の方法decoding属性は画像のimg要素にしか使うことができない。するとCSSで表示する背景画像のようなものは対象外になる。サイトのヘッダーや上の方で初回画面に出易いと非同期処理が表示速度に有利なんだ。方法を探すとlink要素のrel-preloadを使うと良いと分かった。

Preload critical assets to improve loading speed

HTML、またはJavaScriptでもcreateElement()によるlinkタグのhead内への生成によって追加できるけど、画像URLの先取りがdecoding-asyncと変わらず、非同期処理になるらしい。便利だし、rel-preloadはどんな要素でも構わないので、decoding-asyncが無理な場合は代わりに非同期処理にしたいimg要素の画像URLに使うこともできる。