85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
|
+++
|
||
|
|
date = "2016-09-06"
|
||
|
|
tags = ["pc"]
|
||
|
|
title = "表示速度を改善する"
|
||
|
|
slug = "html-min"
|
||
|
|
+++
|
||
|
|
|
||
|
|
## 表示速度を改善する
|
||
|
|
|
||
|
|
基本的には以下のページから分析し、分析結果から最適化されたファイルをダウンロードできるので、それをダウンロードし各ファイルに上書きします。
|
||
|
|
|
||
|
|
https://developers.google.com/speed/pagespeed/insights/?hl=ja
|
||
|
|
|
||
|
|
スクリプトの読み込みは`async`を付けます。
|
||
|
|
|
||
|
|
HTMLを最適化するために`html-minifier`を使います。
|
||
|
|
|
||
|
|
以下のような感じでビルドすればよいでしょう。
|
||
|
|
|
||
|
|
```yml
|
||
|
|
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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
#!/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
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"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
|