Critical を使用して、レンダリングブロック CSS を排除する

2015-01-24 / Tech

WordPress から Hugo に移行して、ブログのテーマがある程度出来たので、Google のウェブパフォーマンスツール PageSpeed Insights にかけたら 73 でした。ちなみに、ページのパフォーマンスが高いとされる数値は 85 以上。

「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」項目で大幅に減点されているから、今回は CSS を修正していきます。

レンダリングブロック CSS とは

ブラウザではコンテンツを画面に描画する前に外部 CSS ファイルをブロックします。これによって、余分なネットワーク遅延が生じ、コンテンツを画面に表示するのにかかる時間が増えます。

CSS の配信を最適化する

ページを表示する手順を考えてみる

ブラウザが html ページを表示する際の手順は、以下になります。

index.html を読み込む
外部に記述された CSS ファイル style.css を読み込む（レンダリングブロック発生）
描画

このレンダリングブロックを取り除くために、index.html の head 内に、CSS 初学時のように、style を直接記述（インライン化）してみます。

index.html を読み込む
描画

すると、一度の読み込み処理で描画まで持っていけますが、幾つかの理由で膨れ上がる CSS を html に記述するのは好ましくないようです。

CSS を外部ファイルで記述した場合、CSS ファイルをブラウザがキャッシュすることができるし、最初の通信で送れる情報は 14KB までだからです。参考：PageSpeed Insights でのモバイル解析 - 最初のレンダリングまでの往復数は最小限に抑える

だから、index.html にすべて詰め込んだとして、14KB を超えていては、複数回の通信が必要になり、結局 style.css を読み込むのと同じじゃん、みたいになる。ちなみに、気合の入った記事を書くとだいたい 10KB になり、CSS ファイルが 4KB 程度なので、14KB は調整し甲斐のある数値だったりする。

そこで、index.html に必要な sytle を直接記述するけれど、必要のない style は外部ファイルとして後から非同期で読み込むという手法を考えてみます。

index.html を読み込む
描画（この段階でユーザーには、CSS が適用されたページが表示されている）
style.css を読み込む
描画

ここで言う、必要な style ですが、ユーザーのファーストビューで見える範囲をカバーする CSS を指しています。全体を記述している CSS は、後から非同期で読み込むという訳です。これで最初のレンダリングは、早く実行されることになり、パフォーマンスが良いと評価されます。

Critical & Gulp

ここでは、Critical と、ビルドツール gulp を使用して、自動化します。まずは、Critical をインストールします。

$ npm install --save critical

gulpfile.js に以下を記述します。していることは、public フォルダ以下の index.html とその中に記述されている外部スタイルシートを、横幅 320px 縦幅 480px のデバイスで見た時で解析します。そして、インライン化した index.html を htmlTarget で記述されている html に保存しています。

var critical = require('critical');

gulp.task('critical', function () {
  critical.generateInline({
      base: 'public/',
      src: 'index.html',
      htmlTarget: 'index.html',
      width: 320,
      height: 480,
      minify: true
    });
});

gulp critical すれば、レンダリングブロック CSS が排除されます。このブログでは、サイトトップの index.html を対象に gulp critical を実行するようにしました。

結果

95 になりました。

pagespeed