WEBページのCritical Path CSSによるUXの改善

こんにちは、こがです。

今日は、最近徐々に流行ってきているCritical Path CSSについて話をしようと思います。
たぶん結構な人がCritical Path CSSとはなんぞや?だと思います。僕自身も名前自体は最近知りました。
さて、これは一体どういうものか?というお話をしていこうと思います。

Critical Path CSSで解決できること

まずはじめに、このCritical Path CSSを利用して解決出来ることは何か?とそれによるメリットについて
それは、ユーザーに対して体感としてページのロードを実際よりも短く感じてもらうことです。

いまいちパッとしないですね?僕の説明が下手ですいません・・・・
誤解を恐れずに言うのであれば、ページのロードによって画面が真っ白の状態や遷移前のページの表示のままでいるのを短くしよう。
そうすればユーザーへ早くコンテンツを届けることができるということになります。 

Critical Path CSSとは何か

Critical Path CSSとは、WEBページの上でユーザー(ブラウザ)が一番最初に目にする(表示される)部分で利用されるCSSのことです。
つまり、Critical Path CSSが読み込まれるまではページの表示がされないということです。
逆に言えばCritical Path CSSを早く読み込むことが出来ればそれだけ早い状態でページの表示準備が出来ることになります。
もちろんスクリプトの読み込みなどのレンダリングブロックによって実際の表示タイミングは左右されますがそれだけページの表示には重要な部分になります。

じゃあ実際にどうするの

することは至って単純です。
Critical Path CSSに該当するCSSをインライン、つまりHTMLに直接記述します。  
とは言っても、直接自分の手でHTMLを編集してCSSを弄るというのは現実的ではありませんし、また全体としてCSSを管理するのにも手間が増えてしまいます。

まずCritical Path CSSのインライン化ですが、今ではaltCSS等を利用するのがメジャーになっていると思います。
なので特にWebpackなんかのバンドルツールやGulpなどのタスクランナー等で処理しているのではないでしょうか?
インライン化などについても上述のツールを用いることで簡単に行うことが出来ます。
自分は、gulp-inline-sourceというプラグインを利用してインライン化を行っています。

CSSの管理方法としてフルCSSからCritical Path CSSを抜き出して生成してインライン化をしていくというのが一般的なフローになっていくのではないでしょうか。
Critical Path CSSの生成についても手動行うのはとっても厳しいものがあります。
この点もWEBツールやプラグイン等を利用することで簡単に行うことが出来ます。
NodeプラグインではCriticalだったり、WEBでもCritical Path CSS Generator等でググると出てきます。

本当に早くなるのか

これはケースバイケースという感じはします。
CSSやJSのフレームワークを使うのが一般的になってきたりしている昨今では少なからず効果を体感することが出来るのではと思っています。
実際に大手のWEBサイトではこのCritical Path CSSをインライン化して読ませるだけでなく、色々なテクニックを利用してUXを上げる工夫をしています。
今回のインライン化をすることによってUXを改善できれば良いなと思います。

今回はこんな感じで。
ではでは