この Blog Post は Three Reasons New Relic Browsers Dominates The Internet の意訳です。

New Relic Browserは、世界で最も配備されている実ユーザー監視(RUM)ツール

インターネット上でビジネスを営む場合、次のような事実に着目する必要があるでしょう。ユーザーは、Webブラウザーがサーバーからデータをロードするのを待つことに90%の時間を費やしているという事実です。そしてエンドユーザーエクスペリエンスは100%、テクノロジースタック全体に依存しています。インフラストラクチャからアプリケーション、最終的にアプリケーションをレンダリングするブラウザーまで、すべて の問題を迅速に特定、診断、および解決する機能が必要なのはいうまでもありません。
これらの事実により、フロントエンド(またはエンドユーザー)のモニタリングは、成功するデジタルビジネス戦略の重要な要素です。エンドユーザーエクスペリエンスと、Webサイトのパフォーマンスとビジネスの健全性との関係を理解することは絶対に不可欠です。サーバーがWebブラウザーとエンドユーザーに情報を送信した後の動作に注目してフロントエンドのモニタリングを行うことにより、ユーザーが行っているアプリケーションとのやり取りを把握できます。実際のユーザー監視(RUM)は、その名前が示すようにWebサイトまたはWebアプリケーションと実際のユーザーインタラクションを測定します。これがまさに New Relic Browser が必要となる場所なのです。

 

New Relic BrowserはRUM市場で世界最大のシェアを持つ

WebサイトプロファイラーBuiltWithによると 、 New Relic Browser は  Google Analyticsに次いで2番目に広く導入されているブラウザベースのAPMソリューションでした。New Relic Browserはほぼ180万のWebサイトに展開されています。これは、同等の監視ソリューションの20倍以上の数です。(New Relic Browser は開発者とエンジニアがアラートを設定し、エラーと問題を修正し、コードレベルでページパフォーマンスを最適化するのに役立つためものです。一方でGoogleアナリティクスはキャンペーン、マーケティングコンテンツ、ページクリックのパフォーマンスを測定するのに便利なので、Googleアナリティクスを比較対象から外した場合を考えて、支配的と表現しています。)

最もトラフィックの多い100万のサイトのうち、 New Relic Browser は競合他社のほぼ10倍の頻度で展開されています。

Browser agents in use with deploys in the top 1 million websites of August 2019.

2019年8月の上位100万位のWebサイトで使用されているブラウザエージェントの利用状況です。New Relic Browserエージェントは、現在、トップ10,000のWebサイトのほぼ30%に展開されています。

Browser agent deploys for the top 10,000 websites (by traffic) as of August 2019.

New Relic Browserがこれほど支配的なのはなぜでしょうか?その人気は次の3つの要因にあると New Relic では考えています。

  1. New Relic Browser は最新のウェブ体験を念頭に置いて開発されているから。
  2. New Relicプラットフォーム、特にNew Relic APMと密接にインテグレーションされているから。
  3. 設定が簡単ですぐに価値を実現できるから。

 

1.最新のウェブ体験のために

開発者と運用の専門家を念頭に置いて構築された New Relic Browserは、一目ですぐにわかるフィードバックを提供し、開発者がディメンション、地域、ネットワーク全体でユーザーのパフォーマンスを把握できるようにします。開発者はすぐにアラートを設定し、ベースラインを確立し、ページのパフォーマンスを視覚化できます。次の理由により、最新のWebエクスペリエンスには不可欠です。

  • シングルページアプリケーション (SPA) の取り扱い
  • ユーザー中心のパフォーマンスメトリクス
  • AJAXモニタリング
  • JavaScriptエラーモニタリング
  • カスタム属性のサポート

シングルページアプリケーション (SPA)

現在のインターネットは、ページがほとんどHTMLと画像ファイルで構成されていたWeb 1.0の時代から変化しています。シングルページアプリケーション(SPA)は、高速で応答性の高いユーザーエクスペリエンスを提供し 、展開時に不要なページの再読み込みやHTMLフェッチを排除するなどの利点があるため人気が高まっています 。使用するSPAフレームワークに関係なく、New Relic Browser はSPA対応です。SPAモニタリング用に設定する作業はほとんど必要ありません。また、ページロードとルートの変更、AJAXリクエストデータ、同期および非同期JavaScriptアクティビティ、SPAアプリケーションに関連する動的ページ更新のパフォーマンスデータとスループットを自動的にキャプチャします。New Relic Browser を使用すると、ユーザーがアプリのページの読み込みとルート変更をどのように経験するかを完全に理解できます。

