media=”print”を使ってCSSを非同期で読み込む方法

css

Lighthouseでサイト速度をチューニングしていると高確率で遭遇するのが、「レンダリングをブロックするリソースを排除する」だ。

その中でCSSも該当していてどうしよっかなと思っていたらドンピシャの解決方法を見つけた。

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

どうもユーザーが印刷する時にスタイルシートを適用すると設定することでCSSが非同期に読み込まれるらしい。

でもってCSSがロードされた後にmediaをallにすることで元に戻しているそうな。

海外初の記事だけど、どうやって見つけるんだこれ。有用なhackでした。

Lighthouseで確認とその後

実際にLighthouseで調べてみるスタイルシートのレンダリングブロックの警告文は消えていた。

ちなみに、google fontにも適用すると同じ効果を得ることができた。

だ、が、だ。

確かにLighthouse上の数値は改善した。ページを手元の環境で確認しても速くなったように感じる。(重いWebフォントを使っていたのでなおさら)

ただ、ページ遷移直後のファーストビューにスタイル、フォントがカクついてしまう。

一瞬過ぎて気付かない程度ではなく、明らかにスタイルが遅延して読み込まれてカクついている。

どうしても、これは看過できないので採用しないことにした。



カテゴリー