パフォーマンステスト

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

このページでは、アプリケーションのパフォーマンスを測定するために使用できるツールについて説明します。

読み込みパフォーマンス

pwa-starter-kitは、PRPLパターンを使用して構築されています。これは、PWAの構築と提供のための新しいアプローチです。パフォーマンスに重点を置いています:

遅延読み込み

遅延読み込み(Lazy loading)は pwa-starter-kitの重要なポイントです。各ルートが画面に何かをレンダリングするために必要なものだけをロードし、後で追加作業が行われるからです。これが行われるアプリにはいくつかの場所があります:

ルートの遅延読み込み

各ルートの実際のJavaScriptコードは、そのルートが要求されている場合にのみロードされます。これはloadPage action creatorで行われます。これはいつでもナビゲーションのたびに呼び出されます。

reducersの遅延読み込み

ルートがReduxストアに接続されている場合、遅延ロードされているので、そのレデューサーも同様にする必要があります。 Reduxと状態管理ページでは、reducersの遅延読み込みに対応するようにストアを設定する方法が説明され、pwa-starter-kitでどのように行うのかのサンプルが提供されています。

パフォーマンス測定

パフォーマンスの測定と自動化に役立ついくつかのツールがあります。

Lighthouse

Lighthouseは、Webページを測定し改善するためのオープンソースツールです。これはChrome DevTools拡張モジュールまたはノードモジュールとして提供されるため、コマンドラインで実行できます(他の自動ノードテストと統合することもできます)。一度それが走ったら、それは全体的なスコアを提供し、改善の為に提案をしてくれます:

screenshot of lighthouse results

WebPageTest

WebPageTestは、遅い3G接続の実際のMoto G4デバイスでページをロードし、そのシナリオでのページの負荷パフォーマンスに関する詳細レポートを提供するアプリケーションです。実世界のテスト環境でのアプリケーションの動作を確認することは非常に便利です。

例えばここpwa-starter-kitのテスト結果があります。

特に、フィルムストリップビューは非常に便利です。アプリケーションが実際にスクリーンに最初にペイントする時のタイムラインを示します:

screen shot 2018-05-02 at 11 00 46 am

リソースの読み込みのインタラクティブなタイムライン、およびそのリクエストの生成元: screen shot 2018-05-02 at 11 01 02 am