WebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピ

WebPageTestは、オンラインツールであり、開発者がWebサイトのパフォーマンスを確認できるように設計されたオープンソースプロジェクトです。 TheodoのWebパフォーマンスの伝道者として、私は毎日それを使用しています。私は、膨大なWeb開発コミュニティ、特にWebパフォーマンスワーカーに無料で提供される機能に常に驚いています。

ただし、シングルページアプリケーション（通常、React、Vue、Svelte、またはその他のフロントエンドフレームワークで書かれている）を扱うとき、物事はすぐに困難になります。ログインページをどのように渡すことができますか？ほとんどの操作がクライアントで発生し、指摘する特定のURLがない場合、ユーザーフローのパフォーマンスをどのようにテストしますか？

この記事では、これらの問題を解決する方法（およびその他）を見つけて、WebPagetestを使用して単一ページアプリケーションのパフォーマンスをテストする準備ができています。

注：この記事では、WebPageTestのいくつかの高度な機能を特定して理解する必要があります。

Webパフォーマンスに興味があり、WebPageTestの適切な紹介が必要な場合は、次のリソースを強くお勧めします。

• CSS-Tricksで「WebPagetestとそのAPIの使用方法」は、EdouardoBouçasによって書かれたWebPagetestの機能の優れた概要です。
• 「F1で最速のウェブサイトを所有しているのは誰ですか？」 Jake Archibaldは、WebPagetestの結果を分析することで、F1テーマのケーススタディでパフォーマンスを改善するのに役立つ方法を説明しています。

単一ページアプリケーションのテストの問題

シングルページアプリケーション（SPA）は、Webサイトの仕組みを根本的に変更します。バックエンド（Django、Rails、Laravelなど）にほとんどの重いリフティングを行い、「使用していない」HTMLをブラウザに渡す代わりに、SPAはJavaScriptに大きく依存してブラウザにHTMLを計算させます。このようなフロントエンドフレームワークには、React、Vue、Angular、またはSvelteが含まれます。

WebPageTestのシンプルさは、開発者への魅力の一部です。https ：//www.php.cn/link/d346c2bc24a74cc35bc7c844444444444925 url、しばらく待ってください、そしてvila ！パフォーマンスレビューの準備が整いました。

スパを構築していて、そのパフォーマンスを測定したい場合は、セレン、サイプレス、操り人形師などのエンドツーエンドのテストツールに頼ることができます。ただし、これらのツールはどれも、WebPagetestが提供するほどパフォーマンス関連で使いやすいツールではないことがわかりました。

ただし、WebPagetestでSPAをテストするのは複雑です。

多くのスパでは、ほとんどのサイトはログインフォームで保護されています。 Netlifyを使用してサイト（個人のブログを含む）をホストすることがよくありますが、アプリでの私の時間のほとんどは、すべてのWebサイトをリストするダッシュボードなど、認証されたページにあります。私のダッシュボードの情報は私のためであるため、 https：//www.php.cn/link/link/b301bbff368b7a75043a2b9925a530ffにアクセスしようとする他のユーザーは、私のダッシュボードが表示されませんが、ログインまたは404ページにリダイレクトされます。

WebPageTestにも同じことが言えます。 https://www.php.cn/link/16B2399CCD1419DE9E098D7ABF025EB6にダッシュボードURLを入力すると、監査はログインページに対して実行されます。

さらに、Simple WebPagetest監査を使用すると、SPAでの動的相互作用のパフォーマンスをテストすることはできません。

これが例です。 Nuageは、ユニークなアニメーションと美しいダイナミックなインターフェイスを備えたドメイン名レジストラです。購入するドメイン名を検索すると、非同期コールがリクエストの結果を取得し、結果が取得されたときに結果を表示します。

上記のビデオでは、検索用語を入力するとページのURLが変更されないことに気付いた場合があります。したがって、コンテンツの検索アクションを指す適切なURLがないため、簡単な検索ページで行ったように、簡単なWebPagetest監査を使用して検索エクスペリエンスのパフォーマンスをテストすることは不可能です。

WebPagetestを使用すると、SPAパラダイム変換で他のいくつかの問題が発生する場合があります。

