Does a print CSS file slow your site down?という印刷向けCSSの書き方によるパフォーマンスの違いについての記事を読んだ。この辺りの話はクリティカルなんちゃらのあれなので特に目新しくはないのだけど、最近のChromeが賢くなっているのはちょっと驚いた。
きっとメディア・タイプが一致しないlink要素で参照されたCSSは読み込んでもレンダリングには使わないという感じなのだろう(調べてない)。不一致のメディア・タイプなのに待つのは良く意味がわからないので、他のブラウザーでもこのような実装になってもおかしくなさそう。というかなって欲しい。
この記事の結論としては、
@media print {}を使ってメインのCSSに混ぜるhtml要素の閉じタグの直前に置くという感じになってる。JavaScriptでやる場合は、普通にhead要素内にrel属性抜き(invalid)で書いて、後でrel="stylesheet"を追加するような感じで良い。が、やはりscript要素の動的追加と同じような形で追加すると、HTMLをいじらないで済むので楽そう。
クリティカルなんちゃらのアレでもはや@media print {}で混ぜるのは悪手っぽい雰囲気なので、僕はJavaScriptかなーという感じになっている。このウェブサイトでもそうなってる。