Article by: Will McMullen, Markus Hintersteiner
モバイル開発者なら、この苦労をよく知っているはずです。小さなリグレッションが本番環境では大きな問題につながることがあります。しかも、それを修正するのは簡単なパッチを即座に反映すれば済むというものではありません。Webアプリと違って、モバイルアプリの修正にはアプリストアの審査を通す必要があり、場合によってはクライアントとのミーティングに参加し、再現が難しい問題のデバッグに取り組むこともあります。
★1レビューが届く前に、こうした問題を検知することが極めて重要です。幸いなことに、Sentry がこの作業をこれまでになく簡単にしてくれました。
Mobile Vitals ― インサイト機能に新たに追加されたこのツールは、アプリの起動や画面の読み込み、描画が遅い箇所をハイライト表示することで、フリーズやラグによる操作不良を、ユーザーが怒ってアプリを終了してしまう前に迅速に対処できます。React Native、Flutter、Android、iOS ― どのプラットフォームで開発していても活用できます。
では、何ができるのか見ていきましょう。
（ちなみに「Mobile Vitals」については数年前にも取り上げています。この新ツールの仕組みに興味がある方は、こちらの記事もあわせて読むと面白いと思います。）
Mobile Vitals は何を計測しているのか？
1：アプリ起動のパフォーマンス
インスタグラムでレシピを延々と見ていたら、突然カロリー計算アプリの良さそうな広告が表示されました。試しにダウンロードしてみたものの、なぜか初回の起動に20秒、2回目以降でも10秒かかる。さて、あなたはどうしますか？
オレオを食べながら、遅い起動に耐えるか、それとも体重計に戻るか… Sentry はユーザーがイライラしてアプリをアンインストールする「無駄なカロリー消費」を防ぐために、アプリ起動のパフォーマンスを計測します。ここで注目しているのは、コールドスタートとウォームスタートの2つの指標です。
- コールドスタート
第一印象は取り返しがつきません。Sentry はコールドスタートを個別に計測することで、最新のパッチが第一印象を台無しにしないかどうかを確認できます。 - ウォームスタート
iOS や Android のメモリ管理は複雑で、アプリをバックグラウンドで「ウォーム」に保ちながら、一部のタスクを停止することがあります。最近使用したアプリ一覧から再び起動するときには、アプリがすぐに立ち上がることが求められます。
重要なのは、上位の指標だけではありません。ウォームスタートにおいて、Sentry は iOS および Android アプリに対して非常に細かく自動で計測を行います。たとえば iOS では、実行前処理、UIKit、フレームレンダリングなど、さまざまなネイティブ処理を個別に確認でき、アプリの読み込みを遅らせているボトルネックを特定・修正できます。
各画面をクリックすると、その画面に至るまでの最新のアプリ読み込み状況が一覧で表示され、さらに詳細に掘り下げて、どの処理がボトルネックになっているかを確認できます。
2：画面読み込みのパフォーマンス
コメントページを開くたびに毎回5秒かかるようでは、誰もコメントを残しません。話はそれだけシンプルです。
Sentry は各画面の読み込みについて TTID と TTFD を計測することで、UX の重さを軽減するのに役立ちます。
TTID（Time to Initial Display／初期表示までの時間）
画面が最初のフレームを描画するまでの時間を計測します。たとえ背景やテキストの塊だけでも、ユーザーにとってはアプリの“速さ”を感じる重要な指標です。Sentry ではこの値をデフォルトで自動的に計測しています。TTFD（Time to Full Display／完全表示までの時間）
さらに重要なのが、画面全体が読み込まれ、操作可能になるまでの時間です。これは Web の LCP（最大コンテンツの描画）と似たような指標で、初期表示のあとに遅延読み込みされたコンテンツも含まれるため、多くのモバイル画面においてより有用なメトリクスになります。これはデフォルトでは有効化されていませんが、設定は非常に簡単です。
App Start と同様に、画面読み込みについても、任意の画面をクリックすればそのセッション全体のトレースを詳細に確認でき、さらにモバイル CPU プロファイルなどを掘り下げて見ることも可能です（下図参照）。
3：画面レンダリングのパフォーマンス
お気に入りのソリティアのクローンアプリが新しいパッチをリリースしたら、突然フレームレートがガクッと落ちた… そんな経験ありませんか？数年前に買ったばかりのスマホなのに、もう買い替えどき？
いや、きっと、★1レビューを書いてアンインストール、そしてまた Wordle に戻ることになるでしょう。
Sentry は画面レンダリングに関する主要なパフォーマンス指標を、デフォルトで3つ可視化します。
スローフレーム（Slow frames）
1フレームのレンダリングに 16.7ミリ秒（60Hzの画面で1秒間に60フレーム＝1フレームあたり1/60秒）以上かかった場合、「Slow」と見なされます。これにより、UIの応答が遅くなったり、アニメーションがカクついたりします。Sentry は各画面ごとにスローフレームの割合を算出し、どの条件下で遅延やドロップが発生するかをすばやく特定できます。フリーズフレーム（Frozen frames）
さらに深刻なのが、700ミリ秒以上レンダリングにかかるフリーズフレームです。Sentry ではこれを「フリーズ」と定義しています。フレーム遅延（Frame delay）
スローフレームやフリーズフレームによって画面上で蓄積された総「停止時間」のことです。
私たち自身のテストでも、これら3つの指標はモバイルアプリで最も引っかかりを感じる部分のデバッグに非常に有用でした。モバイルセッションのリプレイ機能と組み合わせることで、ユーザーが実際に体験していた「もたつき」の再現と原因の特定をすばやく行うことができました。
なぜこれが重要なのか？
私たちは自分たちの取り組みがインターネットにおける Core Web Vitals ほどのインパクトがあるとは、さすがに思っていません。ですが、これはその第一歩だと思っています。モバイルアプリにおいては、「何を計測すべきか」すら把握するのが非常に難しく、そのうえ「どうやって計測するか」となるとさらに困難です。そこで、私たちのモバイル SDK チームは、いくつかの重要な指標をシンプルかつスケーラブルにモニタリングすることで、モバイルアプリのパフォーマンスを正しく把握できるすばらしい方法を新しく作りました。
単なるモニタリングにとどまらず、Mobile Vitals は「いつ」だけでなく、「なぜ」画面が遅くなるのかを教えてくれます。すべてのインサイトにはトレースが紐づいており、メインスレッド上のコードの遅さが原因なのか、あるいは遅いデータベースクエリや複雑すぎるレイアウトといった、より深い問題なのかを確認できます。
私たちのメンバーである Lazar と Salma が、分散トレーシングを使って、フロントエンドの問題をバックエンド側からデバッグする方法について解説したすばらしいワークショップを収録しました。モバイルデバイスで画面の読み込みが遅いものの、端末上では根本原因を見つけられないという場合には、ぜひ視聴する価値があります。
要するに、Mobile Vitals は以下を可能にするツールです。
モバイルのトップレベルなパフォーマンス指標をモニタリング
改善すべき主要な領域を簡単に特定
トップレベルの指標から、特定の画面における具体的なパフォーマンス問題、そして分散トレースへと掘り下げ、フルスタックにわたって問題をデバッグ・理解する
セッションリプレイやプロファイリングと指標を接続し、ユーザーが何を体験していたのか、どのコードが実行されていたのかを完全に把握できるようにする
目指すべき数値はどのくらい？
「メトリクスが目標になった瞬間、それは良いメトリクスではなくなる」
グッドハートの法則は、今もなお当てはまります。とはいえ、Google と Apple の両社は、アプリの品質、ユーザーのエンゲージメント、アンインストール率など、アプリのパフォーマンスに直接関係する指標が、自社のアプリストアアルゴリズムにおいて重視されていることを公にしています。
とくに Google は、コールドスタートは5秒未満、ウォームスタートは2秒未満を推奨していますが、これはあくまで出発点にすぎません。
目標値をただ設定するだけではなく、Mobile Vitals によるモニタリングは、現在のモバイルアプリの状態を客観的に評価し、改善に取り組むべきかどうかを判断し、パフォーマンスの重要指標を継続的に確認するために役立ちます。これにより、意図せずに重大なパフォーマンス低下をリリースしてしまうことを防ぐことができます。
※クレジット：xkcd
Mobile Vitals を始めるには？
Mobile Vitals のほとんどの指標は自動で計測されるため、モバイルアプリに Sentry SDK を導入済みであれば、基本的にはすぐに使い始めることができます！唯一の例外は **TTFD（完全表示までの時間）**で、画面が完全に描画されたタイミングを Sentry に通知するために API を呼び出す必要があります。
以下は主要な SDK のセットアップガイドです。
さらに一歩踏み込みたい場合は、カスタムのパフォーマンス指標を計測したり、カスタムスパンを追加したり、スパン属性を付与して、重要なユーザー体験におけるスパンメトリクスの計算・モニタリングに活用することも可能です。
ユーザー体験を大切にするモバイル開発者であれば、Mobile Vitals を活用して、単なるトップレベルの指標を超えて、アプリのリリースがデバイスのパフォーマンスにどう影響しているかを測定するのは非常に有効な手段です。Mobile Vitals は、Sentry の有料プランをご利用のすべてのお客様に提供されています。SDK で有効化するだけで、すぐに使い始められます。
Developer プランをご利用中で、Mobile Vitals を試してみたい場合は、14日間の無料トライアルを有効にしてください。何か質問・不安・アイデアがあれば、Discord でぜひお声がけください。
Original Page: Fix slow mobile apps before your users uninstall with Mobile Vitals
IchizokuはSentryと提携し、日本でSentry製品の導入支援、テクニカルサポート、ベストプラクティスの共有を行なっています。Ichizokuが提供するSentryの日本語サイトについてはこちらをご覧ください。またご導入についての相談はこちらのフォームからお気軽にお問い合わせください。