• クリックしてWebを閲覧するのは通常、新しいURLに行くよりも難しいですが、スパの唯一のオプションである場合があります。
• SPAの認証は、通常、従来のCookieの代わりにJSON Webトークンを使用して実装されます。これは、WebPageTestで認証Cookieを直接設定するオプションを除外します（ここで説明します）。
• SPAにReactとRedux（またはその他のアプリケーション状態管理ライブラリ）を使用すると、.innertext（）または.value（）を使用してフィールドの値を設定することは、アプリケーションストアに転送できないため、フォームをプログラムで記入するのが難しいことを意味する場合があります。
• API呼び出しは通常非同期であり、さまざまなローダーを使用して負荷ステータスを示すために使用できるため、これらのローダーは、ページが実際にロードされていないときに実際にロードされていると信じるようにWebpageTestを「スプーフィング」する場合があります。これが長いAPI呼び出し（5秒以上）で発生するのを見てきました。

複数のプロジェクトでこれらの問題に遭遇したので、それらに対処するためのさまざまなヒントとテクニックを提案しました。

要素を選択するさまざまな方法

DOM要素を選択することは、セレンでのエンドツーエンドのテスト、またはWebPagetestでのパフォーマンステストなど、さまざまな自動化テストの実行の重要な部分です。 DOM要素を選択すると、リンクとボタンをクリックし、フォームに入力し、アプリケーションをより一般的にやり取りできます。

Simple Document.getElementsByClassNameまで、ネイティブブラウザAPIを使用して特定のDOM要素を選択する方法はいくつかあります。このセクションでは、複雑さを高める順に、3つの異なる可能性について説明します。

ID、className、またはtagnameを介して要素を取得します

選択する要素（たとえば、Clear Cartボタン）に特定の一意のID（たとえば＃empty-cart）、クラス名、またはページ上の一意のボタンがある場合は、getelementsbyメソッドを使用してクリックできます。

 <code>const emptyCartButton = document.getElementById("empty-cart"); // 或document.getElementsByClassName(".empty-cart-button")[0] // 或document.getElementsByTagName("button")[0] emptyCartButton.click();</code>

ページに複数のボタンがある場合は、要素と対話する前に結果リストをフィルタリングできます。

 <code>const buttons = document.getElementsByTagName("button"); const emptyCartButton = buttons.filter(button => button.innerText.includes("Empty Cart") )[0]; emptyCartButton.click();</code>

複雑なCSSセレクターを使用します

相互作用する特定の要素には、ID、クラス、またはタグに興味深いユニークネス属性がない場合があります。

この問題を解決する1つの方法は、この独自性を手動で追加することです。 ＃perftest-empt-cart-buttonを特定のボタンに追加することは、Webサイトのタグ付けに無害であり、テストのセットアップを大幅に簡素化できます。

ただし、このソリューションは不明瞭な場合があります。アプリケーションのソースコードにアクセスできない場合や、新しいバージョンをすばやく展開できない場合があります。これらの場合、document.queryselector（およびそのバリアントdocument.queryselectorall）を理解し、複雑なCSSセレクターを使用すると便利です。

document.queryselectorを使用して実装できる例を次に示します。

 <code>// 选择具有`name="username"` 属性的第一个输入document.querySelector("input[name='username']"); // 选择所有数字输入document.querySelectorAll("input[type='number']"); // 选择</code>
document.queryselector（ "セクションH1"）;

// 選ぶ<nav> の最初の直接の子<img  alt="WebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピ" >
document.queryselector（ "nav> img"）;</nav>

ここで興味深いのは、CSSセレクターの完全な機能を使用できることです。常に便利なMDNセレクターリファレンステーブルを表示することをお勧めします！

究極のソリューション：XPathセレクター

XML Path言語（XPath）は非常に強力ですが、上記のCSSソリューションよりも習得して維持することは困難です。私はそれを使用する必要はほとんどありませんが、それが存在することを知ることは絶対に有用です。

そのような例の1つは、テキスト値に基づいてノードを選択し、CSSセレクターを使用できない場合です。これらの場合に使用できる便利なコードスニペットは次のとおりです。

 <code>// 返回具有确切内容“2015 年9 月16 日”的<span>document.evaluate( "//span[text()='Sep 16, 2015']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;</span></code>