ユーザー中心のパフォーマンスメトリクス

長い間、window.onload event で測定される「ページの読み込み時間」はほとんどのRUM製品で標準的に測定可能でした。
しかし New Relic Browser によって最近リリースされたFirst Contentful PaintやAverage First Paintなどのユーザー中心のパフォーマンスメトリクスは、エンドユーザーエクスペリエンスのより完全な全体像を伝え、「ユーザーがコンテンツを見るまでにどれくらい時間がかかりますか?」「ユーザーがページ上の要素を操作できるようになるまでに時間がかかりますか?」という質問に答えることができます。ユーザーの観点から見ると、これらの指標は、Google ChromeエンジニアリングマネージャーのAddy Osmani のブログ投稿、 Webページのユーザビリティの問題で提起されたような質問に答えるのに役立ちます 「ページの読み込みは4つの重要な瞬間を伴います:起こっていますか? 便利ですか?使えますか?楽しいですか?ブラウザでFirst Contentful PaintやAverage First Paintメトリクスを使用すると、サイトがコンテンツのレンダリングを開始したとユーザーが感じる正確な瞬間をより正確に測定できます。

AJAXモニタリング

AJAX は、流動的で満足のいくユーザーエクスペリエンスを提供したい開発者にとって重要なクライアント側ツールです。AJAXを使用すると、開発者はWebページを構築してページ全体をリロードすることなくサーバーとデータを非同期で送受信することにより、コンテンツを動的に更新できます。ドキュメントに記載されているように、ブラウザのAJAXページには、ブラウザからHTTPまたはHTTPSドメインなどの外部エンドポイントへの最近のAJAXリクエストが表示されます。この情報はサイトのWebページの一部を更新する時間がかかる、または失敗するAJAX呼び出しがある場合に、ユーザーエクスペリエンスの問題を識別するのに役立ちます。例えば:

  • タイミングの問題: 合計 時間の割合、1分あたりのスループット要求(rpm)、および要求ごとの平均データ転送速度は、タイミングの問題の特定に役立ちます。
  • エンドポイントの問題: 要求に関連するステータスコードは、呼び出しからの戻り動作に関する情報を提供します。200以外のステータスコードが多数ある場合は、AJAXエンドポイントに問題がある可能性があります。
  • 特定のWebページの場所の問題: 該当する場合、関連する セッショントレースを 使用すると、AJAXの問題が読み込まれているページのコンテキスト内で調べることができます。

 

JavaScriptエラー監視

RedMonkのような業界アナリストによると 、 JavaScriptは今日最も人気のあるプログラミング言語であり、Webページをインタラクティブにするために(HTMLおよびCSSとともに)最も一般的に使用されています。言うまでもなく、JavaScriptエラーはあらゆる形で発生します。1平方インチの広告が正しく表示されないほど些細なこともあれば、ユーザーのWebブラウザーが応答しなくなることもあります。JSエラーに優先順位を付けて再作成する必要がある場合、 New Relic Browserは非常に貴重なツールです。JSエラー処理により、ビジネスにとって重要なセグメントに基づいてエラーを並べ替えることができます(エラーの影響と修復の優先順位を決定する際に役立ちます)。エラーをローカルで再現する必要があるエンジニアにとって、これらの機能は非常に貴重です。

カスタム属性のサポート

New Relic Browserエージェントは、ページビューまたはブラウザーインタラクションに関連する追加の詳細を指定するAPIを提供します。たとえば 、APMデータからカスタム属性を転送する か、 JavaScriptを介してカスタム属性を指定することにより、開発者はRUMデータの値を増やして、ユーザーエクスペリエンスについてより多くの情報を提供できます。すべてのサイトは一意であるため、サイト所有者が特定のページ要素を測定して、ブラウザのすぐに使える価値を高めることは有益です。たとえば、他の主要なWebページ要素と次のような顧客固有のデータを収集、統合、および比較できます。

  • ヒーロー画像
  • ユーザー情報(変換情報、ログインID、およびアカウント名)
  • eコマーストランザクション情報(カートサイズと注文額)
  • A / Bテスト

2.New Relic Browserは、より大きなNew Relic体験の一部です

