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

middleman
middleman minifyより

このサイトは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まで小さくなりました。これでもまだ削減可能なので、時間があったらやります。

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

関連記事