Cloudflare Pagesを試す
2021-03-06
I tried Cloudflare Pages.
3/3にCloudflare Pagesのオープンベータ版が利用可能になりました。
Cloudflare Pagesとは
Cloudflare PagesはCDN屋さんのCloudflareが提供する静的サイトのホスティングサービスです。
同様のサービスにはNetlifyとVercelがあり、Cloudflare Pagesはその直接の競合となります。
去年末にアナウンスはされていましたが、そのベータ版が利用可能になりました。
今回は実際にCloudflare PagesにGrafhouseのランディングページをデプロイして、Firebase Hostingにデプロイ中の本番サイトとパフォーマンスを比較しました。
ランディングページはGatsbyJSで作成しました。
- Grafhouse landing page(Firebase Hosting)
- Grafhouse landing page(Cloudflare Pages)
Cloudflare Pagesにデプロイする
使い方は簡単で、Cloudflareのダッシュボード上でGithubのリポジトリを選択するだけです。
Cloudflarのダッシュボードにアクセスしてページ ベータ版を選択します。
プロジェクトを作成をクリックします。
関連付けるGithubリポジトリを選択します。アカウントを追加をクリックします。
Githubに移動するので関連付けるリポジトリを選択します。
Cloudflareに戻るので選択したリポジトリにチェックを入れて、セットアップの開始をクリックします。
フレームワーク プリセットを選択します。ランディングページはGatsbyJSなのでGatsbyを選択します。
ビルドコマンドとビルド出力ディレクトリを確認します。↑でGatsbyを選択したので変更する必要はありませんでした。保存してデプロイするをクリックします。
ビルドが始まるので待ちます。
これでデプロイ完了です。アカウントのトップページに戻り改めてPagesのページに戻るとステータスが確認できます。
ドメイン(grafhouse.pages.dev)をクリックするとデプロイしたページが表示されます。
ページパフォーマンス
上にも書きましたがGrafhouseのランディングページはFirebase Hostingにデプロイ中です。Cloudflare Pagesにデプロイしたものとページパフォーマンスを比較しました。
GTmetrixとLighthouseを使いました。
GTmetrix
どちらもWeb Vitalsの目標値(1.2s/150ms/0.1)は全て達成していますが、全体的なスコアはCloudflare Pagesが上回りました。
Lighthouse
LighthouseでもパフォーマンススコアはCloudflare Pagesが上回りました。
まとめ
体感できるほどではないですが、ページパフォーマンスは現在使っているFirebaseを上回りました。
また、Firebase Hostingの無料枠ではストレージ1GB / ダウンロード10GB/月 の制限がありますが、Cloudflare Pagesは最大ファイル数20,000 / ダウンロード無制限/ 500ビルド/月 となっています。
このブログは頻繁に更新してるし、ファイル数が多いのでCloudflare Pagesは不向きですが、アプリのランディングページ程度ならダウンロード帯域の制限がないので良いかもしれません。