RUMから収集されたメトリクスにより、Webサイトに関する有用かつ強力なストーリーを伝えることができます。しかし、これらのストーリーを、インフラストラクチャレイヤーからアプリケーションを動かすマイクロサービスまで、ソフトウェアスタックの残りについて知っていることと結びつけると、各変更または機能強化の影響とエンドユーザーの形成方法を完全に理解できます。
問題のトラブルシューティングと問題を特定するために監視に依存することが多い開発者と運用の専門家が主な利用者です。実際のユーザーの監視からアプリケーション層、インフラストラクチャ層まで、できるだけ少ないクリックで簡単にナビゲートする必要があります。New Relicのお客様と話をするとき、プラットフォーム全体の価値のいいところについてよく耳にします。たとえば、ある顧客は最近、「私たちにとってホームランは、フロントエンドを見てそれをバックエンドと比較できることでした」と語っています。
ブラウザは、さまざまな方法でNew Relicプラットフォームの他の部分と統合されます。たとえば 、HTTP要求に関連付けられているすべてのトランザクション追跡に簡単に紐づけて、トランザクションエラーをすばやくトラブルシューティングできます。または ブラウザからのRUMデータをNew Relic Syntheticsで利用可能なデータと揃えることにより、フィールドデータと比較してラボデータをよりよく理解し、競合他社のベンチマークを行い、顧客が問題に気付く前に停止やパフォーマンスの低下を事前に排除できます。
マイクロサービスを構築および管理する場合、 New Relicの分散トレース は、分散システム全体でレイテンシをより迅速に特定し、フロントエンドサービスとバックエンドサービス間のレイテンシをより適切に分離するのに役立ちます。New Relicが分散トレースを拡張してWebブラウザーおよびモバイルデバイスでトランザクションをキャプチャすることで、コンテキストをより迅速に取得し、これまでにない速さで問題を解決できます。

 

3.すぐに価値を認識できます

New Relic Browser は非常に簡単に展開できます。既存のAPMユーザーの場合、APMエージェントがブラウザーの監視に必要なJavaScriptスニペットを挿入できるようにすることで、ブラウザーエージェントを自動的に展開できます。このデプロイ方法を使用すると、新しい機能がリリースされると自動的に更新され、エージェントを最新の状態に保つために手動の手順を実行する必要はありません。エージェントをインストールしたら、すぐに顧客のエンドユーザーエクスペリエンスについて学習できます。たとえば、 New Relic Oneチャートビルダー を使用して、New Relic Oneダッシュボード用のウィジェットを作成し  、認識されるパフォーマンスメトリック、AJAXリクエスト、およびJavaScriptエラーを追跡できます。
始めるのに役立つように、New Relic Oneチャートビルダーにコピーして貼り付けることができる2つの例を次に示します。

例1:知覚パフォーマンスメトリクス

Query
SELECT average(timeToDomInteractive), average(firstContentfulPaint), average(firstPaint), average(duration) FROM BrowserInteraction TIMESERIES

This dashboard chart shows perceived performance metrics, like Average First Contentful Paint and Average First Paint, which Browser collects out of the box.

このダッシュボードグラフには、ブラウザがすぐに収集するAverage First Contentful PaintやAverage First Paintなどの認識されたパフォーマンスメトリクスが表示されます。

例2:JSエラー

問い合わせ
SELECT count(*) FROM JavaScriptError FACET errorMessage, stackTrace SINCE 1 day ago

This dashboard chart shows total JavaScript errors by error message and stack trace.

このダッシュボードチャートには、エラーメッセージとスタックトレースごとに合計JavaScriptエラーが表示されます。

 

New Relic Browser:現代の問題に対応した最新のソフトウェア

開発者は何よりもまずユーザーエクスペリエンスに集中する必要があります。しかし、彼らはまた、コンテンツ配信ネットワークのようなサードパーティのサービスに依存しながら、常に新しい機能とコンテンツをリリースするように求められています。制約のあるネットワーク上で、数千種類のデバイスにまたがるユーザーを満足させることはサイトの所有者にとっては大変です。認知されたパフォーマンスメトリクスの追跡、SPAなどの一般的な開発プラクティスのサポート、および事後対応型およびプロアクティブ型の実ユーザーモニタリングによるサイトの維持は、これまで以上に重要になっています。ブラウザは、優れたTime to Value、最新のWebエクスペリエンスのために構築された監視、より大きなNew Relicプラットフォームへの直接接続を提供することによりこの複雑さを簡素化します。
New Relic Browserをインストール して、世界で最も人気のあるRUMソリューションである理由を学んでみませんか。

 

無料トライアル

外資系企業にて Sales Engineer、Product Marketing Manager、Executive Messaging などの経験を経て現職。現在はNew Relic K.K. にて Growth Marketing のマネージャーを務める。マネージャーと言いながらも一人マーケティングのためなんでもこなす。 View posts by .