背景
最近活発になってきているHugoであるが，ちょっとした設定の変更や画像ファイルの圧縮により
劇的に読み込み速度を改善することができる．
ここでは，実際に筆者のサイトを高速化した手順について示す．
自分のサイトの読み込み時間を計測しよう
Hugoは，静的なサイトのジェネレータであり，世界的にも人気が有る．実際にHugoでホームページを作っている人もいる．
しかし，静的なサイトであるため，軽量で読み込みも早いのかというとそうでもない．
実際に，PageSpeed Insightsで速度を計測してみると中々に辛口な評価を下されてしまう．筆者のサイトも86という微妙なスコアだった．
だが，以下に示す手順で高速化を図ると劇的に読み込み速度が改善した．
Hugoに限らず自分のホームページを持っている人はこれを機会に設定を見直してほしい．
やったこと
- CSS,JSファイルをローカルからCDNサービスに変更
- 画像ファイルをwebpに圧縮
CSS,JSファイルをローカルからCDNサービスに変更
CDNとは
皆さんはCSSやJavaScriptを使っているだろうか．
まあ聞くまでもなく使っているだろう．
特に，以下のライブラリはほとんどのサイトで使われている．
それではこれらのライブラリをどこに配置しているだろうか．
軽く調べた限りでは結構な数のサイトでローカルにライブラリを配置し読み込んでいた．
しかし，以外にもローカルに配置されたライブラリのロードは遅いのである（さくらのレンタルサーバだと250msくらいでした）．
一方，CDNサーバーから読み込むようにすると一気に20msぐらいにまで短縮される（十分の一！）
CDNとは，外部からのアクセスに対し，Webサーバーが直接対応するのではなく，各地に存在するキャッシュサーバーがコンテンツを配信する仕組みである．
なんでCDNサービスを使うと読み込み時間が高速化するかと言うと，下手なローカルサーバやレンタルサーバよりもCDNサービスのキャッシュサーバの方が速いからである．
CDNサービスには種類があるが，ラインナップや速度を考えるとcdnjs
がおすすめ．尚，CDNサービスの種類や速度は以下のサイトで比べられる．
ただし，Bootstrapはcdnjsでは配信されていないのでBootstrapCDNを使おう．
CDNサービスの使い方
使い方は簡単である．Hugoのテーマにもよるが，例えばbootstrap.cssを置き換えてみると
<link rel="stylesheet" href="css/bootstrap.min.css" />
とかいてあるところを，(BootstrapCDNを使う場合は)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSs NjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
に変更しよう．JavaScriptも同様で，
<script src="js/jquery-3.5.1.slim.min.js"></script>
から(cdnjsを使う場合は)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPN OZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
に変更する．ローカルのファイルはもういらないので消してしまっても構わない．
これだけでライブラリの読み込み時間が劇的に短くなる．
画像ファイルをwebpに圧縮
webpとは
webpとはグーグルが推している次世代型の圧縮形式である．
というのも案の定アップルやマイクロソフトも自分のプラットフォーム向けの圧縮形式を作っているからである．
次世代画像フォーマット「WebP（ウェッピー）」を実際に使ってみよう
実際にはグーグル一強であり，webpが最も対応ブラウザが多い．
最近までsafariが対応していなかったが，根負けしたのかsafariもwebpに対応するらしいのでwebpを使えば間違いない．
webpコマンドのインストール
リナックスのディストリビューションによって異なるかもしれないが，Debianでは
sudo apt install webp
でwebp関連のコマンドが使えるようになる．具体的にはwebp以外の画像をwebpに圧縮するcwebpコマンドとその逆のdwebpコマンドである．ここではcwebpコマンドを使う．
cwebp hoge.png -o hoge.webp
尚，webp形式では透過色にも対応しているため，透過色有りのPNG形式の画像もこれだけでOK．
実験してみると無圧縮のPNG形式の画像が342KBから25KBまで圧縮できた．見た目もほとんど劣化しない．
まとめ
ここではCDNサービスを使ったライブラリの読み込みの高速化と画像ファイルの圧縮について解説した．
とくにCDNサービスを使った高速化は非常に強力でこれだけでPageSpeed Insightsのスコアが大きく向上する(86から91)．
Webサーバーにライブラリを置く必要がないのも大きな利点と言える．
画像の圧縮は必ずしも必須ではないが容量を大きく削減できるので画像を多用するサイトでは効果が期待できる．
注意点
ここまで書いといてなんだがDisqusのコメントフォームを設置すると
問答無用でスコアが67くらいになる．
場合によってはコメントフォームをなくしたほうがいいかもしれない．