こんにちは。
フットサル開始20分で人生初の肉離れをやってしまった中川です。

以前、ちょっと長めのページを1つ作ることになったのですが、少し表示が遅かったので
above the holdで最初に表示される部分をインラインで表示させようと思いました。

gulpのcriticalというプラグインを使いました。

gulpだったので、そんなに時間もかからずできました。

インストール

$ npm install --save critical

タスクを記述

var critical = require('critical');

gulp.task('critical', function () {
  critical.generateInline({
    base: 'src/', // 対象ファイルのディレクトリ
    src: 'index.html',    // 対象ファイル
    htmlTarget: 'index.html',    // 実行後のファイル
    width: 1200, // 抜き出す箇所の横幅
    height: 900,    // 抜き出す箇所の高さ
    minify: true    // minifyするかどうか
  });
});

あとは、ディレクトリに移動してタスクを実行すればOKです。

タスクが実行されると、index.htmlと該当ページに読み込まれているcssが、インライン化されたファイルになります。

長いページなどで最初の表示に時間がかかる時、こちらを使えばhtmlに記述された箇所が最初に表示されるので、もし表示速度をもう少し早くしたいという時があればお試しいただければと思います。