Web サイトのパフォーマンスでもオブザーバビリティ! Cloudflare Observatory を試してみた

Web サイトのパフォーマンスでもオブザーバビリティ! Cloudflare Observatory を試してみた

CDN でもオブザーバビリティの時代です。
Clock Icon2023.06.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ウィスキー、シガー、パイプをこよなく愛する大栗です。

今週 Cloudflare は Speed Week 2023 と題して、パフォーマンス向上に関する新しい発表を行っています。この中で Web サイトのパフォーマンスについてオブザーバビリティを導入する Cloudflare Observatory が発表されたため試してみます。

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 を中心としたものです。デスクトップとモバイルの結果も切り替えられます。

速度テストの結果の下方には、Lighthouse の各項目の状況とパフォーマンスを向上させるための推奨事項が表示されます。

推奨事項

推奨事項の内容を確認すると、その推奨内容の詳細が書かれており、ボタンをクリックして設定画面へ遷移できます。

リアルユーザーモニタリングの設定

次に上部で実際のユーザー測定値タブに遷移します。ボタンをクリックして RUM を有効化します。

RUM を有効化して実際のユーザーの情報が収集され表示されます。指標は合成テストと一部異なり以下のようになります。国別での指標を世界地図上で表示します。

さいごに

Cloudflare で CDN を含む Application Service を利用する目的はパフォーマンスとセキュリティだと思います。今までセキュリティは詳細なログや分析機能で継続的な監視が行えていました。しかしパフォーマンスについては継続的な監視を考えていなかったのではないでしょうか。Cloudflare Observatory により、パフォーマンスを上げるための設定やサイトの改修等によるパフォーマンスの変化を継続的に把握することが可能になりました。まだ利用可能になったばかりの機能ですが、運用しているサイトでは必須の機能だと思います。

Observatory の結果を元に Cloudflare を有効に活用していきましょう。

この記事をシェアする

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.