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を改善できれば良いなと思います。

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

GCEでGitlabを立ててみた話 – 2017.09 –

こんにちは、こがです。  
  
業務でGitlabを立てることになったので、またまたCompute Engine上に立ててみました。
今回初めてGitlabを立てたのですが、インストールがとっても楽チンでした。
そんなGitlabのインストールで行ったことをメモっていきます

公式サイトのInstallationを参考にインストールを進めていきます。
Installation methods for Gitlab

今回の環境としては以下の通りです。
CPUx1/メモリ3.75GBのn1-standard-1を利用し、OSにはUbuntu16.04 LTSを選択しました。

インストール

公式サイトの通りに順番に項目をこなしていきます。
途中で公式サイトには無い設定として、Gitlabで利用するURLの設定を行っているので注意してください。
また、ステップ1の項目は今回不要でしたので行っていません。
ということでステップ2からです。

リポジトリの登録

curl -sS https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash

ローカルへGitlabをインストール

sudo apt-get install gitlab-ce

外部へ公開されるURLの設定

sudo vim /etc/gitlab/gitlab.rb

/etc/gitlab/gitlab.rbを開いてexternal_urlをおのおのアクセスする際に利用するIPアドレスなりドメインなりに変更します。  
後からでもこの項目は設定出来ますが、以下のコマンドを実行する必要がありますがこのタイミングで行うことでまとめてやってもらいます。

Gitlabの環境設定

sudo gitlab-ctl reconfigure

これでGitlabのインストール作業は終了です。
ここからはブラウザ上で作業を行っていきます。

初期設定

まずは最初にアクセスする際に行うのがrootアカウントのパスワード設定です。
自分の環境ではセキュリティリスクになると思ってすぐ消すので適当にパスワード設定しました。
というこですぐにアカウント関連の設定をしましょう。

新規アカウントの作成・rootアカウントの削除

まずは新規アカウントを作成します。
まずはrootアカウントでログインし、右上のAdmin Areaを選択し、少し分かりづらいですがOverviewからUsersへと進んで右側にあるNew Userを選択します。
アカウント名とメールアドレス、そしてアクセスレベルを設定してCreate Userを選択しアカウントを作成します。
初期設定の状態ではメールが利用出来ないので、作成したユーザーをEditからもう一度編集してパスワードを設定します。
これで新規アカウントの設定は完了です。
  
次にrootアカウントを削除するために、作成したアカウントでログインし直します。
先ほどと同じようにAdmin Area->Overview->Usersと進みます。
そして、rootアカウントの削除を右のボタンから選択して削除をします。

サインアップの無効化

さらにサインアップを無効化しておきます。

やり方は、同じようにAdmin Areaを選択、右の歯車からSettingsを選択し、Sign-up RestrictionsにあるSign-up Enabledのチェックを外し設定を保存します。

終わりに

色々と他にも設定項目はあると思いますが、こんな感じだと思います。
また、アカウントの認証周りは2段階認証が使えるので有効にしておくのも良いと思います、というより是非とも有効にしましょう。
  
今回は、この辺にしておきたいと思います。
ではでは。