重要ではないCSSファイルを後から読み込ませたい

画像ファイルでもCSSファイルでもJavaScriptファイルでも、ウェブページの描画速度(体感速度)を向上させるために、後から遅れて読み込ませたい場合があります。
しかし、CSSファイルは文法規則的には後から遅れて読み込ませることはできません。
HTMLの文法仕様では、CSSの読み込みはhead要素内で済ませる必要があるからです。

JavaScriptの場合はhead要素内でもbody要素内でも書けますが、CSSの場合はhead要素内一択です。
なので、ウェブページのbody要素の読み込みが始まるよりも前に、すべてのCSSを読み込む必要がある、という仕様なのですよね。

とはいえ、CSSによっては後から遅れて読み込ませたい場合もあります。
例えば、

• 後から読み込まれるJavaScriptだけで使われるCSS：
  → JavaScriptが読み込まれない限り使われないCSSなら、先に読んでおく必要性がありません。
• ユーザが何らかのアクションを起こさない限り参照されないCSS：
  → クリックされたときにだけ何かをモーダル表示するような部分で使われるCSSなどは、先に読んでおく必要はないかもしれません。

などがあるでしょうか。

そのような、先に読んでも仕方がない（事前に読み込むとウェブページの表示待ち時間を増やしてしまうだけ）なCSSファイルは、できるだけ後回しにして遅れて読み込ませたいですよね。
そんな遅延読み込み方法を解説してみます。

HTMLソースの末尾でCSSファイルを読み込ませる方法

遅れて読み込ませたいCSSソースを読み込む記述場所を「HTMLソースの末尾」付近にできるのなら、下記のようにJavaScriptを4行書くだけで済みます。(HTML部分も含めると6行ですが。)

<script type="text/javascript">
	var delaycss = document.createElement('link');
	delaycss.rel = 'stylesheet';
	delaycss.href = '/path/to/delaystyle.css';
	document.head.appendChild(delaycss);
</script>

上記のJavaScriptは特に関数にはしていないので、ブラウザの読み込みがこの箇所に到達した時点で実行されます。
なので、上記の記述をHTMLソースの頭の方に書いてしまったら意味がありません。HTMLソースの末尾(</body>タグの直前とか)に書けば良いでしょう。

上記でやっていることは、

• 2行目： link要素を生成する
• 3行目： rel属性に「stylesheet」を指定する
• 4行目： href属性にCSSファイルの位置を指定する
• 5行目： そのlink要素を、head要素の末尾に加える

という処理です。
3行目の引用符内は、遅れて読み込ませたいCSSファイル名に書き換えて使って下さい。

上記のJavaScript 4行で、そのHTMLソースのhead要素にCSSを読み込む記述が追加されたことになります。そのため、このスクリプトが実行された時点でそのCSSファイルが読み込まれます。

createElementもappendChildも、現在ではあらゆるブラウザで使えると考えて問題ないので（IE6でも動きますし）、上記の方法なら閲覧者の環境を気にせず使えるでしょう。

ただ、JavaScriptが実行されない環境ではCSSも読まれないので注意が必要です。
まあ、JavaScriptが実行できない環境のことはもはやあまり気にしなくても良さそうですが。(^_^;)
「JavaScriptが実行されない限り必要とされないCSS」の読み込みには、問題なく活用できるでしょうね。

(参考) Googleが紹介しているCSSの遅延読み込みソースは

GoogleのPageSpeed Insightsでは、もうちょっと長いソースを使ってCSSファイルの遅延読み込みが実現されています。
→ CSS の配信を最適化する

上記のソースでは、requestAnimationFrameというメソッドを使って、ブラウザがウェブページの描画を終えたタイミング（＝アニメーションの更新準備が整ったタイミング）で、CSSの読み込み処理を実行させているようです。
requestAnimationFrameメソッドについては、MDNのrequestAnimationFrame解説ページをどうぞ。
requestAnimationFrameはIE9以下では動かないので、それに対処するためにちょっと長くなっています。

rel=”preload”を使って非同期にCSSファイルを読み込ませる(未来の)方法

IE・Edgeを除くブラウザの最新版だけを対象にすれば良いなら、rel=”preload”を使って非同期にCSSファイルを読み込ませる方法があります。
たぶん、あと1年くらいしたら普通に使えるようになるでしょうかね？
この方法だと、HTMLを1行書くだけで遅延読み込みができるので非常に楽です。

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

link要素に属性rel="preload"を指定した上でhref属性値で読み込みを指示したファイルは非同期に読み込まれます。
そのファイルが読み込み終わった時点で（onload属性値に記述したJavaScriptが実行されるので、そこでrel属性値が「stylesheet」に変わり）CSSとして取り扱われる(読み込まれる)ようですね。

※参考：『<link rel="preload">を使ってCSSを非同期で読み込む』(Qiita)

非同期に読み込まれるというだけなので、head要素の該当行を読み込んだ時点でCSSファイルの読み込みは開始されてしまいますから、遅延読み込みとは言えない気もします。
ただ、非同期なので、ファイルの読み込み完了を待つことなくウェブページのレンダリングは継続されるため、「重要ではないCSSファイルの読み込み待ちのせいでページの描画が遅れるのを防ぎたい」という目的になら有効でしょう。

(更新日：2017年10月14日)