サポート

PWA（プログレッシブウェブアプリ）のパフォーマンス計測

 　Steve Souders

2016年9月12日月曜日

プログレッシブウェブアプリ(PWA)は、Webの優れた機能と最新機能を組み合わせて、ネイティブアプリに匹敵するエクスペリエンスを提供するものです。また 優れている点の１つがデスクトップでも動作することです。PWAは、Webが動作するあらゆるところで機能します。 しかし、 あなたは「それは正しくない！」というかもしれません。PWAは、全ブラウザにはそろっていません。しかし、PWAは「プログレッシブ」（進歩的）なので、使用可能な機能を考慮して、可能な限り最高のエクスペリエンスを提供するために古いブラウザに適応することができます。

これらの勝利の要因を考えると、PWAがウェブ開発で最も人気のある動きということに驚きはしません。 PWAには、すでに多くの会議、ビデオがあり、多くのエバンジェリストがいます。しかし、彼らはPWAのパフォーマンスのテストとその追求にはあまり関心がないようです。 SpeedCurveチームでは、PWAのパフォーマンスにおけるギャップについて議論しました。 これに併せて、SpeedCurveに新機能（既存の機能と組み合わせて、PWAのパフォーマンスを評価するツールキット）を追加しました。

 

PWAオフラインスクリプト

「PWAのパフォーマンスを測定する鍵は何ですか？」という問いには、まず パフォーマンスに最も大きな影響を与えるPWAの主要機能についてを見てみましょう。

  • responsive –  PWAはさまざまなデバイスとビューポートサイズで動作します
  • progressive – 欠けている機能に関係なく、さまざまなブラウザに適応します
  • offline -（初回の軽微なインストール後に）オフラインで作業する

このうち最も面倒なのは「オフライン体験」のテストです。 SpeedCurveはWebPageTestの上に構築されているため、スクリプト言語を使用してオンラインでPWAを読み込み、ネットワークへのアクセスなしに、再度読み込みをします。 PWAの例として、Pokedexを使用したスクリプトを紹介しましょう。

logData 0
navigate https://www.pokedex.org/
execAndWait document.body.innerHTML=””
logData 1
blockDomainsExcept unused.zz
navigate https://www.pokedex.org/

オンライン時の初回の読み込みには、データロギングをオフにしてURLに移動します。 フィルムストリップをクリーンにするために、ロードの間にボディコンテンツをクリアします。 次に、ログオンしてURLに再度移動しますが、今回はオフラインです。 オフライン体験は、すべてのドメインをブロックして作成されます。 これにより、ブラウザに対し強制的にオフライン機能を代替します。

 

レスポンシブ、プログレッシブ、オフライン

SpeedCurveが主要なPWA機能をどのように測定するかを見てみましょう。 上記のPWAオフラインスクリプトを使用して、Pokedexがネットワークなしでロードしていることを確認できます。 Samsung Galaxy S IIIのPokedexテスト結果を見ると、本当に特徴的ということがわかります。 フィルムストリップはありますが、ウォーターフォールチャートはありません！ また、気づくのがStart Renderが0.1秒です！Pokedexは、オフラインでの経験に戻っても、すぐにロードされます。 これは、ウェブ開発者（ユーザー）の夢の実現で「オフラインでも速い」ということです。

SpeedCurveのレスポンシブなダッシュボード「Pokedex」は、PWAのレスポンシブとプログレッシブの両方の動きに光を当てています。 オフラインであっても、IE 11を除く全ブラウザにアプリが読み込まれます。サイトも同様に反応します。 左側のナビゲーションは、大きなビューポートにのみ表示されます。 （注：SpeedCurveはモバイルデバイス用のエミュレーションを使用しているため、オフラインをサポートしていないため、iOSをテストする価値はありません）。

 

スクリプトテンプレート

マークはSpeedCurveのクールな「スクリプトテンプレート」機能を追加して、このPWAオフラインスクリプトやその他の重要なスクリプトを簡単に作成できるようにしました。

PWAオフラインスクリプトに加えて、これらの他のスクリプトテンプレートがあります。

  • Repeat View – キャッシュがいっぱいになった際パフォーマンスを確認します。
  • Block Third Party – このスクリプトはサードパーティのすべての要求をブロックします。 これは、自分が管理するページの部分に集中し、外部リソースのばらつきをなくしたいチームにとって役立ちます。
  •  user agentに”PTST”を追加しない – デフォルトでは、WebPageTestにUser-Agentリクエストヘッダーに文字列 “PTST”が含まれていますが、一部のWebサービス（特に広告ネットワーク）が別の応答を返すことがあります。 このスクリプトを使用することで、第三者が現実世界でのやり方で行動することが保証されますが、独自の分析でテストを除外することもできなくなります。

注：スクリプトUIを表示するには、SpeedCurve Enterprise Planが必要です。 エンタープライズプランをお持ちでない場合は、WebPageTestのPWAオフラインスクリプトを試すことができます。

Happy PWA

PWAオフラインスクリプトのおかげで、PWAがネットワークなしでロードされていることを確認できます。 SpeedCurveでは、PWAは、すべてのブラウザでプログレッシブであり、すべてのビューポートサイズに対応していることがわかります。 そして、最初の負荷の経験を忘れないでください！ SpeedCurveでテストするのは簡単です（スクリプトなしでURLを入力するだけです）。 PWAができるだけ早く完全にロードされるようにして、ユーザーがオフラインになった場合でもすぐに作業できるようにすることが重要です。

PWAが反応的で、進歩的で、オフラインで作業することを確認することが重要です。 SpeedCurveは、PWAの動作状況を把握し、すべてのデバイスでユーザーに高速で楽しいエクスペリエンスを提供する優れた方法です。

関連記事