Skip to content

Instantly share code, notes, and snippets.

@hrdtbs

hrdtbs/img要素のリソース読込関係の属性について.md

Last active June 28, 2023 13:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hrdtbs/d280ab78c257cbd90a058304cd9fdc6b to your computer and use it in GitHub Desktop.
Save hrdtbs/d280ab78c257cbd90a058304cd9fdc6b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
img要素のリソース読込関係の属性について.md

img要素のリソース読込関係の属性について

画像のデコーディングは通常HTMLのパース処理に含まれているため、大きな画像はメインスレッドをブロックする原因になる。

これを改善するためにdecoding=asyncやloading=lazyが存在する。

decoding=async

HTMLのパース処理 → 「バックグラウンドプロセスで画像のダウンロード開始」 → CSSのパース処理 →　スタイルの再計算　→ レイアウト処理

CSSのパース処理やスタイルの再計算をブロックしないため、スムーズにWebページの表示が行われる。

ページ全体がファーストビューに収まるようなサイトではloading=lazyと比べてUXが向上する。

loading=lazy

HTMLのパース処理 → CSSのパース処理 →　スタイルの再計算　→ レイアウト処理 → 「バックグラウンドプロセスで画像のダウンロード開始」

CSSのパース処理やスタイルの再計算をブロックしないため、スムーズにWebページの表示が行われる。

viewportに含まれる画像が非常に多い場合、レイアウト処理などが終わってからの読込になるため遅くなってしまう。decoding=asyncを使った方が良い。

逆にviewportに含まれる画像が少なく、縦に長いようなWebページでは効率的な読込が可能。

なお、loading属性をサポートしているChrome/Operaなどでdecodingとloadingを併記した場合、loadingが優先される。

importance　（おまけ）

リソースをfetchする優先度を示すことができる

なるべく表示されていてほしい画像、例えばHero Imageに有効

iframeやlink、scriptにも使える

@hrdtbs
Copy link
Author

hrdtbs commented Nov 9, 2021

decoding=asyncとloading=lazyを併記すると、loading="lazy"が使用できる場合、loading="lazy"が優先される

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment