Edited at

【Netlify】Netlify / GithubPages / Heroku の速度比較


Netlifyとは

WEBサイトのホスティングサービス

https://www.netlify.com/


Netlifyに関する投稿


はじめに

静的サイトを作成する機会があり、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分間何も操作が行われないとスリープモードになる


参考


画像

猫の画像は以下のサイトのフリー素材を利用させていただきました。

ぱくたそ-フリー素材・無料写真ダウンロード