NewsCredのIntegrated Marketing Editionの展開に伴い、当社はCMPにさまざまな新しい機能を追加しました。当社のユーザーはアップグレードされた機能に大喜びくださいましたが、一部の追加機能はパフォーマンスにおける問題を一部で生じさせる可能性があります。速度はソフトウェアにおいてユーザーが重視する部分であるため、ユーザー体験を明らかにするフロントエンドのパフォーマンス追跡ソフトウェアを見つけることに着手しました。私たちの目標は、各機能の読み込み時間を追跡し、ボトルネックを特定し、ユーザーに影響を及ぼす前にパフォーマンス上の問題を診断することです。
「適切なソフトウェアを選択する」ということ
評価中の2つの製品は、NewRelicとAppDynamicsです。1つの製品にコミットする前に、必要なすべての機能と、当社のアプリのパフォーマンスを精査し続けるために不可欠な機能がすべて含まれていることを確認する必要がありました。そのため、もっとも重要なコンポーネントを分類し、各製品が私たちのニーズを満たすためにどう機能するかを測定しました。比較方法は次の通りです。
アプリケーション全体のロード時間と、その時間の何パーセントがAPIの呼び出し対レンダリングに費やされているか。
New Relic: ロード時間の傾向をFEとBEに分類して表示します。このビューは、FEとBEの構成内容については不透明ですが、カスタムダッシュボードを作成して、詳細を掘り下げることができます。
AppDynamics: このデータをテーブルビューに表示します。テーブルビューでは、すべてのページをロードしたイベントと関連するタイミングを確認できます。 そこから、簡単に掘り下げて、ロードしたイベントのタイムライン表示を確認できます。
勝者: AppDynamics
アプリケーション内のページ間を移動するときにロードにかかる時間。
New Relic: JSdurationと待機時間に分割されたルート変更のロード時間を表示します。 上記と同様に、データを掘り下げるためのカスタムダッシュボードを作成する方が便利だとわかりました。
AppDynamics: 初期負荷データを表示するのと同じ方法でルート変更データを表示します。
勝者: AppDynamics（ただし、どちらのプラットフォームにおいても、ルート変更データについては、ロード時間対初期ロードの構成内容に関する詳細なビューは表示されません）。
ページがロードされ後に発生するインタラクション。（例: ユーザーはページ付けされたタスクのリストを検索します。これらの結果がサーバーから返され、レンダリングされるのをユーザーが待っている時間を追跡できることを望んでいます）
New Relic: Browser Interaction APIにより、ページを読み込む以外のインラインユーザーインタラクションを追跡し、そのインタラクションをフィルタリングする可能性があるデータを簡単に追加できます。
AppDynamics: markVirtualPageBeginを使用することで、外部ページを読み込み、インラインユーザーインタラクションを簡単に追跡できますが、イベントにカスタムデータが追加できないため、一意の名前を付ける制限に達してしまうでしょう。
勝者: AppDynamics
サーバーは、ユーザーが対話するときにシングルページアプリケーションが行う呼び出しを行います。
New Relic: スループット、レスポンスコード、データ転送、その他の詳細ごとに分類されたもっとも時間のかかるAJAX呼び出しを表示します。バックエンド追跡ソフトウェアがない場合、このビューはさらに制限されます。
AppDynamics: AJAXのタイミングのビューは、ルート変更や初期ロードのビューに似ています。高レベルのテーブルビューで全体的なタイミングを確認してから、個々のビューで長期的なタイミングを掘り下げることができます。
勝者: AppDynamics
特定のチーム / ユースケース向けのデータを紹介するダッシュボードを構築する機能。
New Relic: この製品のSQLとなるNRQLがあります。SQLの経験がある人は非常に使いやすく、ダッシュボードとデータアプリの作成、コピー、エクスポートが簡単にできることがわかりました。
クエリの例:
SELECT percentile(duration, 90) FROM BrowserInteraction WHERE browserInteractionName = TIMESERIES SINCE 2 weeks ago
AppDynamics: NewRelicに非常に匹敵する独自のクエリ言語があります。さらに、クエリ言語を使用せずに、ドラッグアンドドロップでグラフを作成するオプションがあります。
勝者: 引き分け
両製品のデータの保持期間はどのくらいですか？
New Relic: 保持料を支払うことができるので、私たちにとって価値があると期間（1年）を選択することができました。
AppDynamics: 90日間のデータ保持ポリシーがあり、機能が時の経過とともにどのように改善されたかを確認するのが困難でした。
勝者: New Relicですが、長期的なトレンドに関心がある場合に限ります。
フォーラムやドキュメントで答えを見つけることができますか？
New Relic: コミュニティフォーラムと詳細なドキュメントがあるため、NewRelicのトラブルシューティングは簡単です。
AppDynamics: 私たちのAppDynamicsに関する質問に対する回答が同社のドキュメントやフォーラムで見つけられることはめったにありません。
勝者：New Relic（ただし、どちらのプラットフォームにおいても、インラインイベントの設定に関する情報は驚くほど見つけることができませんでした）。
追跡可能なページ数またはキャプチャするイベント数に関するプラットフォームの制限。
New Relic: 追跡するブラウザインタラクションの数に制限はありません。代わりに、大量のデータに対して料金が課されます。
AppDynamics: 追跡する初期のロード / ルート変更名に500件のハード制限があります。これには、実装する可能性のあるカスタムの仮想ページが含まれます（上記のインラインイベントで説明したとおりです）。AJAX呼び出しには500件という個別の制限もあります。サードパーティのAPI呼び出しを除外し、構成内で独自のAPI呼び出しをセグメント化する場合、これは重大な問題になるかもしれません。
勝者: New Relic
ソフトウェアがプラグアンドプレイであるか、効果的に追跡するための構成が必要かどうか。
New Relic: ルート内のIDを取得し、必要に応じて集約します。
/tasks/:id は/tasks/* に変換されます。このプロセスは、AJAX呼び出しに関しては不完全であり、独自のAPIエンドポイントのほとんどは現在 /api/ * にグループ化されています。
AppDynamics: デフォルトのID集約は行われません。デフォルトでは、最初のURLセグメントで名前が付けられます。 /tasks/:id と /tasks/:id/copy は両方とも /tasks になります。
*当社には数多くのルートがあるため、最善のソリューションは、12の正規表現リストを作成して、URLからIDを見つけて削除し、名前を作成することでした。これには成功しましたが、ルート構造を変更した場合はメンテナンスが必要になります。REGEX（正規表現）が欠落していて、ページにIDごとに個別の名前が付けられている場合、すぐに上記の制限に達するでしょう。
勝者: New Relic
AppDynamicsはデータを適切に表示し、ユーザーがアプリケーションの状態をすぐに理解できるようにしてくれました。そのほか、詳細を深く掘り下げて、遅いロードの根本的な原因を非常に簡単にトラブルシューティングすることができます。AppDynamicsでデータを適切に設定するのに必要な構成は、データ量の制限と組み合わせてもその利点を上回ります。
New Relicでは、同じデータをすべて素早く利用できます。さらに、カスタムダッシュボードを活用して、その機能を最大限に活用できるのです。ボーナス点は、カスタムダッシュボードが簡単に入手でき、SQLの経験がある人なら誰でもわかることです。
テストと慎重な検討の結果、構成と継続的なメンテナンスが少なくて済むNewRelicを選択しました。AppDynamicsの優れたデフォルトのダッシュボードを使えないのは残念ですが、すでにNew Relicに独自のダッシュボードを設定しており、パフォーマンスに取り組むにつれてロード時間が短縮されゆく状況を楽しんでいます。
元記事「How Our Engineers Chose Software to Optimize Frontend Performance」は2019年5月7日にInsights.newscred.comに掲載されました。
この記事は、NewsCred BlogのJulia Pearsonが執筆し、Industry Diveのパブリッシャー・ネットワークを通じてライセンスされたものです。ライセンスに関するお問い合わせはlegal@industrydive.comまでお願いいたします。
また、日本におけるNewsCredパブリッシャーネットワークに関してはNewsCred by amanaまでお問い合わせください。
amana Content Marketing
amana Content Marketing
コンテンツマーケティングの本場であるアメリカで、業界を牽引するリーディングカンパニーであるIndustry Dive。国内唯一の独占パートナーであるアマナがその集合知を活用し、成果へと繋がるコンテンツマーケティングをサポートします。
企業が抱える課題に沿って、戦略策定からチーム構築、コンテンツ制作、効果測定まで、コンテンツマーケティングの運用をトータルで支援します。
