byPhilipp Hofmann
スローアプリは、悪いレビュー、または強打の競争に左の顧客につながるユーザーを挫折させる.残念ながら、パフォーマンスの問題を見て、解決することは、闘争でありえて、時間がかかることがありえます.
ほとんどの開発者は、Android StudioやXcodeのようなIDE内のプロファイラーを使用して、開発中にコードのパフォーマンスの回復をキャッチするためのボトルネックや自動化されたパフォーマンステストを捜します.しかし、出荷前にアプリケーションをテストするのは十分ではありません.
最も欲求不満のパフォーマンスの問題をキャッチするには、あなたのユーザーのデバイス上で何が起こっているかを探る必要があります.それはあなたのアプリケーションを起動すると、HTTPリクエストの期間、低速と凍結したフレームの数、どのように高速にあなたのビューが読み込まれ、より多くの可視性を意味します.携帯電話の歩哨では、簡単に追加のセットアップ(またはテストデバイスの山を蓄積せずに)リアルタイムでリアルタイムであなたのIOSとAndroidアプリのパフォーマンスを監視することができます.

移動生物

我々は、すべてのモバイルチームがより良い彼らのアプリが実行されている方法を理解するために追跡する必要があります4つのメトリックがあると信じています:コールドスタート、ウォームスタート、スローフレーム、および冷凍フレーム.これらの4つのメトリックは、歩哨のパフォーマンス監視のコア部分として、あなたに重要なパフォーマンスの問題を優先するだけでなく、より速くそれらを解決する根本原因に問題をたどる必要がある詳細をあなたに与えます.

測定アプリの開始

ユーザーがアプリのアイコンをタップすると、それは高速起動する必要があります.iOSでは、Appleはあなたのアプリは、最初のフレームをレンダリングするために最も400 msで取ることをお勧めします.アンドロイドでGoogle Play console コールドスタートが5秒より長くなるか、2秒より長い暖かいスタートをとるとき、あなたに警告します.

コールドスタート:アプリは再起動または更新後初めて起動します.

ウォームスタート:アプリは少なくとも一度起動し、部分的にメモリです.

正確な定義は、プラットフォームごとにわずかに異なります.詳しくはこちらをご覧くださいiOS and Android ドキュメント.
プラットフォームに関係なく、それはあなたのアプリケーションが迅速に楽しいユーザー体験を提供するために起動することが重要です.それはIOSは、Macの触媒、TVOS、およびAndroidで私たちはあなたのアプリケーションがあなたの最初のフレームを描画する必要がどのくらい追跡します.我々は、この情報を取得し、アプリケーションの起動のさまざまな段階のスパンを追加します.以下はIOSからの例です.

Androidでは、アプリの開始の初期段階にフックするトリッキーですので、我々は現在、最初の自動生成UIトランザクションにアプリケーションの起動から1スパンを追加します.それでも、この情報は非常に有用であり、あなたのアプリケーションの開始の期間を改善することができます.

低速で凍結したフレーム

無反応のUIは、アニメーションのヒッチ、または単に冗談をユーザーを悩ませ、ユーザーエクスペリエンスを悪化させる.つの測定は、この不要な経験を追跡する遅いと冷凍フレームです.電話またはタブレットは、1秒につき60のフレーム(FPS)で典型的に貸し出されます.
特に、120 fpsディスプレイがより一般的になっているので、フレームレートはより高いことができます.60 fpsで、すべてのフレームは、レンダリングする16.67 msを持ちます.あなたのアプリケーションがフレームのために16.67 ms以上を必要とするならば、それは遅いフレームです.
凍結されたフレームは、700 msよりも長いを取るUIフレームですスムーズに実行しているアプリケーションのいずれかを経験する必要はありません.SDKはこれらの2つの測定値をすべてのトランザクションに追加します.トランザクションの詳細ビューでは、右側に、ゆっくりと、冷凍、および総フレームが表示されます.

モバイルvitalsモバイルのための歩哨のパフォーマンス監視のコア部分であり、ボトルネックを発見し、あなたのアプリをスピードアップするより多くの方法を解除します.

モバイルパフォーマンス監視

歩哨のパフォーマンス監視の目的は、複数のサービス間でアプリケーションのパフォーマンスを追跡することです.モバイルvitalsを測定するために,sdksはトランザクションとスパンからなる分散トレースを捕捉する.
分散追跡は、分散サービスを通じて何が起こっているかを理解するために使用される標準的な技術ですが、モバイルアプリケーションにはまだ比較的新しいです.トレースは、あなたが署名したり、アプリケーション内のビューを読み込むように測定する操作を表します.両方の言及操作だけでなく、アプリケーションをバックエンドのアクションを伴います.それぞれのトレースは一つ以上のトランザクションから成ります.そして、それは1つ以上のスパンを含むことができます.たとえば、ログインのトレースは、アプリケーションのトランザクションとバックエンドサービスの2つのトランザクションを含めることができます.
すべてのトランザクションには、ファイルの読み込みやデータベースのクエリのように、単一の単位を表すいくつかのスパンが含まれます.スパンには親子関係があります.つまり、スパンは複数の子と孫を持つことができます.以下に例を示します.

