2025年9月10日日本語

Web Performance APIの包括的ガイド。ユーザーエクスペリエンス最適化のため、First Contentful Paint (FCP)、Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS)などの主要メトリクスを解説します。

Web Performance API: 優れたユーザーエクスペリエンスのためのタイミング測定

今日のデジタル環境において、高速で応答性の高いウェブサイトはもはや贅沢品ではなく、必需品です。ユーザーはシームレスな体験を期待しており、わずかな遅延でもフラストレーションやカート放棄、そして最終的には収益の損失につながる可能性があります。Web Performance APIは、開発者がウェブサイトのパフォーマンスのさまざまな側面を正確に測定するためのツールを提供し、ボトルネックを特定してユーザーエクスペリエンス（UX）を最適化することを可能にします。

ユーザーエクスペリエンス指標の重要性を理解する

APIの技術的な詳細に入る前に、UX指標がなぜそれほど重要なのかを理解することが不可欠です。それらは、ユーザーがあなたのウェブサイトの速度と応答性をどのように認識しているかを定量的に評価する方法を提供します。劣悪なUXは、以下に悪影響を与える可能性があります：

直帰率： 読み込み時間が遅いと、ユーザーはコンテンツに関与する前にウェブサイトを離れてしまうことがよくあります。
コンバージョン率： フラストレーションのたまるユーザーエクスペリエンスは、潜在的な顧客が取引を完了するのを妨げる可能性があります。
検索エンジンランキング： Googleのような検索エンジンは、パフォーマンスの良いウェブサイトを優先するため、検索結果での可視性に影響します。パフォーマンスAPIに大きく依存するCore Web Vitalsは、ランキング要因です。
ブランドの認識： 遅いウェブサイトは、細部への配慮の欠如や貧弱なユーザーエクスペリエンスを示唆し、ブランドに否定的な印象を与える可能性があります。

主要なWeb Performance APIとメトリクス

いくつかのWeb Performance APIが利用可能であり、それぞれがウェブサイトのパフォーマンスの異なる側面に関する独自の洞察を提供します。ここに最も重要なものをいくつか紹介します：

1. Navigation Timing API

Navigation Timing APIは、ドキュメントの読み込みに関連する詳細なタイミング情報を提供します。これにより、以下のような読み込みプロセスのさまざまな段階にかかる時間を測定できます：

navigationStart: ブラウザがドキュメントの取得を開始する直前のタイムスタンプ。
fetchStart: ブラウザがネットワークからドキュメントの取得を開始する直前のタイムスタンプ。
domainLookupStart: ブラウザがドキュメントのドメインのDNSルックアップを開始する直前のタイムスタンプ。
domainLookupEnd: ブラウザがDNSルックアップを完了した直後のタイムスタンプ。
connectStart: ブラウザがサーバーへの接続確立を開始する直前のタイムスタンプ。
connectEnd: ブラウザがサーバーへの接続確立を完了した直後のタイムスタンプ。
requestStart: ブラウザがドキュメントのHTTPリクエストを送信する直前のタイムスタンプ。
responseStart: ブラウザがHTTPレスポンスの最初のバイトを受信した直後のタイムスタンプ。
responseEnd: ブラウザがHTTPレスポンス全体を受信した直後のタイムスタンプ。
domLoading: ブラウザがdocument.readyStateを「loading」に設定する直前のタイムスタンプ。
domInteractive: ブラウザがHTMLドキュメントを解析し、DOMの準備ができた直後のタイムスタンプ。
domContentLoadedEventStart: ブラウザがDOMContentLoadedイベントを発火させる直前のタイムスタンプ。
domContentLoadedEventEnd: ブラウザがDOMContentLoadedイベントを発火させた直後のタイムスタンプ。
domComplete: ブラウザがdocument.readyStateを「complete」に設定した直後のタイムスタンプ。
loadEventStart: ブラウザがloadイベントを発火させる直前のタイムスタンプ。
loadEventEnd: ブラウザがloadイベントを発火させた直後のタイムスタンプ。

例： DNSルックアップにかかる時間の計算：

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);

2. Resource Timing API

Resource Timing APIは、画像、CSSファイル、JavaScriptファイル、フォントなど、ウェブページによって読み込まれる個々のリソースに関する詳細なタイミング情報を提供します。このAPIは、どのリソースの読み込みに最も時間がかかっているかを特定し、その配信を最適化するのに役立ちます。

主要なメトリクス：

name: リソースのURL。
startTime: ブラウザがリソースの取得を開始したときのタイムスタンプ。
responseEnd: ブラウザがリソースの最後のバイトを受信したときのタイムスタンプ。
duration: リソースの読み込みにかかった合計時間 (responseEnd - startTime)。
transferSize: ネットワーク経由で転送されたリソースのサイズ。
encodedBodySize: 圧縮前のリソースのサイズ。
decodedBodySize: 圧縮解除後のリソースのサイズ。

