decoding="async"とloading="lazy"の違い| PerfData

画像の読込処理の違い ページ作成日 2019年12月19日 ページ更新日 2021年3月2日 著者: 竹洞 陽一郎 Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。 その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。 画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の違いを解説します。 decoding属性は、画像のデコード処理に関しての指示をユーザエージェントに明示する属性です。 decoding="async"と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。 記述の仕方としては、以下のようになります。 <img class

[kkeisuke]

“現状は、併記すると、Chromeにおいては、loading="lazy"の方が優先されます。 ”

[takehora]

decoding="async"とloading="lazy"の動作の違いについて解説しました。

[reboot_in]

“decoding="async"とloading="lazy"は、「如何にメインスレッドの処理を妨げないか？」を違う思想で実現したものです。 従って、その仕組み上併記しても両立はしません。 併記すると、Chromeにおいては、loading="lazy"の方が優先”

[hirorock]

img[decoding="async"]

[yasu-log]

【B!】decoding="async" VS loading="lazy" — ブログ - 株式会社Spelldata

[jislotz]

よくまとまっている。