あなたがこれらの概念に深く掘り下げたいならば、チェックしてくださいDistributed Tracing 101 for Full Stack Developers 我々の非常に自身によって、ベンVinegar、エンジニアリングのVP.このブログ記事については、トランザクションにフォーカスし、迅速に2つの子スパンを持つトランザクションを作成する例を見てみましょう.

let transaction = 
    SentrySDK.startTransaction(name: "Load Messages", operation: "ui.load")

let getMessagesSpan = 
    transaction.startChild(operation: "http", description: "GET /my/api/messages")
getMessages()
getMessagesSpan.finish()

let renderMessagesSpan = 
    transaction.startChild(operation: "ui", description: "Render Messages")
renderMessages()
renderMessagesSpan.finish()

// Finishes the transaction and sends it to Sentry
transaction.finish()

コードを実行した後、sentryのトランザクションを見ることができます.

豊富なトランザクションを手動で作成するコードの多くを書く必要があります.だからこそ、我々は自動計装で簡単に物事を作った.あなたはまだあなたが必要なパフォーマンスの洞察にアクセスしながら自分自身を書くと維持コードの頭痛を保存することができます.

自動計装

自動計装は、あなたのビューがどのようにレンダリングするのにかかるかについて調査することができます、そして、HTTP要求は終わります.アップルのSDKは、iOS、TVOS、およびMacの触媒のUiViewControllerのトランザクションを生成し、すべてのプラットフォーム上でのHTTPリクエストを送信するためのスパンを作成します.Android用SDKは、活動とフラグメントのトランザクションをキャプチャし、OkHTTPの統合を提供します.Response Navigationルータを使用しているとき、自動的にトランザクションを捕えて、反応してください.次の月に、我々はフラッターのサポートを加えることに取り組んでいます.
ここでは自動生成されたトランザクションの例ですUIViewController . 以下のスクリーンショットで見ることができるように、SDKは各ライフサイクルメソッドのスパンを作成します.インviewWillAppear , スパンが追加されたHTTPリクエストをオフにします.私たちのSDKは自動的にデータベースをクエリするためのスパンを追加しないでください.したがって、私は手動でスパンを加えなければなりません.我々はこれを使用して達成することができますSentrySDK.span 現在のアクティブなスパンとコールにアクセスするにはSentrySDK.span.startChild を返します.

上記のトランザクションで、私はどこで私のボトルネックを学ぶUIViewController そうです.The viewDidLoad 方法は、それが完全に70 msを要するので、疑わしく見えます、そして、私はそれを調査しなければなりません.コードを見た後、私は、メインスレッド上で注目すべきI/Oを行っていることを理解しています.また、データベースからいくつかのエントリをロードするには、HTTPリクエストよりも長くかかります.I/Oを動かした後にviewDidLoad バックグラウンドスレッドと私のデータベースクエリをスピードアップするためのインデックスを追加するには、トランザクションは今よりよく見えます.もちろん、HTTP要求の速度はネットワーク条件によって異なりますが、私は制御可能なボトルネックをクリアしました.これは大きな改善です.

トランザクションの持続時間は、多くの状況のために大いに変化することができます.個々のトランザクションを介してステップを使用すると、あなたのアプリが速くなったり、減速した場合に理解するために明確な画像を与えません.したがって、我々は、トランザクションの持続時間が時間とともにどのように変化するかを調査するためにグラフを提供します.

歩哨また、可能性を低速、最速、異常値、または最近のトランザクションを探索するには、悲惨さを見つけるか、ユーザーの経験を迅速に喜びを提供しています.

あなたの取引を調査する他の多くの可能性とともに、歩哨は取引概要ページの下で取引の間に捕えられる関連したエラーをリンクします.

自動生成トランザクションを手動トランザクションと組み合わせるので、モバイルvitalsだけでなく、などの他のメトリックを見ることができる豊富なデータをロック解除User Misery あなたのアプリケーションのパフォーマンスに完全なビューを与える.
詳細については、当社のドキュメントをチェックアウトApple , Android , and React-Native そして、モバイルで自動パフォーマンス計器を試してみる.気を付けろベータ版のリリースFlutter GitHub レポ.我々はすぐにフラッターにこれらの機能を追加する計画があります.