ファーストビュー上の画像とLCPの関係についてテスト

1. このページの目的

ファーストビュー上の画像が LCP element に選ばれた状況で、loading 属性値によってどう変化が現れるか？観察する。

loading="lazy" を指定すると、画像ファイルへリクエストするタイミングが遅くなった。
loading なしだと、HTMLパースの途中で画像ファイルのリクエストが開始される。
loading="eager" を指定した場合は、loading なしの場合と同じだった。
<link rel="preload" .../> を指定すると、ブラウザに画像の存在を早いタイミングで知らせることができるが、すぐにダウンロードが開始されるわけではなく、loading なしの場合との明確な違いが分からなかった。

画像へのリクエストが発生したタイミングを見てみた。

以下のスクリーンショットはスケールが異なるため比べにくいが、HTMLのパース（水色の四角）が左から始まってから、どのくらいで画像へのリクエストが発生したかを比較している。

早い方から順に以下となっている。

(1) <link rel="preload" ...> (HTMLパースより先に発生する)

(2) loading="eager"

(3) loading なし

(4) loading="lazy"

loading="lazy" は HTMLに書いてあるので、ブラウザがHTMLをパースした時点で「指定されていること」は認識するはずである。ファーストビュー内に表示される計算結果が出た時点で、loading="lazy" の対象ではなくなるはず。