パフォーマンスAPIでサイトをより速くする方法

このチュートリアルでは、パフォーマンスAPIを活用して、Webアプリケーションと対話する実際のユーザーからの詳細なパフォーマンスメトリックをキャプチャする方法を示しています。ブラウザDevToolsはパフォーマンスの洞察を提供しますが、さまざまなデバイス、場所、ネットワーク接続でユーザーが体験する多様な現実世界の条件を正確に反映していません。

パフォーマンスAPIの重要な利点：

• 実世界の精度：パフォーマンスAPIは、分離されたdevtoolsテストと比較して、アプリケーションのパフォーマンスのはるかに現実的な画像を提供します。
包括的なメトリック：
• ナビゲーション、リソースの読み込み、レンダリング、カスタムアプリケーションロジック実行時間など、ページのライフサイクル全体でメトリックをキャプチャします。 高解像度のタイミング：
高解像度タイマーを利用して、ミリ秒の分数までのタイミングを記録し、リダイレクトやDNSルックアップ時間などの詳細をキャプチャします。標準タイマーでは不可能です。
• カスタマイズ可能な測定：アプリケーションの機能の正確なタイミングを許可し、クライアント側のJavaScript、Webワーカー、Deno、およびnode.js.
でシームレスに動作します
• クロスプラットフォーム分析：実際のユーザーデバイスとネットワークでパフォーマンス測定を有効にし、ボトルネックの識別とパフォーマンスの最適化を簡素化します。
• パフォーマンスAPIの理解：

パフォーマンスAPIは、Webページのライフサイクルのキー段階でパフォーマンスメトリックをオブジェクトとして保存するためのバッファーを採用しています：

ページナビゲーション：

レコードリダイレクト、接続、ハンドシェイク、およびdomイベント。

1. リソースの読み込み：画像、CSS、スクリプト、ajaxコールなどの資産の読み込み時間を追跡します。
ペイントメトリック：
2. ブラウザのレンダリング情報（例えば、最初のコンテンツペイント）をキャプチャします。 カスタムパフォーマンス：
任意のアプリケーション処理時間の測定を有効にして、遅い関数を特定します。
3. APIサポートは次のとおりで確認できます
4. 注：APIの大部分を実装しているにもかかわらず、すべてのメソッドに対するSafariのサポートは完全ではありません。カスタムタイミングAPIは、node.js（モジュールを使用）およびdenoでも使用できます。 （
が必要です）。

if ('performance' in window) {
  // Use Performance APIs
}

：

perf_hooksは経過時間を測定できますが、そのミリ秒の精度とシステム時間（OS調整の影響を受けやすい）への依存度が精度を制限します。パフォーマンスAPIの高解像度タイマーと追加のメトリック（リダイレクトやDNS時間など）は、優れた詳細を提供します。 --allow-hrtime

メトリックの記録とレポート：

クライアント側のパフォーマンスデータには宛先が必要です。 このデータをサーバーに送信して、Ajax、Fetch、XmlhttpRequest、またはBeacon APIを使用して分析できます。多くの分析プラットフォームでは、記録のタイミングを記録するためのカスタムイベントAPIも提供しています（たとえば、Google AnalyticsユーザーのタイミングAPI）。

ページナビゲーションのタイミング： 高速接続でのテストは、実際のユーザーエクスペリエンスを反映していません。 ナビゲーションタイミングAPIは、ユーザーが観察したように、リダイレクト、ロード時間、ファイルサイズ、DOMイベントなどに関する詳細情報を含む

オブジェクトを提供します。

このオブジェクトにアクセスして：PerformanceNavigationTiming

または

if ('performance' in window) {
  // Use Performance APIs
}

両方とも、読み取り専用プロパティを含む単一のオブジェクトを持つ1つのオブジェクト（

、

、

const pagePerf = performance.getEntriesByType('navigation');

、さまざまなタイミングメトリック）を含む配列を返します。

startTimedurationページリソースのタイミング：domComplete

リソースタイミングAPIは、ロードされた各アセット（画像、CSS、スクリプトなど）にオブジェクトを提供します。 使用：

これにより、オブジェクトの配列が返されます。各オブジェクトは、ナビゲーションタイミングと同様のタイミングプロパティを備えていますが、ナビゲーションとDOMイベントデータはありません。 個々のリソースは、

。PerformanceResourceTimingを使用してアクセスできます

例：CSSファイルの読み込み時間とサイズの分析：

const pagePerf = performance.getEntriesByName(window.location);

getEntriesByName()

ブラウザペイントのタイミング：

const resPerf = performance.getEntriesByType('resource');

塗装タイミングAPIは、知覚されたパフォーマンスを評価するために重要な

およびのオブジェクトを提供します。 それらにアクセスしてください：

PerformancePaintTimingユーザータイミング（カスタムメトリック）：first-paint first-contentful-paint

パフォーマンスAPIでは、

const css = performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map(r => ({
    name: r.name,
    load: r.duration + 'ms',
    size: r.decodedBodySize + 'bytes'
  }));

、

、およびを使用して、アプリケーション関数のカスタムタイミングが許可されます。 は高解像度のタイムスタンプを提供します。

パフォーマンスバッファーに名前付きマーカーを作成し、マーカー間の持続時間を計算します。

パフォーマンスエントリの非同期観察を許可します performance.now().mark()自己加工API：.measure()performance.now() .mark()自己プロファイルAPI（まだ開発中）は、自動的にサンプリングすることによりパフォーマンス分析を簡素化し、手動マーカーの配置なしで潜在的なボトルネックを識別します。 .measure()PerformanceObserver結論：

パフォーマンスAPIにより、開発者は、実際のユーザーデータに基づいてWebアプリケーションのパフォーマンスを正確に測定および改善し、ターゲットを絞った最適化と優れたユーザーエクスペリエンスを可能にします。 最新の情報と特定のプロパティの詳細については、詳細なドキュメントを参照してください。

以上がパフォーマンスAPIでサイトをより速くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。