インライン化とミニファイ化でmiddlemanで構築するサイトを速くしよう。

Web/02 Sep 2015

このサイトは middleman を使って制作していて、Github Pages でホストしています。Github Pages では、このサイトのように www が付いたサブドメインで運用すると、fastly の CDN を使って配信され、サイト表示速度が早くなります。

試しに、このサイトのトップページをWebsite speed test - Pingdom Toolsで計測すると以下のような感じ。 pingdom

さらに、Chrome のデベロッパーツールのNetworkタブのDisable chacheにチェックを入れて読み込み時間を計測したのが下記です。 developper tool

やや計測値が異なりますが、およそ 1.5 秒程度で読み込まれています。これだけ見ると遅くはなく概ね良好のように感じますが、PageSpeed Insights では評価がそこまで高くありませんでした。

insight

評価が悪かった項目の一つが「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」だった訳です。

CSS をインライン化する

PageSpeed Insights でのモバイル解析

ページの表示速度を分析し改善の提案を行ってくれる PageSpeed Insights では、以下のように言っています。

スクロールせずに見える(ATF)コンテンツを 1 秒未満で配信しレンダリングします。こうすることで、ユーザーは可能な限り早くページを利用し始めることができます。

レンダリングとは、ざっくり言うとブラウザがページとして生成すること。で、インライン化する方法を検討しており、middleman-inlinerという gem を使いました。

導入方法は簡単で次の通りです。(bundler 使っていること前提です。)

  1. gemfile に gem 'middleman-inliner' を追加し、 bundle install
  2. config.rb に activate :inliner を追加
  3. = stylesheet_inline_tag "cssのファイル名" のように読み込みタグをインライン用に編集する

SCSS ファイルを指定できる

middleman で sass(scss)を使ってコード書いている人が多いと思いますが、html は Haml や Slim、Erb と別れるところです。Slim と Haml では埋め込み機能で html 内に sass をインラインで書くことができるのですが、直で書くとメンテナンス性が下がります。

middleman-inliner は = stylesheet_inline_tag "cssのファイル名" と記述した箇所に <style></style> の形式で CSS を展開してくれるので、メンテナンス性を維持したままインライン化が可能となります。

実際にインライン化すると以下のようになります。 inline css

評価が少し上がりました

肝心の改善後の結果ですが、微増です。

improve insight

もっと上がるかと思ったのですが、それとは別に画像の圧縮とサイズ縮小化を指摘されており、ここは今改善中です。 インライン化で少しでも改善されることが伝われば…。

ファイルサイズも見直そう

上記以外の対策としては、個々のファイルの圧縮化(ミニファイ化)があります。その代表格は CSS と JS、HTML の圧縮です。

middleman では、 Config.rb で設定すれば簡単に行えます。ただし、html のミニファイ化を行う場合は gemfile に gem "middleman-minify-html" を追加しておく必要があるので注意が必要。

# config.rb
configure :build do
  activate :minify_html, :remove_quotes => false, :remove_intertag_spaces => true
  activate :minify_css
  activate :minify_javascript
  activate :gzip
end

ここで気になるのが gzip です。gzip はファイルの圧縮方法の一つで、ミニファイ化よりもさらにファイルサイズが小さくなります。ブラウザが gzip に対応していれば、勝手に展開してくれます。今ではほとんどのブラウザで対応しているそうですが、古い IE とかならたぶん無理。

まずは、無駄をなくすことが大事

上記の手法はサイト高速化のほんの一部です。Github Pages を使っていると HTTP ヘッダーをいじってキャッシュ変更できないといった制約もあるかもしれません。ですが、対策ポイントは他にもあって、ファイルの重複を最小にしてシンプルにすることもその一つです。

mdesign css

このサイトでは、メイン CSS である site.css が 37KB まで小さくなりました。これでもまだ削減可能なので、時間があったらやります。

デザインもコーディングもそうですが、行きつく先は無駄をなくしてシンプルにすることのような気がする今日この頃です。