rel="preload" のテストページ2

説明

• <link rel="stylehseet" href="xxx.css"> による通常の CSSファイル読み込みに対して、<link rel="preload" href="xxx.css" as="style"> を追加すると読み始めのタイミングが早くなるか確認する。

コード

(パターン1)

<link rel="stylesheet" href="main.css"/>

(パターン2)

<link rel="preload" href="main.css" as="style">
<link rel="stylesheet" href="main.css"/>

結果

• ほとんど変わらない。

Chrome の Network パネル スクリーンショット

(パターン1)

(パターン2)

• 特に違いはない。Priority も同じ Highest である。