この記事の目標から逸脱するので、私はそれをどのように使用するかについて詳しく説明しません。公平を期すために、私は上記のパラメーターの多くの意味さえ知りません。ただし、このトピックについて読みたい場合は、MDNドキュメントをお勧めします。

一般的に使用されるケースプラン

次のセクションでは、シングルページアプリケーションの共通ケースでパフォーマンスをテストする方法を学びます。私はこれらを私のテストスキームと呼びます。

これらのシナリオを説明するために、React Admin Demo Webサイトを例として使用します。 React Adminは、管理アプリケーションとバックエンドオフィスシステムを構築するために設計されたオープンソースプロジェクトです。

これは典型的なスパの例です（名前が示唆するように）Reactを使用し、リモートAPIを呼び出し、ログインインターフェイスがあり、多くのフォームがあり、クライアントルーティングに依存します。 Webサイト（デモアカウントはデモ/デモ）をすばやく確認して、達成しようとすることを理解することをお勧めします。

認証とフォーム

React管理者認証ページでは、ユーザーがユーザー名とパスワードを入力する必要があります。

直感的には、フォームに記入して、次のように送信できます。

 <code>const [usernameInput, passwordInput] = document.getElementsByTagName("input"); usernameInput.value = "demo"; // 也可以在此处使用innerText passwordInput.value = "demo"; document.getElementsByTagName("button")[0].click();</code>

これらのコマンドをログインページのDevToolsコンソールで順番に実行すると、すべてのフィールドがリセットされ、[ボタン]をクリックするとログイン要求が失敗することがわかります。問題は、.value（）（または.innertext（））で設定した新しい値は、Reduxストアに戻らないため、アプリケーションによって「処理」されないことです。

その後、私たちがする必要があるのは、それに応じて内部簿記を更新するように変更された反応値を明示的に伝えることです。これは、イベントインターフェイスを使用して実行できます。

 <code>const updateInputValue = (input, newValue) => { let lastValue = input.value; input.value = newValue; let event = new Event("input", { bubbles: true }); let tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event); };</code>

注：このソリューションは非常に不器用です（著者自身によると）が、私たちの目的のために非常にうまく機能します。

更新されたスクリプトは次のようになります：

 <code>const updateInputValue = (input, newValue) => { let lastValue = input.value; input.value = newValue; let event = new Event("input", { bubbles: true }); let tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event); }; const [usernameInput, passwordInput] = document.getElementsByTagName("input"); updateInputValue(usernameInput, "demo"); updateInputValue(passwordInput, "demo"); document.getElementsByTagName("button")[0].click();</code>

ロングライブ！ブラウザのコンソールで試すことができます - それは完全に機能します。

これを実際のWebPagetestスクリプト（スクリプトキーワード、シングルラインコマンド、およびタブ削除パラメーターを使用して）に変換します。

 <code>setEventName 转到登录页面navigate https://marmelab.com/react-admin-demo/ setEventName 登录exec const updateInputValue = (input, newValue) => { let lastValue = input.value; input.value = newValue; let event = new Event("input", { bubbles: true }); let tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event);}; exec const [usernameInput, passwordInput] = document.getElementsByTagName("input") exec updateInputValue(usernameInput, "demo") exec updateInputValue(passwordInput, "demo") execAndWait document.getElementsByTagName("button")[0].click()</code>

[送信]ボタンをクリックすると、新しいページに移動してAPI呼び出しをトリガーすることに注意してください。つまり、ExecandWaitコマンドを使用する必要があります。

このアドレスでテストの完全な結果を表示できます。 （注： WebPageTestが結果をアーカイブしている可能性がありますが、テストを再度実行できます！）

以下は、認証手順に合格したことがわかります。

ページ間でナビゲートします

従来のサーバー側のレンダリングページの場合、WebPageTestスクリプトのあるURLから次のURLへのナビゲートは、ナビゲーションを使用することですコマンドが完了します。

ただし、SPAの場合、これはユーザーのエクスペリエンスを反映していません。クライアントルーティングは、サーバーがナビゲーションに役割を果たさないことを意味するためです。したがって、URLへの直接アクセスにより、測定のパフォーマンスが大幅に削減され（JavaScriptフレームワークがコンパイル、解析、実行に必要な時間）、ユーザーはページを変更するときにこの減速を経験しません。ユーザーになりすましのプロセスは非常に重要であるため、クライアント側のナビゲーションを処理する必要があります。

