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

説明

  1. <link>タグに rel="preload" を指定してCSSファイルを読み込みます。
  2. WebサーバーからそのCSSファイルを取得する際に、3秒掛かるようにしてあります。
  3. rel="preload" で非同期にCSSファイルを取得するため、レンダリングはブロックせれません。このページ上の文章はすぐに表示されます。
  4. 約3秒後に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 が取得できるのを待っている

(2) slow.css.php が取得して適用した後

参考