印刷向けスタイルシートを分ける理由は、スクリーン向けスタイルシートをできうる限り小さくし、ウェブページのレンダリング開始をできるかぎり早めることにある。別にしたことによるHTTPリクエストの増加は問題ではあるが、それそのものではなく、増えたHTTPリクエストがレンダリングやロード時間を含めたユーザー体感速度を遅くしてしまうことが問題であると言える。そのためロード完了後に裏でこっそり印刷向けスタイルシートを読むというLazy Load的なアプローチが良いのかもしれない。
<head>
...
<link id="print-css" rel media="only print" href="/css/print.css">
</head>
<body>
...
<script>
document.getElementById('print-css').rel = 'stylesheet';
</script>
</body>まずhead要素内で印刷向けスタイルシートを参照するlink要素を書いておくが、rel=stylesheetにはしないでおく。body要素の終了直前でrel=stylesheetを仕込み、CSSの読み込みを遅延して開始させる。
メリットとしてはページのレンダリングには影響を与えないことと、遅延読み込みではあるがリフローを起こさないので特にページの操作に影響を与えないこと。デメリットとしてはパケット消費が増えることと、根本的な解決になっていないこと。
安定を考えるとインラインで印刷向けスタイルを書く方法に落ち着きそうだけど、もうちょっとなんとかする方法はありそう。