CSSをJSのasyncみたいに非同期で読み込ませる

2017/2/13 web

作ったサイトが遅いとGoogleさんのSpeedInsightに言われたので、どうにかCSSを非同期で読み込ませることができないか調べてみました。

JavaScriptを絡めればちゃっちゃと組むことができるのですが、どうやらlinkタグだけで非同期で読み込ませる方法がありました。

非同期でCSSを読み込ませるためのlinkタグの書き方

<link rel="preload" as="style"  href='asset/css/style.css' type='text/css' media='all' onload="this.rel='stylesheet'">

1	<link rel="preload" as="style" href='asset/css/style.css' type='text/css' media='all' onload="this.rel='stylesheet'">

これでできた。

もうHTMLやCSSのことはだいたい分かっていた気だったんですけど、まだまだ知らないことがあるもんですね。

CSSをすべて非同期で読み込ませると、サイトを開くと一瞬cssがあたってない状態で表示されるのでファーストビューのCSSはHEADタグの中に直書きしておくのがいいです。

ファーストビューの範囲はSpeedInsightで確認できます。

こちらが現時点でrel=”preload”に対応しているブラウザ。

少ない。あまりにも少ない。実質クロームしか対応してないやないか！

ちなみに対応していないブラウザでみるとCSSが反映されてませんでした／(^o^)＼

ではでは！