概要
近年、WebサイトのUX指標としてGoogleが評価指標として定めたCore Web Vitalsで測り、LCP、CLS、INPを満たしていくことが求められています。
Core Web VitalsでWebサイトを評価する方法として、Chromeの拡張機能Web Vitals等で確認することができますが、弊社ではAPMとしてNew Relicを採用しており、サイト自体の評価だけでなく、原因の詳細まで確認することが可能です。
今回はCore Web Vitalsの中でLargest Contentful Paint(LCP)に注目して、調査の方法をまとめていきたいと思います。
Largest Contentful Paint(LCP)
最大コンテンツフル ペイント(LCP): ページのメイン コンテンツの読み込みにかかる時間。 たとえば、LCP が遅い Web ページにアクセスしたユーザーには、コンテンツが表示される前に数秒間空白の画面が表示されることがあります。
New Relicの公式ドキュメントやweb.devにも記載されていますが、Webサイトで表示される最大のコンテンツの描画時間に関する指標です。
例えば、ユーザーに表示する際にサイズが大きいある画像の読み込みが遅ければ、LCPの評価を下げていることになります。
また、本来の画像サイズが例えば100KBだったとしても、ビューポート内にレンダリングされた画像サイズ（ユーザーが実際に目にするサイズ）はユーザー側の影響で10MBとなっている場合もあり、New RelicなどAPMではそのみかけ上のサイズも集計することができたりします。
New RelicでLCPに影響するコンテンツを調査する方法
まずは、New Relic側に送信するイベントPageViewTimingイベントを理解し、NRQL(New Relic Query Language)でPageViewTimingイベントからLCPに影響しているコンテンツを集計することで調査を行います。
PageViewTimingイベントを理解する
New RelicではブラウザモニタリングのPageViewTimingイベントとして記録されています。
NRQLにてPageViewTimingイベントに含まれるLargestContantfulPaintsの値を集計することで、LCPに影響を与えているコンテンツを集計することが可能です。
PageViewTimingイベントではページの読み込みやレンダリングの過程で、以下のような情報を記録しています。
- First Paint (FP): 最初のペイント、つまり画面に何らかのコンテンツが表示され始めるまでの時間。
- First Contentful Paint (FCP): 最初の重要なコンテンツ（画像やテキストなど）がユーザーに表示されるまでの時間。
- Largest Contentful Paint (LCP): 最も大きなコンテンツが表示されるまでの時間で、ユーザーにとってページの「読み込み完了」と認識されやすいタイミングです。
- Time to Interactive (TTI): ページが完全に操作可能になるまでの時間です。
例えば、ユーザーがオンラインショップのページを開いたとすると、PageViewTimingイベントでは、次のような各タイミングが記録されます。
- ページを開いてすぐにヘッダーが表示されたタイミング（FP）
- 商品画像が最初に表示されたタイミング（FCP）
- 商品リスト全体が表示され、最も大きな商品画像が表示されるタイミング（LCP）
- ページが完全に読み込まれ、スクロールやボタン操作が可能になるタイミング（TTI）
NQRLでLCPに影響しているコンテンツを集計
New RelicではSQLによく似たNRQL（New relic Query Language)で各種イベントからデータを集計することが可能です。
今回は前述したPageViewTimingイベントからLargestContantfulPaintsの75パーセンタイル値とelementSizeを集計していきます。
New Relic管理画面のQuery Your Dataを開き、where句や日付を書き換えて実行します。
また、FACETを指定しないと、pageUrlやelementUrlを個別に表示してくれません。
SELECT percentile(largestContentfulPaint, 75),
average(elementSize/1024) as 'Element Size(MB)'
FROM PageViewTiming
WHERE timingName='largestContentfulPaint' AND pageUrl LIKE 'https://hoge/%'
FACET pageUrl, elementUrl
WITH TIMEZONE 'Asia/Tokyo' SINCE '2024-10-13' UNTIL '2024-10-26'
結果は下記のように表示されます。
| Page Url | Element Url | Largest Containtful Paint 75 | Element Size(MB) |
|---|---|---|---|
| http://hoge/aaa | http://hoge/xxx.png | 12.02 | 110 |
| http://hoge/bbb | http://hoge/xxx.jpg | 8.03 | 30 |
- Page Url
- ユーザーが閲覧したWebページのURL
- Element Url
- 画像などのコンテンツURL
- Largest Containtful Paint 75
- LCP（７５パーセンタイル）の秒数
- Element Size(MB)
- ビューポート内にレンダリングされた画像サイズ（ユーザーが実際に目にするサイズ）
それぞれのテーブルは昇順、降順がクリックで可能なため、LCPが大きいWebページのURLやコンテンツURLをソートして確認が可能です。
まとめ
様々なWebサイトが世の中にある中でCore Web Vitalsという指標がより重要視されていると思いますが、評価数値だけでなく、どのように原因まで辿り着いて改善していくかが重要だと思いました。
今回はLCPのみですが、New Relicをどう利用すればより具体的な原因にたどり着くことができるのかまとめられたので、次回はCLS、INPについてもまとめていきたいと思います。
Discussion