概要

このレッスンを受講する前に

以下のレッスンを修了していると、ここでの学習効果が一層高まります。

•  mablアプリのご紹介
•  レポート：テスト／プラン／ワークスペース

学習目標 🧠

このレッスンを修了すると、以下の知識や技能が身につきます。

•  mablのパフォーマンスインサイトの基本を理解する
• パフォーマンスデータのダウンロード方法を学ぶ
• 「スピードインデックス」およびそのパフォーマンスとの関連性を理解する
• パフォーマンスデータを用いてスピードインデックスの経時的変化を調べる方法を探究する

パフォーマンスはなぜ重要なのか？

• パフォーマンス指標は、アプリケーション内のページ移動中における顧客やユーザーの体験についての貴重な洞察を提供します。アプリケーションの読み込みスピードは速いですか？それとも時間がかかってユーザーはしびれを切らしていますか？パフォーマンス データを活用することで、スピードインデックスを最適化し、ユーザー体験全般を向上させるためのステップを踏むことができます。
•  mablテスト出力におけるパフォーマンスデータは、アプリケーションで起こりうるパフォーマンスリグレッションを特定するのに役立ちます。

注：

現時点では、パフォーマンスデータが利用できるのはChrome でのテスト実行でのみとなっています。

パフォーマンスインサイトとは？

 スピードインデックス は、エンドユーザーがアプリケーションの読み込みスピードをどのように感じているかを示すものです。 アプリケーションのページ読み込みパフォーマンスを秒単位で追跡し、（ゴルフのスコアと同じように）スコアは低ければ低いほど良いとされます。

スピードインデックスの詳細については、こちらをご覧ください。

mablはステップトレースをキャプチャしてスピードインデックスにアクセスし、このパフォーマンス指標を自動計算します。複数のパフォーマンスデータ表示方法があります。

○      リリースカバレッジダッシュボードでアプリケーション全体のパフォーマンスを監視する

■    法人ユーザーは、アプリケーション読み込み平均時間を含むこのダッシュボードにアクセスできます。特定の日付範囲や環境によるフィルタ検索が可能です。

■      [Coverage] に移動し、下にスクロールして [Average app load time（アプリ読み込み平均時間）] を表示します。

• テストまたはフローのパフォーマンスを経時表示
• ユーザー作成のmabl テストまたはフローの [Performance] タブで、過去 90 日間の特定のテストまたはフローのアプリ読み込み時間累積データを表示できます。
• 個々のテストステップのパフォーマンスの表示

mablのパフォーマンスデータの活用方法は？

はじめる

まず、私たちのアプリケーションの一つを使って、経時的なパフォーマンスを調べてみましょう。[Tests] タブからブラウザー テストを選択し、[Performance] タブに移動します。画面右上のフィルタ検索機能を使い、必要に応じて特定の環境をフィルタ検索できます。（注意: Chrome で実行してください。）

特定の日付についての詳細データを表示したい場合は、その日付にカーソルを合わせるとツールチップが現れます。

（スピードインデックスが大幅な変化を見せている場合など）特定の日付についてよく調べたい場合があると思います。調べたい日付を覚えておいて [Run history] タブに移動します。その日付からのテスト実行を選択すると、段階的なテスト出力データを閲覧可能です。

考慮すべきその他のインサイト

特定の日付にスピードインデックスに変化が見られた場合、チームがテストカバレッジを変更したかどうかを調査できます。[Activity Feed] （[Settings] → [Activity Feed]）に移動し、ワークスペース内のアクティビティを確認します。特定の日付のデータをフィルタ検索できます。

より詳しく調べるためにステップトレースをダウンロード

 右上コーナーの [Actions] ドロップダウンメニューから[download the step trace]を選ぶと、JSONファイルのダウンロードが開始されます。ファイルのダウンロードが完了したら、ファイルをChrome 開発ツールにドラッグ＆ドロップし、アプリケーションのパフォーマンスについてより詳しく調べることができます。

注：Chromeデベロッパーツールのステップトレースは、ステップ実行中にページがどのように機能したかを確認するのに役立ちます。タイムラインにカーソルを合わせると、スクリーンショットが表示されます。

Chromeブラウザでのステップトレース閲覧

• Chrome デベロッパーツールを開き、ページをチェックします。
•  [Performance]タブに移動します。
• ステップトレースのダウンロード （JSON ファイル） を [Performance]タブにドラッグ ＆ドロップすると、詳しく調べることができます。
• データダウンロードについてさらに詳しくはガイドライン「パフォーマンスデータのダウンロード」をご覧ください。

まとめ

復習

このレッスンで学んだこと：

• スピードインデックスは、アプリケーションのページ読み込みパフォーマンスを示す指標で、エンド ユーザーがアプリケーションの読み込みスピードをどのように感じるかを理解するのに役立ちます。スコアは低いほど良いとされます。
• mablで、ユーザー作成によるテストの[Performance]タブから経時パフォーマンスを調査する方法、また、テスト出力の [Logs] タブで個々のテストステップのパフォーマンスを調べる方法。

Chromeデベロッパーツールでmablからステップトレースをダウンロードして使用し、アプリケーションパフォーマンスを調べ、潜在的リグレッションを特定する方法。

ここからできること

アプリケーション全体のパフォーマンスデータを調ヘルことができます！経時パフォーマンスを閲覧中にリグレッションが見つかったら、Chromeデベロッパーツール内でさらに詳しく調べるために、テスト出力データを調べ、ステップトレースをダウンロードしましょう。