Netlifyとは
WEBサイトのホスティングサービス
https://www.netlify.com/
Netlifyに関する投稿
- Netlify / GithubPages / Heroku の速度比較 ←今回の投稿
- ドラッグ＆ドロップでWEBサイトを公開する
- Github連携でWEBサイトを公開する
- カスタムドメインを設定する
- Forms機能を利用して問い合わせフォームを作成する
はじめに
静的サイトを作成する機会があり、Netlify / GithubPages / Heroku の速度比較を行いましたので、参考情報として投稿させていただきます。
Herokuは静的サイトのホスティングサービスではありませんが、個人的によく利用するサービスなので比較対象に含めました。
速度比較に利用したソース
画像(60~100KB)が10個表示されるページです。
ページ全体としては780KB程度のサイズになります。
ソース
プレビュー
結果
各サービスにデプロイしたあとに3回ずつスーパーリロード（キャッシュをクリアして更新）させて、読み込みにかかった時間を測定しました。
Netlifyは自動的にCDNが利用されるらしく、比較したサービスの中では最速でした。
| サービス名（プラン） | 読み込み速度 |
|---|---|
| Netlify (free) | 140~180 ms |
| GithubPages | 260~400 ms |
| Heroku (free) | 1200~2500 ms |
備考：HerokuはHTML/CSSだけではデプロイできないため、ルートディレクトリに0バイトの
index.phpを配置しました。また、リージョンはUSでした。
以下は測定に利用した各サービスについてのメモです。
速度比較に利用したプラン
速度比較に利用した各サービスのプランは以下の通りです。
- Netlify (free)
- GithubPages
- Heroku (free)
| サービス（プラン） | 制限 |
|---|---|
| Netlify (free) | 帯域：100GB/月 ストレージ：100GB APIリクエスト： 500リクエスト/分 3デプロイ/分 |
| GithubPages | リポジトリの容量(推奨)：1GB サイトの容量：1GB 帯域：100GB/月 ビルド：10回/時間 |
| Heroku (free) | 未認証アカウント：550時間/月まで 認証済みアカウント：1000時間/月まで その他：30分間何も操作が行われないとスリープモードになる |
参考
- 【Netlify】Plans and Pricing | Netlify
- 【Netlify】Terms of Service | Netlify
- 【Netlify】GitHub Pages vs. Netlify | A Comparative Breakdown
- 【GithubPages】What is GitHub Pages? - User Documentation
- 【Heroku】Pricing | Heroku
- 【Heroku】Free Dyno Hours | Heroku Dev Center
- 【Heroku】Heroku を利用して無料でアプリの構築 | Heroku
画像
猫の画像は以下のサイトのフリー素材を利用させていただきました。
ぱくたそ-フリー素材・無料写真ダウンロード