NetlifyからVercelへの移行を検討した話

最近ブログを新しく作り直しました。 また、ブログのPV数も増え月に70GBほどの配信量となり無料枠の上限に迫ってます。

ここまで大きくなったのは、2年間Netlifyにはお世話になったおかげで無料枠で収まる範囲で利用を続けてきました。 CIで簡単にホスティング出来るのはめちゃくちゃ便利で好きなサービスです。

しかし、Netlifyのスループットが遅く1MBのファイルのダウンロードに1分超えることもありました。普段では2~4秒くらい。 サイトの速度のボトルネックがNetlifyのスループットの遅さとなりました。 課金をしてNetlifyの利用を続けるか、他のホスティングサービスやレンタルサーバに乗り換えるかの考えをまとめる。

現状とVercelについて書きました。

※無料枠での話です。

Netlifyで公開しているサイトの速度

PageSpeed InsightsとChromeのDeveloper toolで速度を測りました。

▼ PageSpeed Insightsで測定した結果。

Netlifyモバイルパソコン
スコア4173
First Contentful Paint(FCP)2.4 s0.6 s
Time to Interactive14.9 s3.0 s
Speed Index16.4 s2.7 s
Total Blocking Time3,270 ms370 ms
Largest Contentful Paint(LCP)2.5 s0.7 s
Cumulative Layout Shift(CLS)0.1630.004

▼ Developer toolで測定した結果。(日曜日の正午くらい)

NetlifyHTML記事のJSON
Size74.9 kB1.8 MB
Waiting (TTFB)95.54 ms245.76 ms
Content Download189.85 ms2.73 s

TTBFとContent Downloadが遅いため最初のレンダリングまでに時間がかかる。 たまに1MBのファイルのダウンロードに1分以上かかっていることもある。そのため記事のJSONの読み込みが遅く、自分でも少しイラつく。

Netlifyでは日本のCDNがないためスループットが遅いことが指摘されていました。

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

先の記事でも紹介されているFast or Slowで計測すると、USとEU圏は早いが他の地域は快適とは言えないのがわかる。 fos

このブログのアクセスはほぼ日本からですので、日本にCDNがあるサービスに乗り換えたい。

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

Netlifyに類似したホスティングサービスは選択肢が多い。

Netlifyは遅いの表にVercelの料金と実測値(試行数1回)を足した。

servicepriceスループットRTT
Netlify200GB まで無料
以降従量制
約 100KB/s約 50ms
GitHub pages100GB まで無料
超えたら追い出される(!)
数 MB/s約 5ms
Firebase hosting10GB まで無料
以降従量制
数 MB/s約 5ms
Vercel個人アカウントは無料!2.8 MB/s2.3 ms

既に70GB/月ほどなので他のサービスへの移行も難しいと考えていた。 レンタルサーバも含めて色々と探していたところ、Vercelに行き着いた。 まず、Vercelの配信量に上限がないのに驚く。 無料なので試してみた。

Vercelについて

Vercel

NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になったという記事を読んで、Vercelのことを知りました。

  • 個人で使う分には配信量に制限なし!
  • 日本にCDNの拠点があるらしい
  • その他の制限が緩いこと

個人で使う分には制限が緩い。 ビルド実行回数やサーバレス関数の実行数も個人では十分枠がある。

企業や組織での開発では料金がかかるチームプランがあります。 ちょっと割高なのでチームの場合はGitHubPagesのほうが良いかも。

非営利目的の場合に限ってhobby planが利用できるようです。 このブログは広告貼ってあるので営利目的に当たるはず。 ということで速度の計測だけしてやめておく。 使い勝手は良いのでなにか作った際には利用したい。

料金については公式こちらの記事にまとまってます。

Vercelを使ってみる

サイトに行ってアカウント作っている中で、リポジトリとコマンドを指定したら公開できてた。 Netlifyと同じく簡単だし、最初の導入はVercelがさらに簡単で優れているように思う。 そして、公開したページで測定しました。

▼ PageSpeed Insightsで測定した結果。

Vercel (Netlifyと比べて)モバイルパソコン
スコア44 (+3)93 (+20)
First Contentful Paint(FCP)3.8 s (+1.4s)0.8 s (+0.2)
Time to Interactive8.2 s (-6.7s)2.0 s (-1.0s)
Speed Index3.8 s (-12.6s)0.9 s (-1.8s)
Total Blocking Time1,350 ms (-1,920ms)170 ms (-200ms)
Largest Contentful Paint(LCP)4.2 s (+1.7s)0.9 s (+0.2s)
Cumulative Layout Shift(CLS)0.163 (±0\pm0)0.11 (+0.106)

▼ Developer toolで測定した結果。(日曜日の正午くらい)

NetlifyHTML記事のJSON
Size74.9 kB1.8 MB
Waiting (TTFB)38.07 ms (-57.47ms)220.55 ms (-25.21ms)
Content Download49.76 ms (-140.09ms0.63 s (-2.10s)

▼ Netlifyを1としたときのVercelのベンチマーク。

n-v

スコア以外は小さくなったほうが性能は良い。 TTBFが若干減りダウンロード速度が5倍速くなったことで、体感的にもページの読み込み速度が上がった。

▼ VercelのFast or Slowのベンチマーク。(縦軸がNetlifyの結果と違うことに注意) fos-v

満遍なく黄色い。 日本に限って比べると4,300ms -> 3,200くらいに減った。 EUまたはUSでの配信はNetlifyのほうが早いが、その他の地域ではVercelがよさそう。

NetlifyとVercelの比較のまとめ

  • どちらもリポジトリとの連携とデプロイが簡単。
  • Netlifyはスループットが遅い。
  • EUまたはUSでの配信はNetlifyも早いが、その他の地域ではVercelがよさそう。
  • Vercelは個人利用無料だが非営利目的に限る。

日本での利用はVercelよりもNetlifyに分がある。Vercelの利用者が増えていくはず。

今後はサーバを借りてこのブログの公開しようと思う。 サーバを借りたら自由度も高くなるし、一応インフラエンジニアなので自分で試せる環境も必要。 ただし、従量課金がないものを選びたい。

 関連記事

 新着 or 更新記事