Category:Web

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

では、また会う日まで!

RECOMENDED

【2018年最新】超高機能でおすすめな無料プロトタイピングツールまとめ

プロトタイピングツールとは、Web制作やアプリケーション制作時における完成形をイメージしやす…

CSSのみでHTML要素を上下左右に中央寄せする方法

cssの配置には色んな方法がありますが、常にベストを保つのは難しいものです。今回の記事ではcs…

ガチのPython初心者がDjangoを使ってWebアプリを作ってみる【導入編】

ガチのPython初心者がいきなりDjangoを使ってWebアプリケーションを作成するという無謀なチャレ…

おしゃれなHTMLテンプレートを無料で配布しているColorlibが有能すぎる

HTMLテンプレートを探しているときに見つけた「Colorlib」という配布サイトの紹介です。おしゃ…

Webライティングが捗り過ぎる!オススメの文章校正ツール「文賢」

ライティングは捗っていますか?今回紹介しますのは最強のオススメ文章校正ツールです。最近正…

2018年流行?font-familyのオススメ設定はこれ!【CSS】

2018年に流行ること間違い無しのcssのfont-familyおすすめ設定をご紹介!運営者の独断と偏見で…

もっと読む