Amazon CloudFrontでブログをgzip圧縮して高速化してみた

PageSpeed Insightsでサイトをチェックしたらファイルを圧縮するとスコアが上がることが分かったのでスコアを上げるためにこのブログのファイルを圧縮する。

Hexoで生成されたブログのファイル(html, js, css)をgzip圧縮しようと思ったが、Cloudfrontで圧縮ができるみたいなので、Hexoでhtml, js, cssのスペースやコメントなど不要な部分を削除するプラグインをインストールして、圧縮はCloudfront側で実施し配信する。

hexoの設定

Cloudfrontで圧縮できるのでhexo-zip等で圧縮する必要はない。

hexoプラグインをインストール

以下のプラグインを使ってhexo generate時に不要な部分を削除する。

$ npm install hexo-html-minifier --save
$ npm install hexo-uglify --save
$ npm install hexo-clean-css --save

_config.ymlに以下の設定を追加。

$ vi _config.yml
html_minifier:
  exclude:
  removeComments: true
  removeCommentsFromCDATA: true
  removeCDATASectionsFromCDATA: true
  conservativeCollapse: true
  preserveLineBreaks: true
  collapseBooleanAttributes: true
  removeRedundantAttributes: true
  removeEmptyAttributes: true
  removeIgnored: true
  minifyJS: true
  minifyCSS: true

uglify:
  mangle: true
  output:
  compress:
  exclude:
    - "*.min.js?v=*"

clean_css:
  exclude:
    - "*.min.css?v=*"