Web サイトの維持には、複数のチームの取り組みが組み合わされます。機能停止が発生した場合、開発チームとエンジニアリング チームは問題を直接解決できますが、デジタル マーケティング担当者はサイト管理に同じアクセス権を持っていない可能性があります。デジタル マーケティング担当者として、チームの成功はサイトのパフォーマンスに左右されますが、問題を自分で特定して対処するためのツールを持っていない可能性があります。
当社の Web サイト パフォーマンス モニタリング (WPM) ツールは、サイトの可用性とパフォーマンスに関する洞察を提供します。すぐに使えるアラートとモニターによる定期チェックにより、サイトのパフォーマンスについて不安になることはありません。
データが収集されると、ページのアセットに関するユーザーの詳細を追跡するさまざまなグラフを表示できるようになります。これらを総合すると、ユーザーがサイトをどのように体験するかを理解するのに役立ちます。
目的 このドキュメントは、コードレスの Web サイト監視ツールを設定するのに役立ち、データを理解する手順を説明します。このチュートリアルでは、次のことを行います。
インストールせずに監視をセットアップする 収集したデータについて知る Web サイトのパフォーマンス監視を設定する Step 2 of 3
URLを選択してください監視するページを選択すると、New Relic は世界中のさまざまなサーバーから一連のモニターをデプロイし、ページの Web サイトの可用性、リンク切れ、パフォーマンス、SSL 証明書の有効期限をチェックします。まず、ホームページを選択することをお勧めします。
New Relic がモニターをデプロイするのに数分かかります。その後、Web サイトに関するデータの受信が開始されます。モニターは手動で追加したページのパフォーマンスのみをチェックすることに注意してください。
Step 3 of 3
Google PageSpeed APIキーを追加New Relic のスコアが Google のスコアと一致するように、Google の API からコア Web バイタルを取得します。初期設定後に引き続きスコアを取得するには、 Google PageSpeed API キー を作成する必要があります。
データをコンテキスト内に置くモニターが New Relic にデータを報告すると、ユーザー エクスペリエンスと SEO ランキングの向上に役立つメトリクスが表示されます。以下は、概要ページに表示されるデータの種類の例です。
ページの空き状況を確認する 最初のセクションには ping データが表示されます。この種のデータは可用性チェックであり、基本的なサイト機能を確認します。
Site availability [サイトの可用性]。これは、ページが読み込まれたかどうかを報告します。そうでない場合は、サーバーまたはドメインに問題がある可能性があります。
Page load time [ページの読み込み時間]。これにより、ページがすべてのアセットをロードするのにかかる時間の中央値が収集されます。このデータは、コンテンツのタイプとサイズによってさらに分類されます。
SSL Validity [SSL の有効性]。これにより、SSL 証明書が有効であるか、有効期限が切れるか、期限切れであるかがわかります。SSL 証明書を更新する必要がある日付も含まれます。
Broken links [リンク切れ]。ページ上のすべてのリンクをテストした後、どのリンクが壊れているかが報告されます。
当社のモニターは、サイトと対話するモニターを介してサイトの動作をキャプチャします。これにより、更新されたデータを毎日確認できるため、アセットやページの読み込みがいつ失敗するかを推測する必要がなくなります。
ユーザーエクスペリエンスを追跡する Google PageSpeed は、New Relic によって収集された他の指標とともにコア Web バイタルをレポートします。このデータにより、ユーザーがサイトをどのように体験しているかについての洞察が得られます。
First contentful paint [最初の充実したペイント]。これは、最初のアセットがページに読み込まれるまでにかかる時間を取得します。上のスクリーンショットでは、サイトがページに何かを読み込むのに 3.22 秒かかりました。
Largest contentful paint [最大のコンテンツ豊富なペイント]。最初のコンテンツフル ペイントとは異なり、これはページ上の最大のコンテンツが完全に読み込まれるまでにかかる時間をキャプチャします。たとえば、重要なキャンペーンに関する情報がページの最大のアセットに表示される場合、この数字はユーザーがその情報を表示するまでにどれくらいの時間を要するかを示します。上のスクリーンショットでは、2.79 秒かかりました。
First input delay [最初の入力遅延]。ユーザーがサイト上の要素を操作する場合、ユーザーの操作の処理に時間がかかります。この数値は、リクエスト (ユーザー操作) と応答 (ユーザーのリクエストに基づいてページがどのように変更されるか) の間の遅延としてその時間を取得します。
Cumulative layout shift [累積レイアウトシフト]。これは、サイト上のさまざまなアセットの視覚的な安定性を測定します。たとえば、ユーザーがサイトのメイン ページにアクセスした後、読み込み中に画像が移動する可能性があります。この動きは予想外です。
サイトのパフォーマンスをより詳細に把握できるように、当社は長期にわたってデータを収集します。上の gif のように、時間枠を拡大または縮小して、特定のインシデントの周囲でデータがどのように変化するかを確認できます。完了したら、上部のタイムスタンプ ボタンをクリックして、希望の期間に調整し直します。
コンテンツのサイズ、読み込み時間、ソースを比較する Web ページは、HTML、画像、JavaScript、ビデオなどのさまざまな種類のコンテンツで構成されています。コンテンツ チャートは、さまざまなコンテンツ タイプが相互にどのように機能するかを示します。例えば:
Content size [コンテンツのサイズには]、各タイプのサイズがキロバイト単位で表示されます。上のグラフを参照すると、特定のページ上の JavaScript コンテンツ タイプが画像に比べて比例して小さいことがわかります。サイトのパフォーマンスが低下している場合は、開発チームにコードレベルでサイトを最適化するようリクエストできます。
Content sources [コンテンツ ソースは]、コンテンツがホストされている場所をサイズごとに分類します。たとえば、上のグラフでは、コンテンツの大部分が New Relic から提供されており、黄色で表されています。コンテンツが最適化されていてもページが壊れている場合は、コンテンツの入手先を変更するとエラーが解決される可能性があります。
Content load time [コンテンツの読み込み時間は]、ページ全体の読み込み時間と比較して、特定のコンテンツ タイプの読み込みにかかる時間を示します。
Network [ネットワークは]、コンテンツがページにどのように配信されるか、およびそのコンテンツの配信にどれくらいの時間がかかるかを分析します。
ページの読み込みが遅い場合は、 Content [コンテンツ] セクションを使用して問題の潜在的な原因を診断できます。たとえば、 Content size [コンテンツのサイズ] と Content load time [コンテンツの読み込み時間] を比較すると、CSS が多くのリソースを消費しすぎて最後に読み込み、それが最大のコンテンツフル ペイントの遅延の原因となっているかどうかを把握できます。コンテンツ サイズが最適であるにもかかわらずページの読み込みが遅い場合は、ネットワークまたはソースに問題がある可能性があります。
壊れたリンクを修正する ユーザー エンゲージメントが低下しているにもかかわらず、サイトが利用可能でコンテンツが最適化されている場合は、別の原因が考えられます。トラブルシューティングの手順は次のようになります。
one.newrelic.com > Website performance monitoring に移動します。
ページが利用可能かどうかを確認してください。利用可能と表示されます。
コアのウェブ バイタルは全体的に Good [良好] と報告されています。
タイムスライス データを見ると、前日、チームがランディング ページを更新した頃のトラフィックが急激に減少していることがわかります。
壊れたリンクが報告されていることに気づきました。これは、サイト全体で使用されるバナー内のリンクです。
この時点で、関連チームと調整してリンク切れを修正し、サイトの残りの部分に更新を展開できます。
次は何ですか? Web サイトのパフォーマンス監視は、サイトに関する詳細な洞察を簡単に取得できるように設計されています。次の手順から始めることをお勧めします。
WPM にページを追加します。サンキューページ、製品ページ、ログインページなど、顧客ファネルにとって重要なページを追加することをお勧めします。 アイテムの追加、ログイン、フォームへの記入など、サイト内のユーザー ジャーニーを模倣するコードレス ステップ モニターを作成します 。不明な場合は、 ステップ モニターの作成方法 に関するチュートリアルを参照してください。 New Relic が Web サイトをどのように改善できるかについて詳しく知りたい場合は、 Web サイトのパフォーマンスの改善 に関するチュートリアルがあります。開発者向けに書かれていますが、パフォーマンス低下の潜在的な原因とその改善方法を詳しく説明しています。