うまくいけば、これがフォームに記入するよりもはるかに簡単です。新しいページに連れて行ってクリックするリンク（またはボタン）を選択するだけです！以前の例を続けてみましょうが、コメントリストのパフォーマンスと単一のコメントページをテストしたいと思います。

ユーザーは通常、左側のナビゲーションメニューのコメントアイテムをクリックし、リスト内のアイテムをクリックします。 DevToolsで要素をチェックすると、次の選択戦略を採用する可能性があります。

 <code>document.querySelector("a[href='#reviews']"); // 选择菜单中的“评论”链接document.querySelector("table tr"); // 选择“评论”列表中的第一项</code>

両方のクリックがページ変換とAPI呼び出し（コメントを取得するため）になるため、スクリプトにexecandWaitキーワードを使用する必要があります。

 <code>setEventName 转到登录页面navigate https://marmelab.com/react-admin-demo/ setEventName 登录exec const updateInputValue = (input, newValue) => { let lastValue = input.value; input.value = newValue; let event = new Event("input", { bubbles: true }); let tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event);}; exec const [usernameInput, passwordInput] = document.getElementsByTagName("input") exec updateInputValue(usernameInput, "demo") exec updateInputValue(passwordInput, "demo") execAndWait document.getElementsByTagName("button")[0].click() setEventName 转到评论execAndWait document.querySelector("a[href='#/reviews']").click() setEventName 打开单个评论execAndWait document.querySelector("table tbody tr").click()</code>

これがWebPagetestで実行されている完全なスクリプトビデオです：

監査では、WebPagetestの結果、スクリプトの各ステップのパフォーマンスメトリックと滝の図を表示し、各API呼び出しとインタラクションのパフォーマンスを監視できます。

Internet Explorer 11の互換性はどうですか？

WebPageTestを使用すると、テストする場所、ブラウザ、ネットワーク条件を選択できます。 Internet Explorer 11（IE11）は、利用可能なブラウザオプションに属し、IE11で以前のスクリプトを実行しようとすると失敗します。

これには2つの理由があります。

• IE11は完全にサポートしていないES6構文（矢印関数など）を使用しています。
• フォームの処理用のCustomevent APIは、IE11によってサポートされていません。

ES6構文の問題は、スクリプトをES5構文に変換することで克服できます（矢印関数、lets and const、配列解体なし）。これは次のようになります。

 <code>setEventName 转到登录页面navigate https://marmelab.com/react-admin-demo/ setEventName 登录exec var updateInputValue = function(input, newValue) { var lastValue = input.value; input.value = newValue; var event = new Event("input", { bubbles: true }); var tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event);}; exec var usernameInput = document.getElementsByTagName("input")[0] exec var passwordInput = document.getElementsByTagName("input")[1] exec updateInputValue(usernameInput, "demo") exec updateInputValue(passwordInput, "demo") execAndWait document.getElementsByTagName("button")[0].click() setEventName 转到评论execAndWait document.querySelector("a[href='#/reviews']").click() setEventName 打开单个评论execAndWait document.querySelector("table tbody tr").click()</code>

Customevent Supportの不足をバイパスするために、ポリフィルに目を向け、スクリプトの上部に手動で追加することができます。このポリフィルはMDNで入手できます：

 <code>(function() { if (typeof window.CustomEvent === "function") return false; function CustomEvent(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent("CustomEvent"); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; } CustomEvent.prototype = window.Event.prototype; window.CustomEvent = CustomEvent; })();</code>