例：ページ上で最も大きい画像を特定する：

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);

3. User Timing API

User Timing APIを使用すると、カスタムのパフォーマンスメトリクスを定義し、特定のコードブロックやユーザーインタラクションにかかる時間を測定できます。これは、重要なJavaScript関数や複雑なUIコンポーネントのパフォーマンスを追跡するのに特に便利です。

主要なメソッド：

performance.mark(markName): 指定された名前でタイムスタンプを作成します。
performance.measure(measureName, startMark, endMark): 2つのマーク間のパフォーマンス測定を作成します。
performance.getEntriesByType("measure"): すべてのパフォーマンス測定を取得します。

例：複雑なReactコンポーネントのレンダリングにかかる時間の測定：

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);

4. Long Tasks API

Long Tasks APIは、メインスレッドを50ミリ秒以上ブロックするタスクを特定するのに役立ちます。これらの長いタスクは、UIのジャンクを引き起こし、ユーザーエクスペリエンスに悪影響を与える可能性があります。これらのタスクを特定して最適化することで、ウェブサイトの応答性を向上させることができます。

例：長いタスクをコンソールに記録する：

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });

5. Paint Timing API

Paint Timing APIは、ウェブページの視覚的なレンダリングに関連する2つの主要なメトリクスを公開します：

First Paint (FP): ブラウザが画面に最初のピクセルをレンダリングする時間。
First Contentful Paint (FCP): ブラウザが最初のコンテンツ（例：画像、テキスト）を画面にレンダリングする時間。

これらのメトリクスは、ユーザーがあなたのウェブサイトから最初の視覚的なフィードバックをどれだけ迅速に認識するかを理解するために不可欠です。

例： FCPの取得：

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)は、ビューポート内に最大のコンテンツ要素（例：画像、動画、テキストブロック）が表示されるまでにかかる時間を測定するCore Web Vitalです。良好なLCPスコアは、ページのメインコンテンツが迅速に読み込まれ、より良いユーザーエクスペリエンスを提供していることを示します。

LCPのために最適化すべきこと：

画像の最適化： 適切な画像形式（例：WebP）を使用し、画像を圧縮し、レスポンシブ画像を使用します。
CSSの最適化： CSSファイルを縮小および圧縮し、レンダリングをブロックするCSSを避けます。
JavaScriptの最適化： 重要でないJavaScriptを遅延させ、長時間実行されるJavaScriptタスクを避けます。
サーバーの応答時間： サーバーがリクエストに迅速に応答するようにします。

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS)は、ウェブページの視覚的な安定性を測定するもう1つのCore Web Vitalです。読み込みプロセス中に発生する予期しないレイアウトシフトの量を定量化します。低いCLSスコアは、ページが視覚的に安定しており、より快適なユーザーエクスペリエンスを提供していることを示します。

レイアウトシフトの原因：

寸法の指定がない画像： 画像には常にwidthとheight属性を指定してください。
予約されたスペースのない広告、埋め込み、iframe： これらの要素がレイアウトシフトを引き起こさないように、スペースを予約してください。
動的に注入されるコンテンツ： 予期しないレイアウトシフトを引き起こす可能性があるため、コンテンツを動的に注入する際には注意が必要です。
FOIT/FOUTを引き起こすウェブフォント： Font-Of-Invisible-Text (FOIT) および Font-Of-Unstyled-Text (FOUT) の影響を最小限に抑えるためにフォントの読み込みを最適化します。

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP)は、ユーザーインタラクションに対するウェブページの応答性を測定するCore Web Vitalメトリクスです。ユーザーがページ訪問中に行うすべてのクリック、タップ、キーボード操作の遅延を評価します。INPは2024年3月にFirst Input Delay (FID)に代わってCore Web Vitalとなりました。

INPの改善：

JavaScript実行の最適化： 長いタスクをより小さな非同期のチャンクに分割して、メインスレッドのブロックを回避します。
重要でないJavaScriptの遅延： 初回レンダリングに必要なJavaScriptのみを読み込み、残りは遅延させます。
Webワーカーの使用： 計算負荷の高いタスクをWebワーカーにオフロードして、メインスレッドのブロックを防ぎます。
イベントハンドラの最適化： イベントハンドラが効率的であり、不要な操作を実行しないようにします。

実践的な例とコードスニペット

ここでは、Web Performance APIを使用してウェブサイトのパフォーマンスを測定および最適化する方法のいくつかの実践的な例を紹介します：

例1：ページ読み込み時間の測定

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});

例2：読み込みの遅いリソースの特定

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});

例3：Time to Interactive (TTI) の測定 - 近似値

注：TTIは複雑なメトリクスであり、これは簡略化された近似です。真のTTIには、より洗練されたアプローチが必要です。

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});

