RVUの主任エンジニアであるJonathan Fielding氏は、今年のHalfStackで、開発者がサイトのパフォーマンスを測定および分析する方法を説明した。合成データと実際のユーザメトリックは、サイトのパフォーマンスの補完的なビジョンを提供する。
Fielding氏は、パフォーマンスに関する多くの講演でWebサイトを高速化するための手順に焦点を当てていることを聴衆に思い出させることから始めた。代わりに、Fielding氏は、開発者が自身のユーザに関するデータを収集する方法について話す。
Fielding氏は2種類のデータを区別した。一つは合成データであり、通常、制御された環境を提供するサーバからテストを実行することによって取得される。もう一つは、実ユーザメトリックであり、実ユーザとのインタラクションをキャプチャして計測指標を得るものである。
両方の計測アプローチで、Fielding氏はパフォーマンストラッキングに適した5つの主要なメトリックを特定した。それは、最初のバイトまでの時間（TTFB）、ファーストインプット遅延、ファーストコンテンツペイント、最大コンテンツペイント、累積レイアウトシフトである。
最初のバイトまでの時間は、ブラウザがコンテンツの最初のバイトを受信するまでにかかる時間である。ファーストインプット遅延は、ユーザが最初にページを操作した時間（例えばリンクのクリック）から、ブラウザがその操作に反応して実際にイベントハンドラーの処理を開始できるまでの時間である。ファーストコンテンツペイントは、ロードを開始してから、ページのコンテンツのいずれかが画面に表示されるまでの時間を計測するものである。最大コンテンツペイントは、ビューポート内に最大サイズの画像またはテキストブロックが表示されるまでのレンダリング時間をレポートするものである。累積レイアウトシフトは、ページのライフタイム中に発生するすべての予期しないレイアウトシフトをスコアリングし、集約するものである。表示要素が1つのレンダリングされたフレームから次のフレームにその位置を変更するたびに、レイアウトのシフトが発生する。
Fielding氏は、ブラウザレスのヘッドレスブラウザやlighthouse APIsを活用する合成パフォーマンスデータ収集の例を挙げた。Fielding氏は今度は、Googleの web-vitalsによる実際のユーザメトリックコレクションの例を示した。
// Start by importing the metric you want to get
import {getFCP} from 'web-vitals';
// Measure and log the current First Contentful Paint value,
// anytime it is ready to be reported
getFCP(log)
パフォーマンス測定プロセスには通常、次の手順が含まれる。測定するデータを選択し、保存し、クエリを実行し、分析する。Fielding氏は、GoogleのBigQueryを使用したクエリの例を示した。Google AnalyticsやGoogleタグマネージャーなどの他のツールも使用できる。
利用可能なデータを使って、開発者は特定の時点のスナップショットを分析するだけでなく、データの経時的な変化を追跡し、アプリケーションに加えられた変更の影響を評価できる。
講演内容の全ては、オンラインで入手可能であり、多くの追加の発言や技術的な例が含まれている。HalfStackは、JavaScriptとWebエコシステムの可能性に焦点を当てた、UI中心の1日のシングルトラック会議である。Covid-19により、2020年5月にHalfStackがオンラインで開催された。