Web サイトのパフォーマンスでもオブザーバビリティ！ Cloudflare Observatory を試してみた
ウィスキー、シガー、パイプをこよなく愛する大栗です。
今週 Cloudflare は Speed Week 2023 と題して、パフォーマンス向上に関する新しい発表を行っています。この中で Web サイトのパフォーマンスについてオブザーバビリティを導入する Cloudflare Observatory が発表されたため試してみます。
- Webサイトの高速化、顧客の増加：Cloudflare Observatoryは、お客様のビジネスの成長をサポートします
- Faster website, more customers: Cloudflare Observatory can help your business grow
Cloudflare Observatory
Cloudflare Observatory はリアルユーザーモニタリング（RUM）データと異なる地域からのテストによって、Web サイトのパフォーマンスを簡単に管理できる機能です。Web サイトのパフォーマンスの問題を特定して、解決するための推奨事項まで提示してくれます。
パフォーマンステストには大きく分けて、合成テストとリアルユーザーモニタリング（RUM）テストの2種類の方法がありますが、Observatory ではその両方に対応しています。合成テストではユーザーの操作をシミュレートしてパフォーマンスを監視します。RUM テストでは、実際のユーザーが Web サイトにアクセスするときのデータを収集して実際の体験を補足します。その2種類のデータを使ってパフォーマンスを把握することができます。
元々 Cloudflare では WebPageTest によるパフォーマンス計測を行っていましたが、高い汎用性とコミュニティで広く採用されているため Observatory では Google Lighthouse に置き換えています。
リアルユーザーモニタリング（RUM）では、軽量な JavaScript ビーコンを使用して Observatory が使用する情報を収集します。メトリクスを収集するために cookie や localStorage は使用しません。
プランごとの割り当て
| プラン | アドホックテスト | 繰り返しテストの数 | 繰り返しテストの頻度 | 地域 |
|---|---|---|---|---|
| Free | 5 | 1 | 毎週 | アイオワ（米国） |
| Pro | 10 | 5 | 毎日 | 世界 21 地域 |
| Business | 20 | 10 | 毎日 | 世界 21 地域 |
| Enterprise | 50 | 15 | 毎日 | 世界 21 地域 |
Free プラン以外で実行可能な地域は以下となります。
- アイオワ（米国）
- サウスカロライナ（米国）
- 北部バージニア（米国）
- ダラス（米国）
- オレゴン（米国）
- ハミナ（フィンランド）
- マドリード（スペイン）
- サン・ギスラン（ベルギー）
- エームスハーヴェン（オランダ）
- ミラノ（イタリア）
- パリ（フランス）
- 彰化県（台湾）
- 東京（日本）
- 大阪（日本）
- テルアビブ（イスラエル）
- ロンドン（イギリス）
- ジュロンウェスト（シンガポール）
- シドニー（オーストラリア）
- フランクフルト（ドイツ）
- ムンバイ（インド）
- サンパウロ（ブラジル）
料金
各プランの利用可能な範囲で Observatory は無料です。
やってみる
Observatory を実際に試してみます。
事前準備
パフォーマンスを計測するためのサイトは Cloudflare で登録している必要があります。
ここでは Drupal を起動しました。手順としてはこちらの内容です。無駄に重い画像を 10 個掲載したページを作成しました。
合成テストの設定
Cloudflare の各ゾーンのコンソールで左メニューの[Speed]ー[速度テスト]（英語表示では Observatory）を開きます。計測対象ページの URL、計測元のリージョン、計測頻度を設定して、テストの実行ボタンをクリックします。ここでは東京から計測して、頻度は毎日にしました。
数十秒待ちます。
速度テストの結果が表示されます。表示される指標は Core Web Vitals を中心としたものです。デスクトップとモバイルの結果も切り替えられます。
- Time To First Byte (TTFB)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Time to Interactive (TTI)
- Total Blocking Time (TBT)
- Speed Index
- Cumulative Layout Shift (CLS)
速度テストの結果の下方には、Lighthouse の各項目の状況とパフォーマンスを向上させるための推奨事項が表示されます。
推奨事項の内容を確認すると、その推奨内容の詳細が書かれており、ボタンをクリックして設定画面へ遷移できます。
リアルユーザーモニタリングの設定
次に上部で実際のユーザー測定値タブに遷移します。ボタンをクリックして RUM を有効化します。
RUM を有効化して実際のユーザーの情報が収集され表示されます。指標は合成テストと一部異なり以下のようになります。国別での指標を世界地図上で表示します。
- Time To First Byte (TTFB)
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- Interaction to Next Paint (INP)
- First input delay (FID)
さいごに
Cloudflare で CDN を含む Application Service を利用する目的はパフォーマンスとセキュリティだと思います。今までセキュリティは詳細なログや分析機能で継続的な監視が行えていました。しかしパフォーマンスについては継続的な監視を考えていなかったのではないでしょうか。Cloudflare Observatory により、パフォーマンスを上げるための設定やサイトの改修等によるパフォーマンスの変化を継続的に把握することが可能になりました。まだ利用可能になったばかりの機能ですが、運用しているサイトでは必須の機能だと思います。
Observatory の結果を元に Cloudflare を有効に活用していきましょう。