ユーザーエクスペリエンス最適化のための実用的な洞察

Web Performance APIを使用してパフォーマンスデータを収集したら、以下の実用的な洞察を利用してウェブサイトのユーザーエクスペリエンスを最適化できます：

画像の最適化： 画像を圧縮し、適切な画像形式（例：WebP）を使用し、レスポンシブ画像を使用して画像の読み込み時間を短縮します。
コードの縮小と圧縮： HTML、CSS、JavaScriptファイルを縮小および圧縮してサイズを削減し、読み込み時間を改善します。
ブラウザキャッシュの活用： サーバーで適切なキャッシュヘッダーを設定し、静的リソースのブラウザキャッシュを有効にします。
コンテンツデリバリーネットワーク（CDN）の使用： ウェブサイトのコンテンツを地理的に複数のサーバーに分散させ、異なる地域のユーザーの遅延を削減します。人気のCDNプロバイダーには、Cloudflare、Akamai、Amazon CloudFrontなどがあります。
フォント読み込みの最適化： font-display: swapを使用してフォントのブロッキングを防ぎ、ウェブサイトの体感読み込み速度を向上させます。
HTTPリクエストの削減： CSSとJavaScriptファイルを結合し、重要なCSSをインライン化し、CSSスプライトを使用してHTTPリクエストの数を最小限に抑えます。
重要でないリソースの遅延読み込み： 画像やJavaScriptファイルなど、重要でないリソースの読み込みを初期ページ読み込み後まで遅延させます。
サーバー応答時間の最適化： サーバーサイドのコードとデータベースクエリを最適化して、サーバーがリクエストに迅速に応答するようにします。
定期的なパフォーマンス監視： Web Performance APIや他のパフォーマンス監視ツールを使用してウェブサイトのパフォーマンスを継続的に監視し、パフォーマンスの問題を特定して対処します。Google PageSpeed Insights、WebPageTest、Lighthouseなどのツールは、貴重な洞察を提供できます。

パフォーマンス監視のためのツールとライブラリ

いくつかのツールやライブラリが、Web Performance APIを使用したウェブサイトのパフォーマンス監視と分析に役立ちます：

Google PageSpeed Insights: ウェブサイトのパフォーマンスを分析し、改善のための推奨事項を提供する無料ツール。
WebPageTest: さまざまな場所やブラウザからウェブサイトのパフォーマンスをテストできる無料ツール。
Lighthouse: Webページの品質を向上させるためのオープンソースの自動化ツール。パフォーマンス、アクセシビリティ、プログレッシブウェブアプリ、SEOなどの監査機能があります。
New Relic: ウェブサイトのパフォーマンスに関するリアルタイムの洞察を提供する包括的なパフォーマンス監視プラットフォーム。
Datadog: ウェブサイトのパフォーマンスを含むインフラ全体を可視化する監視および分析プラットフォーム。
Sentry: リアルタイムのエラートラッキングおよびパフォーマンス監視プラットフォーム。
Web Vitals Chrome Extension: Core Web Vitalsメトリクスをリアルタイムで表示するChrome拡張機能。

グローバルなオーディエンスへの配慮

グローバルなオーディエンス向けにウェブサイトのパフォーマンスを最適化する際には、以下の要因を考慮することが重要です：

地理的な場所： CDNを使用してコンテンツを地理的に複数のサーバーに分散させ、異なる地域のユーザーの遅延を削減します。
ネットワーク状況： 画像圧縮、コードの縮小、ブラウザキャッシュなどの技術を使用して、低速または不安定なネットワーク接続のユーザー向けにウェブサイトを最適化します。
デバイスの能力： レスポンシブデザインや適応読み込み技術を使用して、携帯電話、タブレット、デスクトップなど、さまざまなデバイス向けにウェブサイトを最適化します。
言語とローカリゼーション： コンテンツの翻訳や異なるテキスト方向のレイアウト調整など、ウェブサイトがさまざまな言語や地域向けにローカライズされていることを確認します。
アクセシビリティ： WCAGなどのアクセシビリティガイドラインに従い、障害のあるユーザーがウェブサイトにアクセスできるようにします。

結論

Web Performance APIは、ウェブサイトのパフォーマンスを測定および最適化するための非常に価値のあるツールを提供します。これらのAPIを理解し活用することで、開発者はパフォーマンスのボトルネックを特定し、ユーザーエクスペリエンスを向上させ、最終的にビジネスの成功を促進することができます。ウェブサイト全体の健全性とユーザー満足度の主要な指標として、Core Web Vitals（LCP、CLS、INP）を優先することを忘れないでください。ウェブサイトのパフォーマンスを継続的に監視・最適化することで、世界中のユーザーに高速で応答性が高く、魅力的な体験を保証できます。