<h1 id="%E6%A6%82%E8%A6%81" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p data-line="1" class="code-line">近年、WebサイトのUX指標としてGoogleが評価指標として定めたCore Web Vitalsで測り、LCP、CLS、INPを満たしていくことが求められています。<br>
Core Web VitalsでWebサイトを評価する方法として、Chromeの拡張機能<a href="https://chromewebstore.google.com/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja" target="_blank" rel="nofollow noopener noreferrer">Web Vitals</a>等で確認することができますが、弊社ではAPMとしてNew Relicを採用しており、サイト自体の評価だけでなく、原因の詳細まで確認することが可能です。</p>
<p data-line="4" class="code-line">今回はCore Web Vitalsの中でLargest Contentful Paint(LCP)に注目して、調査の方法をまとめていきたいと思います。</p>
<h1 id="largest-contentful-paint(lcp)" data-line="6" class="code-line">
<a class="header-anchor-link" href="#largest-contentful-paint(lcp)" aria-hidden="true"></a> Largest Contentful Paint(LCP)</h1>
<blockquote data-line="8" class="code-line">
<p data-line="8" class="code-line">最大コンテンツフル ペイント(LCP): ページのメイン コンテンツの読み込みにかかる時間。 たとえば、LCP が遅い Web ページにアクセスしたユーザーには、コンテンツが表示される前に数秒間空白の画面が表示されることがあります。</p>
</blockquote>
<p data-line="10" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__591ab5f3b320b" src="https://embed.zenn.studio/card#zenn-embedded__591ab5f3b320b" data-content="https%3A%2F%2Fdocs.newrelic.com%2Fjp%2Fdocs%2Ftutorial-improve-site-performance%2Fguide-to-monitoring-core-web-vitals%2F%23learn" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.newrelic.com/jp/docs/tutorial-improve-site-performance/guide-to-monitoring-core-web-vitals/#learn" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.newrelic.com/jp/docs/tutorial-improve-site-performance/guide-to-monitoring-core-web-vitals/#learn</a></p>
<p data-line="12" class="code-line"><a href="https://docs.newrelic.com/jp/docs/tutorial-improve-site-performance/guide-to-monitoring-core-web-vitals/#learn" target="_blank" rel="nofollow noopener noreferrer">New Relicの公式ドキュメント</a>や<a href="https://web.dev/articles/lcp?hl=ja" target="_blank" rel="nofollow noopener noreferrer">web.dev</a>にも記載されていますが、Webサイトで表示される最大のコンテンツの描画時間に関する指標です。<br>
例えば、ユーザーに表示する際にサイズが大きいある画像の読み込みが遅ければ、LCPの評価を下げていることになります。<br>
また、本来の画像サイズが例えば100KBだったとしても、ビューポート内にレンダリングされた画像サイズ（ユーザーが実際に目にするサイズ）はユーザー側の影響で10MBとなっている場合もあり、New RelicなどAPMではそのみかけ上のサイズも集計することができたりします。</p>
<h1 id="new-relic%E3%81%A7lcp%E3%81%AB%E5%BD%B1%E9%9F%BF%E3%81%99%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E8%AA%BF%E6%9F%BB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" data-line="16" class="code-line">
<a class="header-anchor-link" href="#new-relic%E3%81%A7lcp%E3%81%AB%E5%BD%B1%E9%9F%BF%E3%81%99%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E8%AA%BF%E6%9F%BB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> New RelicでLCPに影響するコンテンツを調査する方法</h1>
<p data-line="17" class="code-line">まずは、New Relic側に送信するイベント<strong>PageViewTiming</strong>イベントを理解し、<strong>NRQL</strong>(New Relic Query Language)でPageViewTimingイベントからLCPに影響しているコンテンツを集計することで調査を行います。</p>
<h2 id="pageviewtiming%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B" data-line="19" class="code-line">
<a class="header-anchor-link" href="#pageviewtiming%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E7%90%86%E8%A7%A3%E3%81%99%E3%82%8B" aria-hidden="true"></a> PageViewTimingイベントを理解する</h2>
<p data-line="20" class="code-line">New RelicではブラウザモニタリングのPageViewTimingイベントとして記録されています。<br>
NRQLにてPageViewTimingイベントに含まれるLargestContantfulPaintsの値を集計することで、LCPに影響を与えているコンテンツを集計することが可能です。</p>
<p data-line="23" class="code-line"><a href="https://docs.newrelic.com/jp/docs/browser/new-relic-browser/page-load-timing-resources/pageviewtiming-async-or-dynamic-page-details/" target="_blank" rel="nofollow noopener noreferrer">PageViewTiming</a>イベントではページの読み込みやレンダリングの過程で、以下のような情報を記録しています。</p>
<ul data-line="25" class="code-line">
<li data-line="25" class="code-line">First Paint (FP): 最初のペイント、つまり画面に何らかのコンテンツが表示され始めるまでの時間。</li>
<li data-line="26" class="code-line">First Contentful Paint (FCP): 最初の重要なコンテンツ（画像やテキストなど）がユーザーに表示されるまでの時間。</li>
<li data-line="27" class="code-line">Largest Contentful Paint (LCP): 最も大きなコンテンツが表示されるまでの時間で、ユーザーにとってページの「読み込み完了」と認識されやすいタイミングです。</li>
<li data-line="28" class="code-line">Time to Interactive (TTI): ページが完全に操作可能になるまでの時間です。</li>
</ul>
<p data-line="30" class="code-line">例えば、ユーザーがオンラインショップのページを開いたとすると、PageViewTimingイベントでは、次のような各タイミングが記録されます。</p>
<ul data-line="32" class="code-line">
<li data-line="32" class="code-line">ページを開いてすぐにヘッダーが表示されたタイミング（FP）</li>
<li data-line="33" class="code-line">商品画像が最初に表示されたタイミング（FCP）</li>
<li data-line="34" class="code-line">商品リスト全体が表示され、最も大きな商品画像が表示されるタイミング（LCP）</li>
<li data-line="35" class="code-line">ページが完全に読み込まれ、スクロールやボタン操作が可能になるタイミング（TTI）</li>
</ul>
<h2 id="nqrl%E3%81%A7lcp%E3%81%AB%E5%BD%B1%E9%9F%BF%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E9%9B%86%E8%A8%88" data-line="39" class="code-line">
<a class="header-anchor-link" href="#nqrl%E3%81%A7lcp%E3%81%AB%E5%BD%B1%E9%9F%BF%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E9%9B%86%E8%A8%88" aria-hidden="true"></a> NQRLでLCPに影響しているコンテンツを集計</h2>
<p data-line="40" class="code-line">New RelicではSQLによく似た<a href="https://docs.newrelic.com/jp/docs/nrql/get-started/introduction-nrql-new-relics-query-language/" target="_blank" rel="nofollow noopener noreferrer">NRQL（New relic Query Language)</a>で各種イベントからデータを集計することが可能です。</p>
<p data-line="42" class="code-line">今回は前述したPageViewTimingイベントからLargestContantfulPaintsの75パーセンタイル値とelementSizeを集計していきます。<br>
New Relic管理画面の<strong>Query Your Data</strong>を開き、where句や日付を書き換えて実行します。<br>
また、<code>FACET</code>を指定しないと、pageUrlやelementUrlを個別に表示してくれません。</p>
<div class="code-block-container"><pre><code class="code-line" data-line="46">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'
</code></pre></div><p data-line="55" class="code-line">結果は下記のように表示されます。</p>
<table data-line="56" class="code-line">
<thead data-line="56" class="code-line">
<tr data-line="56" class="code-line">
<th>Page Url</th>
<th>Element Url</th>
<th>Largest Containtful Paint 75</th>
<th>Element Size(MB)</th>
</tr>
</thead>
<tbody data-line="58" class="code-line">
<tr data-line="58" class="code-line">
<td><a href="http://hoge/aaa" target="_blank" rel="nofollow noopener noreferrer">http://hoge/aaa</a></td>
<td><a href="http://hoge/xxx.png" target="_blank" rel="nofollow noopener noreferrer">http://hoge/xxx.png</a></td>
<td>12.02</td>
<td>110</td>
</tr>
<tr data-line="59" class="code-line">
<td><a href="http://hoge/bbb" target="_blank" rel="nofollow noopener noreferrer">http://hoge/bbb</a></td>
<td><a href="http://hoge/xxx.jpg" target="_blank" rel="nofollow noopener noreferrer">http://hoge/xxx.jpg</a></td>
<td>8.03</td>
<td>30</td>
</tr>
</tbody>
</table>
<ul data-line="61" class="code-line">
<li data-line="61" class="code-line">Page Url
<ul data-line="62" class="code-line">
<li data-line="62" class="code-line">ユーザーが閲覧したWebページのURL</li>
</ul>
</li>
<li data-line="63" class="code-line">Element Url
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">画像などのコンテンツURL</li>
</ul>
</li>
<li data-line="65" class="code-line">Largest Containtful Paint 75
<ul data-line="66" class="code-line">
<li data-line="66" class="code-line">LCP（７５パーセンタイル）の秒数</li>
</ul>
</li>
<li data-line="67" class="code-line">Element Size(MB)
<ul data-line="68" class="code-line">
<li data-line="68" class="code-line">ビューポート内にレンダリングされた画像サイズ（ユーザーが実際に目にするサイズ）</li>
</ul>
</li>
</ul>
<p data-line="70" class="code-line">それぞれのテーブルは昇順、降順がクリックで可能なため、LCPが大きいWebページのURLやコンテンツURLをソートして確認が可能です。</p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="72" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p data-line="73" class="code-line">様々なWebサイトが世の中にある中でCore Web Vitalsという指標がより重要視されていると思いますが、評価数値だけでなく、どのように原因まで辿り着いて改善していくかが重要だと思いました。<br>
今回はLCPのみですが、New Relicをどう利用すればより具体的な原因にたどり着くことができるのかまとめられたので、次回はCLS、INPについてもまとめていきたいと思います。</p>


Core Web VitalsのLargest Contentful Paint(LCP)をNew Relicで確認する方法

PageViewTimingイベントを理解する

NQRLでLCPに影響しているコンテンツを集計

New RelicでLCPに影響するコンテンツを調査する方法

Discussion