CSSを非同期で読み込む方法【多分これが1番いいはず!】

CSSを非同期で読み込む方法【多分これが1番いいはず!】

みなさん、こんにちは!

モバイルファーストインデックス対策としてページスピードを向上させようと努力しました。

その1つがCSSの非同期読み込みだったんですが、「<link rel=”preload”>」を使えばいいんだ!って最初は思ったのですがこれはどうやらChromeしか現在対応していませんでした……

そこで全ブラウザで対応するように、jsを使ってCSSを出来るだけDOM読み込み後に持ってくることにしました。

※IE9以下は捨てます!

jsを使ったCSSの非同期読み込み

結果から言うとこれになります。

requestAnimationFrame(function(e) {
  e = document.createElement('link');
  e.rel = 'stylesheet';
  e.href = 'ここにcssのパス';
  document.head.appendChild(e);
});

これをbodyの最後に記述することで、CSSを非同期読み込みすることが可能になります。

やったぜ。

やっていることは、

requestAnimationFrame()を使い描画が終わったタイミングでheadタグ内に<link>タグを生成しているだけです。

Googleが推奨しているCSS配信最適化を簡略化したものになります。

CSS非同期読み込み時に気をつけること

全ての描画が終わったタイミングで<link>タグを生成するので、読み込みが終わるまではレイアウトもクソも無くなるということになりますね。

なのでファーストビューで反映したいCSSは別ファイルとして普通に読み込むのがいいかもです。

いきなり崩れたサイトを見せられたら「え?」ってなるのは見えているので(笑)

<link rel=”preload”>」が早く全ブラウザに対応したら、こんな回りくどいことはしなくてよくなるので、早く対応してもらえるように毎日お祈りしましょう!

では、また会う日まで!

WEBカテゴリの最新記事