hugo/content/blog/2016-09-06-html-min.md

+++ date = "2016-09-06" tags = ["pc"] title = "表示速度を改善する" slug = "html-min" +++

表示速度を改善する

基本的には以下のページから分析し、分析結果から最適化されたファイルをダウンロードできるので、それをダウンロードし各ファイルに上書きします。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

スクリプトの読み込みはasyncを付けます。

HTMLを最適化するためにhtml-minifierを使います。

以下のような感じでビルドすればよいでしょう。

image: publysher/hugo

before_script:
  - apt-get update -qq && apt-get install -y -qq git zsh curl
  - apt-get update -qq
  - curl -sL https://deb.nodesource.com/setup_6.x | bash -
  - apt-get install -y nodejs
  - curl -L https://npmjs.org/install.sh | sh 
pages:
  script:
  - hugo
  - npm i html-minifier
  - ./bin/html-minifier.sh
  artifacts:
    paths:
    - public
  only:
  - master

Dockerのpublysher/hugoはDebianらしいので、Node.jsのインストールが面倒くさいです。個人的にDocker ImageはArch Linux, Alpine Linuxなどを使って欲しさはある。

https://nodejs.org/en/download/package-manager/

bin/html-minifier.sh

#!/bin/zsh
d=${0:a:h:h}
h=${0:a:h}

cp $d/public/index.html $h
$d/node_modules/.bin/html-minifier -c $h/html-minifier.conf $h/index.html -o $d/public/index.html

bin/html-minifier.conf

{
  "removeComments": true,
  "removeCommentsFromCDATA": false,
  "removeCDATASectionsFromCDATA": false,
  "collapseWhitespace": true,
  "conservativeCollapse": false,
  "collapseBooleanAttributes": false,
  "removeAttributeQuotes": false,
  "removeRedundantAttributes": false,
  "useShortDoctype": false,
  "removeEmptyAttributes": false,
  "removeOptionalTags": false,
  "removeEmptyElements": false,
  "lint": false,
  "keepClosingSlash": false,
  "caseSensitive": true,
  "minifyJS": true,
  "minifyCSS": true,
  "ignoreCustomComments": [],
  "processScripts": []
}

ネットワークにおける圧縮ファイルの使用については、以下の機能提案がされている模様。これはWebサーバーに依存するので、こちらからはどうしようもない。

https://gitlab.com/gitlab-org/gitlab-ce/issues/15037