【GithubPages VS Netlify VS Firebase】爆速で静的サイトのホスティングができるのはどれ?

このブログは「静的サイトジェネレータ」を使って作られています。
Nuxt.jsによってジェネレートされたサイトのデータを公開するために、 どのホスティングサービスが良いかを比較・検討しました。

静的サイトのホスティング・サービスで人気のある、定番的なもの中から選びたいと思います。
選択肢は以下の通り。

いわゆる、サーバーレスというやつです。(実はよくわかってない😓)
どれも、無料で始められて、モダンでイケてて、表示速度が早い 、という評判の良いものばかり👍

  1. 先に結論:firebaseにしたよ
  2. GitHub Pagesは総じて素晴らしい
  3. netlifyはUIとワークフローのシンプルさがすごい!
  4. ひたすら爆速にコミットするFirebase
  5. スピード比較を詳しく見る
  6. まとめ:どれも優秀=どれでもいいかも

Githubがとても気に入っているため、そこの相性は重視しています。
ということで、基本的に「Githubでソース管理をしていることが前提」で書いていきます。

先に結論:firebaseにしたよ

僕は Firebaseを選択 しました。
すべてのサービスのサインアップから設定、デプロイまで試してみました。
実はこのジャンルに関してほとんど知識はなく、レンサバくらいしか思いつかないレベル。

でも、すんなり導入できましたよ。
それくらい、簡単にスタートできるように用意されています。
海外サービスのUXの洗練され具合は、すごいです!

ざっくりとまとめると、

無料で始められるサービスですが、どれもハイパフォーマンス。
おそらく、どのサービスにしても、 デメリットや 不満はほとんど無かった んじゃないかなぁ。

GitHub Pagesは総じて素晴らしい

Github Pages

すごいところ

Githubを日常的に使っているなら、GitHub Pages一番かんたん 、かつ、スピーディー。
リポジトリでデータを管理しながら、pushでデプロイまで行ける のは、めちゃくちゃ便利。

使いやすさや簡単な設定画面、そして機能も文句ないレベルです。
Lighthouseのperformance値もかなりいい感じで、表示速度は全然問題なさそう。

惜しいところ

唯一のデメリット。
カスタムドメインだと、SSL証明書が自動で付与されない!

これが結構大きな問題で、今後はSSLが標準となることを考えるとちょっと微妙になってしまう。
この課題があるので、僕は候補から外すことにしました。

netlifyはUIとワークフローのシンプルさがすごい!

netlify

すごいところ

設定は一瞬で終わらせられるほどシンプル!
すごいです。
設定画面3stepくらいでデプロイまで 出来ちゃう。
UXを真剣に考えて提供してくれている感じがひしひしと伝わります。
こういうのこそ応援したい・・・

個人的にすごく使い勝手の良かったのは、GitHubの当該リポジトリにプッシュしただけでサイトをdeployしてくれるところ。
CIのような 「generateコマンドを叩いて、指定のディレクトリ以下をデプロイ」 みたいなことを自動でしてくれる設定までできちゃいます。
いたれりつくせり・・・

ドメインの設定も簡単だし、SSLも無料で設定&自動更新まで。
Let’s encryptなので有効期限があるのですが、自動で更新してくれます。

例えばこのブログだったら、ローカルサーバーでテストしてpushすれば完了。
ワークフローが断然シンプル になりますね。

惜しいところ

他の2つより若干ですが、表示速度が遅かった です。
一般的に見劣りするレベルではないはずですが、今回の選択肢より外しました。

に、してもこの使い心地で無料かぁ・・・

ひたすら爆速にコミットするFirebase

Firebase

すごいところ

とにかく速度が早い。
体感的にもlighthouseの数値的にも優秀。
設定画面のUXもめちゃめちゃ分かりやすく、数ステップで完了。

当然SSLの証明書もnetlifyとほぼ同じ感じで利用できます。

そしてなんと、HTTP2に対応 してます!
魅力的すぎるでしょ!
これが無料ですから、 彼らの表示速度に対する本気の姿勢 を感じずにいられません。

Google Developers Japan: Firebase Hosting が HTTP/2 に対応

惜しいところ

netlifyと違って、コマンドラインでのデプロイ になります。
なので、ワークフローがワンステップ多く なります。

他の2つのサービスでは1列に並んだ作業である、

  • Githubでのソース管理
  • generateした公開用の静的ファイルのデプロイ

が、並列に行う必要があるイメージです。

デプロイはコマンド一つ叩くだけなので、決して面倒なものではありません。
むしろ簡単なくらい。
なので、好みになってくるのかなぁと思います。

また、hosting以外にも選択できるサービスがたくさんあり(多分、有料)、拡張性には期待ができます。

全てにおいて優秀
さすがはGoogleのサービス!と思わざるを得ませんね。
githubを絡めたワークフローをどう思うかで、netrifyと悩むことになりそうです。

スピード比較を詳しく見る

速度的に見て、どのサービスが一番優れているかの調査結果を公開してくれているサイトを見つけました。
Static website hosting: who’s fastest? AWS, Google, Firebase, netlify or GitHub? | Savjee.be

これを見る限りではレスポンスが Firebaseは非常に優れている らしいですね。
逆にnetrifyは結果が芳しくない。

実際、僕がlightHouseで調べた結果でもそうでした。

良い性能を持っているのに・・・何かしらのボトルネックがあるのかもしれないですね。
これはそのうち改善される可能性もあるけれど、現時点ではfirebeseのほうが早いようです。

ほんと、深くて面白い!

まとめ:どれも優秀=どれでもいいかも

どのサービスにしようか、散々悩みました・・・。

要因を抽出してみると 「運用の利便性」 をとるか、「表示速度」 をとるのか、というところに行き着きました。
べつの表現をすると、
「運用という 製作者の視点を重視 する」 or 「速度という ユーザー体験を重視 する」

今回は 「表示速度によるUX向上」 が目的のひとつなので、Firebaseに決定。
このサイトではAMPを実装しているので、googleのサービスという面で色々とメリットもあるかもしれません。
打算的w

#hosting
#netlify
#firebase
#github
Chaos boy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。