Github Pages上のサイトを高速化するためにCDNを活用する

dev.toとか阿部寛のサイトとか見て高速化させたくなったので、自分のサイトで色々頑張ってたのだが、CDNを上手く利用するのがよろしいことがわかった。

特に私のサイトはやる夫スレのまとめサイトなので、AA用Webフォント(Saitamaar)という結構重いもの(398KiB)をブラウザに渡す必要がある。
しかし、Github Pagesのキャッシュはヘッダで600秒しかもたないよう設定してしまっているため¹、5分過ぎて新しいページを見る度に398KiBを送る必要になるわけだ。やる夫スレは電車の中で見るものなので、これは非常に良くない。ということでCDNを上手く利用し、フォントキャッシュを半永久的に使い回させる。

なお、以下の計測内容はlocalhost環境で、git checkoutしつつDevtoolsのPerformance欄を使ってAAがWebフォントで描画された時間を測った。

WebフォントをRawGitに移管

まず簡単なCDNと言えばRawGitである。RawGitはGithub上のファイルを保管し、再度出力してくれる。
登録は簡単で、Github上のファイルをメインページ上のインプットボックスに入れるとURLが出てくる。これがCDNを通したものになっている。同じリポジトリであればどんなファイルでもいいらしいので、URLからファイル名を変えて使い回してもいい。
こいつは、ちゃんとキャッシュを永久的に使い回してもいいよ、という設定にして返してくれているので、とても助かる。
これで、11秒かかっていた読み込み時間が、再読込した瞬間にキャッシュからフォントを読み出してくれるようになったのでほぼ1秒-2秒とかになった。本当にフォントがどれだけ重いのかということが良く分かった。

とりあえず、静的ファイルはすべてRawGitにした。

Webpagetestに怒られたのでCDNをGitHackに変更

webpagetestを使って測ってみたところ、他はほぼAなのだがCache static contentだけBの判定を貰った。その理由について調べてみると、実はpngはGithub側のraw.githubusercontent.comにリダイレクトするらしい。

という訳でRawGitではなくGitHackを使った。GitHackも使い方はほぼ同じなのだが、ここはpngだろうとraw.githubusercontent.comにリダイレクトなんかしない平等な楽園だ。多分アセット類は同じCDNの方がいいだろうと思って全部取っ替えた。

今度はCompress TransferでBを食らった。gzip圧縮が足らないらしい。クソ。

1. 詳しくないのであってないかもしれない。 ↩