Webサイトっていろいろやろうとするとどうしてもソースが肥大化してどんどんデータ量が大きくなった結果、サイトの表示が遅くなってしまって使いにくいことが多いと思います。
最近はWebサイトの軽量化をして、ページの離脱率低下ばかり考えているGucciです。
以前のブログ(簡単な方法でWebサイトを高速化を試してみよう)でも.htaccessにいろいろ記述することでサイトの高速化を紹介しましたが、もっと手軽にいい方法はないかと考えていました。
すぐ思いつくのはCSSとかjsをFooter側に持っていって後で読み込ませる方法ですが、これだとどうしても一瞬デザインの無いサイトが表示されてしまい、すごくカッコ悪い!
みんなどうしてんだろうなぁっていろいろ調査をしてみると最近のWebサイトはファーストビューに使われているCSSだけをインライン化して後のCSSはFooter側に書いて遅れて表示させる方法を取っているようです。
Googleなんかも積極的にこの方法をとっているようですが、簡単にファーストビューのCSSをインラインに。。。
って言われても設計の時点からそれを考えてCSSを組んでいないとどの部分やねん!!
っていう問題にぶつかります
そこで!!
そんな悩みを解決してくれるサイトを紹介します。
その名も、
「Critical Path CSS Generator」です。
このサイトは英語ですが複雑な文章ではないので簡単に使えると思います。
自分のサイトのURLを入力してGENERATEするだけでインラインにどんなCSSを書けばいいか解析してくれます。
実際にこれを使ってみたところGoogleSpeedでも劇的に変化があったので、複雑なCSSを組んでしまった人にはおススメです