PageSpeed Insightsで「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」に表示されているCSSを1つにまとめるとスコアが上がるみたいなので、CSSを1つのファイルにまとめる。

hexoのthemes/maupassantで変更をする。

複数のcssを1つにまとめる

まとめるCSSファイルは以下の4つ。

$ ls themes/maupassant/source/css/
grids-responsive-min.css
normalize.css
style.scss
pure-min.css

style.scssに他の3つのファイルを結合する。
まとめ方は3つのcssをscssのパーシャルにしてstyle.scssからimportする。

設定

scssはファイル名に_(アンダースコア)をつけるとパーシャルとなり、cssに変換されなくなる。

$ cd themes/maupassant/source/css/
$ mv grids-responsive-min.css _grids-responsive-min.scss
$ mv normalize.css _normalize.scss
$ mv pure-min.css _pure-min.scss

作成したパーシャルをstyle.scssからimportする。

ファイル先頭に以下を追加する。

$ vi style.scss
@import "pure-min";
@import "normalize";
@import "grids-responsive-min";

レイアウトからCSSを削除する

レイアウトファイルに定義されている以下のcssファイルを削除する。

$ vi themes/maupassant/layout/base.jade
(...)
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/grids-responsive-min.css'  + '?v=' + theme.version)
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/normalize.css'  + '?v=' + theme.version)
link(rel='stylesheet', type='text/css', href=url_for(theme.css) + '/pure-min.css'  + '?v=' + theme.version)
(...)

PageSpeed Insightsのスコア

結合前 結合後
モバイル 84 89
PC 94 94

PCは変化しなかったが、モバイルはスコアが5上がった。