速いは正義!HugoでHTMLやCSSを圧縮してサイト表示を高速化する方法!

  HUGO   ,




静的サイトジェネレーターのHUGOは動作が早くてとても気に入っているんですが、一つ気になっていることがありました。(一つじゃないかもっていうのは置いといて)

それは、HTMLファイルを圧縮したいということです。

CSSJavaScriptは事前に圧縮しておけば、そのままpublicフォルダに出力してくれますが、HTMLファイルに関してはやり方がわかっていませんでした。

そこで、どうにかできないかと調べた結果、HTMLファイルを圧縮するコマンドオプションがあることがわかりましたので、まとめてみたいと思います。

なお、CSSやJavaScriptはコマンドオプションではなく、別のやり方での自動圧縮方法をまとめています。

<12/1追記>
ソース内にライセンス表示などを行っている場合は、コメントが削除されてしまうことで規約違反となってしまう場合があります。十分ご注意ください。
<追記ここまで>

作業環境

  • Hugo Static Site Generator v0.50

HTMLファイルの圧縮

通常の出力コマンド

hugo

通常、publicフォルダに出力するときは、hugoというコマンドを使います。

未圧縮のHTMLファイル

出力されるHTMLは、以下のようになります。

通常の方法でHUGOをビルドするとHTMLファイルは未圧縮の状態で出力されます。ファイルの中身を確認してみると、改行やスペースがそのまま出力されていることがわかります。

ご覧の通り、スカスカです。

人間には見やすくても、コンピューターに改行やスペースが必要とは限りません。

さらに、無駄な改行がかなり目立ちますね。

少し話がそれてしまいますが……、
余計な改行があるのは、HTML内のコメントが空白行として出力されてしまうためです。

以下のようにテンプレートファイルにコメントを入れてHTMLファイルを出力してみます。

余計な空白行が出力されることを確認するために、baseof.htmlにコメント行を大量に埋め込んでみました。

ブログ記事を確認してみると、一見問題がないように見えます。

テンプレートファイルにコメントを埋め込んだ状態でHTMLファイルを出力してみました。ソースの中身ではなくローカルサーバーを立ち上げてブログを確認してみると、表示自体は問題ないことが確認できました。

ところがソースを覗いてみると……

HUGOのビルドによって出力されたHTMLファイルの中身を確認してみると、テンプレートに埋め込んだコメント行が空白行となって出力されています。削除などはされることなく余計な行として残るようです。

コメントを入れておいた行が空白行として残ってしまっています。

気にしなければどうということは無いんですが、サイトの表示速度への影響も気になりますし、できれば綺麗にしておきたいところです。

というわけで、このHTMLファイルを圧縮してみます。

圧縮する出力コマンド

hugo --minify

このように--mynifyをつけるだけで、htmlファイルを圧縮して出力してくれます。

圧縮後のHTMLファイル

圧縮されたファイルの中身は以下の通りです。

コマンドオプションを追加してビルドすると、HTMLファイルの中身は期待通り圧縮されて出力されました。

余計な改行がなくなり、コンパクトにまとまりました。

オプションの確認方法

--minifyなどのオプションはhugo helpで確認することができます。

> hugo help

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  benchmark   Benchmark Hugo by building a site a number of times.
  config      Print the site configuration
  convert     Convert your content to different formats
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
​      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
​      --cleanDestinationDir    remove files from destination not found in static directories
​      --config string          config file (default is path/config.yaml|json|toml)
  -c, --contentDir string      filesystem path to content directory
​      --debug                  debug output
  -d, --destination string     filesystem path to write files to
​      --disableKinds strings   disable different kind of pages (home, RSS etc.)
​      --enableGitInfo          add Git revision, date and author info to the pages
​      --forceSyncStatic        copy all files when static is changed.
​      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
​      --i18n-warnings          print missing translations
​      --ignoreCache            ignores the cache directory
  -l, --layoutDir string       filesystem path to layout directory
​      --log                    enable Logging
​      --logFile string         log File path (if set, logging enabled automatically)
​      --minify                 minify any supported output format (HTML, XML etc.)
​      --noChmod                don't sync permission mode of files
​      --noTimes                don't sync modification time of files
​      --quiet                  build in quiet mode
​      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
​      --stepAnalysis           display memory and timing of different steps of the program
​      --templateMetrics        display metrics about template executions
​      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme string           theme to use (located in /themes/THEMENAME/)
​      --themesDir string       filesystem path to themes directory
  -v, --verbose                verbose output
​      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Additional help topics:
  hugo check     Contains some verification checks

Use "hugo [command] --help" for more information about a command.

HTML以外のファイルの圧縮方法

--minifyCSSJavaScriptも圧縮できると書かれているブログもあったのですが、私の環境だけなのか圧縮はできませんでした。

<12/1追記>
HTML内に記述したCSSやJavaScriptはきちんと圧縮されてますね。外部ファイルも圧縮されるのかと勝手に勘違いしてました……。
<追記ここまで>

そこで、--minifyとは別の方法で圧縮してみます。

CSS、JavaScriptファイルの移動

まず、CSSJavaScriptstaticフォルダからassetsフォルダに移動します。

├─archetypes
├─assets
│  ├─CSS  ←ここに移動
│  └─js   ←ここに移動
├─content
├─i18n
├─layouts
├─public
├─resources
├─static
│  ×├─CSS
│  ×└─js
└─themes

assetsフォルダにCSSjsフォルダを移動しますが、assetsフォルダがない場合は作成してください。

baseof.htmlファイルの修正

/layouts/_default/baseof.html、または、該当するpartialsファイルを以下のように修正します。

​    {{ $CSS := resources.Get "css/style.css" }}
​    {{ $style := $CSS | resources.Minify }}
​    <link href="{{ $style.Permalink }}" rel="stylesheet">

公式サイトでは、上記のようにresources.GetMinifyを分けて記述する例が載っていましたが、まとめて書くこともできます。

    {{ $style := resources.Get "css/style.css" | minify }}

最終的にはこうなりました。

​    {{ $style := resources.Get "css/style.css" | minify }}
​    {{ $script := resources.Get "js/script.js" | minify}}
​    <link href="{{ $style.Permalink }}" rel="stylesheet">
​    <script src="{{ $script.Permalink }}" async></script>

未圧縮のCSSファイル

圧縮前後を比較するために、未圧縮の状態を確認してみましょう。

事前に手動で余計なスペース等は削除していましたが、コメントなどは消さずに残してあります。

あとで圧縮後のCSSファイルと比べるために、未圧縮状態のCSSのファイルの中身を確認してみました。改行やコメントなどが当然そのまま残っています。

圧縮後のCSSファイル

圧縮後のファイルには、自動的に末尾に.minが付きます。

<link href="http://example.com/css/style.min.css" rel="stylesheet">
<script src="http://example.com/js/script.min.js" async></script>

このように、スペースや改行、さらにはコメントも削除されていることが確認できます。

ソース内でminifyを記述したことでCSSファイルが圧縮され、改行やスペース、コメント行が削除されコンパクトになりました。

あとがき

ビルド時にファイルを圧縮してくれるので、普段はコメントなども気にせず残せるのが嬉しいですね。

サイトの表示速度があがれば、なお嬉しいです。

気になっていたことが一つ解決したので、ソースも心もスッキリしました。

参考にさせていただいたサイト様


関連ページ