Netlifyは遅い

ここ数年、Netlify に大変お世話になってきました。とても便利で助かっているのですが、実はスループットがとても悪いということに気が付きました。

これに気づいたのは Storybook のサイトを構築したときでした。Storybook は JavaScript のバンドルサイズがどうしても 2MB 程度になってしまうのですが、これをダウンロードするのに十数秒かかっていることが分かったのです。

調べてみると、Netlify の無料プランの場合、CDN は世界で 8 箇所しかなく、日本は含まれていないそうです。サポートに問い合わせたところ、日本での CDN を有効にする場合は月額 3000 ドルから(!!!)のエンタープライズ契約が必須との回答でした。ありがとう Alejandra さん、ブッ飛んだぜ!

代替手段を検討してみた結果をまとめたものが下記です。測定にはfastorslow.comなどを使いました。

(20201225 追記:この時は知らなかったのですが、今なら Vercel を選ぶかもしれません)

service
price
スループット
RTT
Netlify
200GB まで無料以降従量制
約 100KB/s
約 50ms
Github pages
100GB まで無料超えたら追い出される(!)
数 MB/s
約 5ms
Firebase hosting
10GB まで無料以降従量制
数 MB/s
約 5ms

Firebase と Github pages で悩みましたが、下記の理由から今回は github pages を利用することにしました。

  • スループットやレイテンシにほぼ差がないこと
  • デプロイの手間はどちらでもさして変わらかったこと(github actions 利用)
  • 無料枠が github pages のほうが大きいこと

ちなみに、github actions は以下のようにしています。

上記を走らせるとgh-pagesブランチに、指定したフォルダの内容がプッシュされます(上記では./storybook-staticに生成されたファイル)。あとは github のコンソールから、pages として公開するブランチをポチッと選べば完了です。

なお、独自ドメインを使用する場合は、DNS 設定において、<あなたのユーザ名>.github.ioを値とするCNAMEレコードを作成しておく必要があります。