はじめに
目的
本資料は「webパフォーマンス計測」について調査し、分かりやすくまとめたものです。Webサイトやウェブアプリの表示速度や操作感を数値で把握し、改善につなげる手順を示します。具体例を交えて説明しますので、実務ですぐに役立ちます。
なぜ計測が重要か
ユーザーは遅いページを待ちません。ページ表示が遅いと離脱や売上減につながります。検索順位や広告収益にも影響します。計測すると、問題の原因を特定して優先順位をつけやすくなります。
対象読者
開発者、サイト運営者、デザイナー、そしてパフォーマンス改善を始めたい方が対象です。専門用語は最小限に抑え、手順や具体例で補足します。
本資料の構成
第2章で計測の基本、第3章で主要ツールの使い方、第4章でCore Web Vitalsの主要指標、第5章でJavaScriptによる計測方法を解説します。順を追って読み進めることで、実務での計測と改善ができるようになります。
Webパフォーマンス計測の概要
計測の目的
Webパフォーマンス計測は、サイトやアプリの読み込み速度や操作の快適さを数値で把握する作業です。数字にすることで改善点が明確になり、ユーザー満足度を高めやすくなります。
主な評価項目
- 読み込み速度：ページが見えるまでの時間。例：画像が多いと遅くなります。
- 応答性：クリックやスクロールに対する反応の速さ。複雑なスクリプトで遅くなることがあります。
- 視覚的安定性：読み込み中にレイアウトがずれないか。広告や画像のサイズ指定がないと揺れます。
計測の基本手順
- 計測ツールにURLを入力して実行します。
- 複数回計測して中央値を確認します。
- モバイルとデスクトップで分けて計測します。ネットワーク環境も考慮してください。
注意点と実務での例
計測結果は環境に左右されます。開発環境と実際のユーザー環境で差が出るため、実際の端末やネットワークでも確認します。たとえば画像を圧縮し遅延読み込みを導入すると、読み込み速度と視覚安定性が改善します。
次に学ぶこと
次章では、具体的な無料ツールと使い方を詳しく見ていきます。
主要な計測ツール
はじめに
主なツールを使い分けると、問題の発見と改善がスムーズになります。ここでは実務でよく使う3つを分かりやすく説明します。
PageSpeed Insights（Google）
URLを入力するだけでレポートを取得できます。実際のユーザー計測（フィールドデータ）と、実行時の分析（ラボデータ）を両方示します。具体例：画像が重い場合は「最適化を推奨」と表示され、どの画像を対象にするか分かります。手軽さが利点で、改善の優先順位を知るのに便利です。
Google Search Console
サイト全体の速度状況を把握できます。問題のあるURL群を一覧で確認できるため、不具合の集中するページを特定しやすいです。継続的な監視に向いています。例：特定のテンプレートだけ遅い場合、そのテンプレートを優先して直せます。
Chrome DevTools：Performanceタブ
ブラウザ内で詳細に解析できます。録画して読み込みの流れを可視化し、どの処理で時間がかかっているか掘り下げられます。FCPやLCPなどの指標も確認でき、スクリプトやレンダリングのボトルネックを特定するのに向きます。
使い分けのポイント
- まずPageSpeed Insightsで概要をつかむ
- Search Consoleでサイト全体の傾向を監視
- 問題箇所はDevToolsで詳しく調査
実際の運用では、これらを組み合わせて効率よく改善していきます。
Core Web Vitalsの主要指標
Webパフォーマンス評価でよく使われる6つの指標について、わかりやすく説明します。具体例を交えて、どんな問題がユーザー体験を損なうか理解できるようにします。
LCP（Largest Contentful Paint）
ページで最も大きなコンテンツ（見出しや大きな画像など）が表示されるまでの時間です。例えばトップページの大きなヒーロー画像が遅いとLCPが悪化します。改善策は画像圧縮、遅延読み込み、重要なCSSの優先化などです。
FID（First Input Delay）
ユーザーが最初に操作したとき（クリックやタップ）にブラウザが反応するまでの遅延です。例えばメニューをタップしても反応が遅いと不快です。短くするには重いJavaScriptを分割して短いタスクにすることが有効です。
CLS（Cumulative Layout Shift）
読み込み中に要素が急に移動することで起きる視覚的なズレの累積を示します。広告や画像のサイズ指定がない場合に起きやすいです。対策は画像や広告に幅高さを指定することです。
FCP（First Contentful Paint）
ページに最初のテキストや画像などが表示されるまでの時間です。白い画面が長いとユーザーは離れやすくなります。不要なブロッキングCSSやフォントの遅延を見直すと改善します。
INP（Interaction to Next Paint）
ページ全体での操作応答性をより包括的に評価する指標です。複数の操作を通じた平均的な遅延を見ます。長時間実行するJavaScriptを分割するなどで応答性を上げます。
TTFB（Time to First Byte）
サーバーから最初のバイトを受け取るまでの時間です。サーバー処理やネットワーク遅延が原因になります。キャッシュやCDN、効率的なサーバー処理が改善に役立ちます。
JavaScriptによるパフォーマンス計測
概要
Core Web Vitalsをプログラムで取得するには、PerformanceObserverというブラウザAPIを使います。ページ上の出来事（LCP、FID/INP、CLSなど）をリアルタイムに受け取り、サーバーへ送信や画面表示の改善に役立てます。
PerformanceObserverの基本例
- オブザーバを作成し、関心あるエントリタイプを指定します。
const obs = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
// entryを処理
console.log(entry);
}
});
obs.observe({type: 'largest-contentful-paint', buffered: true});
buffered: trueは過去のエントリも取得します。
主要指標の取り方（例）
- LCP: ‘largest-contentful-paint’を監視し、最終値をpagehideやvisibilitychangeで送信します。
- CLS: ‘layout-shift’を監視し、エントリのisMainFrameやvalueを累積します。
- FID/INP: ‘first-input’を監視して応答遅延を記録します。最近はINPが推奨され、長時間のインタラクションを評価します。
データ送信と互換性
収集した値はnavigator.sendBeaconやfetchで送信します。古いブラウザではPerformanceObserverが未対応な場合があるので、web-vitalsライブラリを併用すると簡単です。
実践上の注意点
- サンプリングを行い、ユーザー負荷を抑えます。
- メトリクスはユーザー環境に依存するため、集計して傾向を見ます。
- 計測コードは軽量にしてレンダリングを阻害しないよう設置します。