次に、イベントのすべての言及をCustomeventに置き換え、ポリフィルを1行に合わせて設定できます。

 <code>setEventName 转到登录页面navigate https://marmelab.com/react-admin-demo/ exec (function(){if(typeof window.CustomEvent==="function")return false;function CustomEvent(event,params){params=params||{bubbles:false,cancelable:false,detail:undefined};var evt=document.createEvent("CustomEvent");evt.initCustomEvent(event,params.bubbles,params.cancelable,params.detail);return evt}CustomEvent.prototype=window.Event.prototype;window.CustomEvent=CustomEvent})(); setEventName 登录exec var updateInputValue = function(input, newValue) { var lastValue = input.value; input.value = newValue; var event = new CustomEvent("input", { bubbles: true }); var tracker = input._valueTracker; if (tracker) { tracker.setValue(lastValue); } input.dispatchEvent(event);}; exec var usernameInput = document.getElementsByTagName("input")[0] exec var passwordInput = document.getElementsByTagName("input")[1] exec updateInputValue(usernameInput, "demo") exec updateInputValue(passwordInput, "demo") execAndWait document.getElementsByTagName("button")[0].click() setEventName 转到评论execAndWait document.querySelector("a[href='#/reviews']").click() setEventName 打开单个评论execAndWait document.querySelector("table tbody tr").click()</code>

見て！

WebPagetestスクリプトの一般的なヒントとコツ

最後に、WebPagetestのスクリプトを簡単に作成するためのヒントとコツをいくつか提供したいと思います。提案がある場合は、Twitterでプライベートメッセージを送ってください！

まず第一に、安全！

スクリプトに機密データ（資格情報など）が含まれている場合は、2つのプライバシーチェックボックスをチェックしてください！

ドキュメントを閲覧します

WebPageTestスクリプトドキュメントには、DNSオーバーライドからiPhoneシミュレーションに至るまで、この記事ではカバーされていない機能がいっぱいです。

新しいスクリプトを書く予定がある場合は、最初に利用可能なパラメーターを調べて、スクリプトを容易にしたり、より堅牢にするのに役立つパラメーターがあるかどうかを確認することをお勧めします。

長い読み込みステータス

時々、リモートAPI呼び出し（たとえば、コメントを取得するために）が長い時間がかかることがあります。ロードインジケーター（スピナーなど）を使用して、何かが起こっているため、ユーザーにしばらく待つように指示できます。

WebPageTestは、画面に変更があるかどうかを判断することにより、ページの読み込みがいつ終了したかを検出しようとします。読み込みインジケーターが長い間続く場合、WebPagetestは、APIコールが返す前にページ設計と割り込み監査の不可欠な部分と間違える可能性があります。

この問題を解決する1つの方法は、テストを停止する前に少なくとも一定の期間待つようにWebPagetestに指示することです。 [詳細]タブで使用できるパラメーターは次のとおりです。

スクリプト（および結果）を読みやすくしてください

• 単一ラインのJavaScriptコマンドを理解するのが難しい場合があるため、空白の行とコメント（//）をgeneしみなく使用します。
• マルチラインバージョンを参照としてどこかに保存し、テストしようとしているときにすべてを並べます。これは読みやすさに役立ちます。たくさんの。
• SeteventNameを使用して、異なる「ステップ」に名前を付けます。これにより、レビューされたページシーケンスを明示的にリストし、WebPagetestの結果に表示されるため、テストが読みやすくなります。

スクリプトを反復します

• まず、スクリプトがブラウザで有効であることを確認してください。これを行うには、WebPageTestキーワード（スクリプトの各行の最初の単語）を削除し、各行をコピーしてブラウザコンソールに貼り付けて、すべてが各ステップで期待どおりに機能することを確認します。
• テストをWebPageTestに送信する準備ができたら、非常に軽量のセットアップを使用することから始めます：1回だけ実行する、クイックブラウザ（ AHEM -NOT IE11 -AHEM ）、ネットワークの制限なし、繰り返し視聴、適切なサイズのインスタンス（バージニア州ダレスには通常良い応答時間があります）。これにより、エラーをより速く検出して修正できます。

スクリプトを自動化します

テストスクリプトはスムーズに実行され、シングルページアプリケーションのパフォーマンスレポートの取得を開始します。新機能をリリースする際には、できるだけ早く回帰を検出するためにパフォーマンスを定期的に監視することが重要です。

この問題を解決するために、私は現在、オープンソースになるWebpagetestのテストランナーであるFalcoを開発しています。 FALCOは、監査を自動化し、結果を読みやすいインターフェイスで提示しながら、必要に応じて完全なレポートを読むことができます。 Twitterで私をフォローして、いつオープンソースになるかを学び、Web PerformanceとWebPagetestの詳細を学ぶことができます！

以上がWebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。