rel="preload" のテストページ
説明
<link>タグにrel="preload"を指定してCSSファイルを読み込みます。- WebサーバーからそのCSSファイルを取得する際に、3秒掛かるようにしてあります。
rel="preload"で非同期にCSSファイルを取得するため、レンダリングはブロックせれません。このページ上の文章はすぐに表示されます。- 約3秒後にCSSファイルが取得されたら、そこで定義されているスタイルがすぐに適用されるようにしてあります。具体的には背景色が変わります。
🔰 もう一度試す場合は、Ctrl + Shift + R キーで、このページを再読み込みしてください。
ポイント
rel="preload"を使うと、ブラウザに対してそのリソースを早く読み込むように指示することになります。rel="preload"を使うと、リソースが非同期で読み込まれます。レンダリングをブロックしません。rel="preload"を指定して読み込んだリソースは、そのままでは適用されません。明示的に適用されるような記述が別途必要になります。<link>タグにrel="preload"を指定してCSSファイルを読み込んでいる場合は、例えば<link rel="stylesheet" href="xxx.css">といったコードも記述しておく必要があります。この方法は Preloading content with rel="preload" - HTML: Hypertext Markup Language | MDN に載っています。しかし、この方法だと結局CSSファイルが読み込まれるまでレンダリングがブロックされてしまうようです。- そのため本ページでは、
onloadイベントを使ってCSSファイルを適用しています。
コード
(1) index.html (今表示しているページ) のCSSファイルを読み込むところ
<link rel="preload" href="slow.css.php" as="style"
onload="this.onload=null;this.rel='stylesheet'">(2) slow.css.php
<?php
header("Content-type: text/css");
sleep(3);
echo <<<'EOD'
body {
background-color: #52f6ff;
}
EOD;Chrome の Network パネル スクリーンショット
(1) Webサーバーからslow.css.php が取得できるのを待っている
- slow.css.php は Pending になっている。
- slow.css.php はレンダリングをブロックしないので、DOMContentLoadedイベント（青線）と Load イベント（赤線）は既に通過している。
(2) slow.css.php が取得して適用した後
- slow.css.php がダウンロードされ、適用された。