New RelicのWebsite Performance Monitoringを使ってみた

# 概要
URLを指定するだけでサイトのパフォーマンスを計測できる**Web Performance Monitoring**がリリースされました。リンク切れ、SEO対策に重要なCore Web Vitals、ページロード時間、証明書切れ、コンテンツのサイズやロード時間などを簡単な設定で把握することができます。

ちなみに、Web Performance MonitoringはNew Relicの外形監視の機能であるSynthetic Monitoringが使われています。

それでは、さっそく試してみます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/fe94079a-7ec5-549d-181f-54e3faa89313.png)

:::note info
このアップデートの詳細はこちら。[New Relic アップデート(2023年6月)](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202306 "New Relic アップデート(2023年6月)")
:::

# 手順
## 1. Web Performance Monitoringを開く
まず、New Relicにログインして **All Capabilities > Web Performance Monitoring** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/337389f3-bdf4-e2f4-98ee-813301bc101d.png)

## ２. 計測したいサイトのURLを入力
**Add Page** をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/da2ddc47-3aaa-e679-55ca-1f80042401cd.png)

URLを記載する画面が表示されるのでURLを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/734bab91-d2f2-b592-60c8-a80770fd1c05.png)

## ３. 結果を確認
初回の計測結果が画面に出るまで少し時間がかかりますが、待っていると画面に結果が表示されます。

はじめにウェブサイトの計測結果のサマリー情報が表示されます。
**Broken links**でリンク切れのチェック、**Page load time**でページの読み込みにかかる時間、**SSL validity**で証明書期限切れチェックを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/3289fdec-fc2e-f794-0756-aeb1f8af8def.png)

次に、ユーザー体験を表す**FCP**、**LCP**、**FID**、**CLS**が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/86f3fe11-970b-852f-9085-36846f593726.png)


**LCP**、**FID**、**CLS**は、Google Pagespeed API keyが必要となります。設定していない場合は**NOT AVAILABLE**と表示されます。

Google Pagespped API keyを入力する場合は、**Get running data > Add Google Pagespeed API Key** をクリックしてAPI Keyを入力します。
PageSpeed Insights APIについては[こちら](https://developers.google.com/speed/docs/insights/v5/get-started?hl=ja)を参照ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/1fb0460a-8e46-7d0d-ec72-e30660e5ae49.png)

続いて、コンテンツのサイズやロード時間などが表示されます。グラフ上の項目を選択することで、その項目に絞ってグラフを表示できるので、分析しやすくなっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/94f2ec61-e0a3-87fb-d622-7846a3aa1a2f.png)

その次には、リンク切れの詳細が表示され、どのリンクで問題がおきているか把握できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/2c272595-3c44-bf91-068c-30ab6752fb6e.png)

最後に、どのロケーションから計測がされているか、また、アラートの設定状況を確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/10ee8307-ac38-3720-c449-4b974b76867e.png)

ロケーションにTokyoなどを追加する場合は、右上の設定ボタンをクリックして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/b0addabf-efe1-3e9b-dfd0-55cf7811674c.png)
**Locations we scan from**から、**Tokyo, JP**を追加することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227243/345e6ead-5102-b68e-4447-0e26065ec59d.png)


# まとめ
Web Performance Monitoringを使うことで、URLを指定するだけでサイトのパフォーマンスを計測できることを確認しました。手軽にパフォーマンス計測ができるので試してみてください。

ちなみに、こちらの記事では紹介していませんが、New RelicのBrowserエージェントでは、ユーザーが実際にブラウザを操作したときの情報を元にして、ユーザーの体験を可視化することだできるので、[**Browserエージェント**](https://docs.newrelic.com/jp/docs/browser/browser-monitoring/getting-started/introduction-browser-monitoring/ "Browserエージェント")もぜひお試しください。

:::note info
このアップデートの詳細はこちら。[New Relic アップデート(2023年6月)](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202306 "New Relic アップデート(2023年6月)")
:::