CSSプリロードヒントでWebサイトのパフォーマンスを向上させる正しい方法

HTMLにはpreloadという属性があり、ページの読み込み時に、ブラウザへアセットを「どのように」、そしてより重要な「いつ」読み込むべきかというヒントを与えることができます。

preload属性は複数のHTML要素で利用できます。たとえば、<link>要素に追加すれば、CSSスタイルシートの取得（フェッチ）を早期に開始させることができます。

誤った使い方：preloadだけではスタイルシートは適用されない

一部のWebサイトでは以下のようなコードが紹介されていますが、この書き方は避けるべきです。

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

上記のコードはスタイルシートをプリロードするだけで、実際にページへ適用されるわけではないためです。

正しい使い方：onloadイベントハンドラを組み合わせる

スタイルシートをプリロードし、かつプリロード完了後すぐに適用したい場合は、<link>要素にインラインのJavaScriptであるonloadイベントハンドラを組み合わせます。

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

このonloadイベントハンドラにより、リンク要素の読み込みが完了した瞬間に、rel="preload"がrel="stylesheet"へと自動的に書き換えられます。

この設定を行うことで、preloadをサポートするブラウザでは、属性を使わない場合に比べて、CSSスタイルシートのダウンロードをより早い段階で開始できます。その結果、レンダリングブロックの時間が短縮され、ページの表示速度向上が期待できます。

ブラウザ対応状況

やや意外なことに、Firefoxはまだpreload属性をサポートしていません。ただし、その他の主要なモダンブラウザでは問題なく動作します。preload属性を使うこと自体は問題ありませんが、Firefoxでは単にCSSの先読み（プリフェッチ）が行われないだけで、スタイルシート自体は通常どおり読み込まれます。