ran
日本語

getPerformance

ページのパフォーマンスの計測値を取得します。DNS の解決、TCP の接続、リソースの読み込みなどの指標が含まれます。

API

getPerformance

戻り値

引数 説明 型
BasicType | undefined パフォーマンスの計測値のオブジェクト BasicType | undefined

BasicType

プロパティ 説明 型
dnsSearch DNS の解決にかかった時間（ミリ秒） number
tcpConnect TCP の接続にかかった時間（ミリ秒） number
sslConnect SSL の安全な接続にかかった時間（ミリ秒） number
request TTFB。ネットワークのリクエストにかかった時間（ミリ秒） number
response データの転送にかかった時間（ミリ秒） number
parseDomTree DOM の解析にかかった時間（ミリ秒） number
resource リソースの読み込みにかかった時間（ミリ秒） number
domReady DOM Ready までの時間（ミリ秒） number
httpHead HTTP ヘッダーの大きさ（バイト） number
interactive 最初に操作できるようになるまでの時間（ミリ秒） number
complete ページが完全に読み込まれるまでの時間（ミリ秒） number
redirect リダイレクトの回数 number
redirectTime リダイレクトにかかった時間（ミリ秒） number
duration リソースの要求にかかった合計時間（ミリ秒） number
fp First Paint までの時間（白い画面が続いた時間、ミリ秒） number | undefined
fcp First Contentful Paint までの時間（最初の画面が出そろうまで、ミリ秒） number | undefined

パラメーター

パラメーターはありません

使用例

基本的な使い方

import { getPerformance } from 'ranuts';

const perf = getPerformance();
if (perf) {
  console.log('DNS の解決:', perf.dnsSearch, 'ms');
  console.log('TCP の接続:', perf.tcpConnect, 'ms');
  console.log('最初の画面まで:', perf.fcp, 'ms');
}

パフォーマンスの計測

import { getPerformance } from 'ranuts';

window.addEventListener('load', () => {
  const perf = getPerformance();
  if (perf) {
    // パフォーマンスのデータをサーバーへ送ります
    sendToServer({
      dns: perf.dnsSearch,
      tcp: perf.tcpConnect,
      request: perf.request,
      fcp: perf.fcp,
    });
  }
});

パフォーマンスの分析

import { getPerformance } from 'ranuts';

function analyzePerformance() {
  const perf = getPerformance();
  if (!perf) return;

  console.log('=== パフォーマンスの分析 ===');
  console.log('DNS の解決:', perf.dnsSearch, 'ms');
  console.log('TCP の接続:', perf.tcpConnect, 'ms');
  console.log('SSL のハンドシェイク:', perf.sslConnect, 'ms');
  console.log('リクエストの応答:', perf.request, 'ms');
  console.log('データの転送:', perf.response, 'ms');
  console.log('DOM の解析:', perf.parseDomTree, 'ms');
  console.log('リソースの読み込み:', perf.resource, 'ms');
  console.log('First Paint:', perf.fp, 'ms');
  console.log('First Contentful Paint:', perf.fcp, 'ms');
}

補足

  1. ブラウザーの対応：Performance API に対応したブラウザーが必要ですが、いまどきのブラウザーはどれも対応しています。

  2. サーバー側の環境：サーバー側の環境（window オブジェクトがない）では undefined を返します。

  3. 呼ぶ時機：完全なデータを得るには、ページの読み込みが終わってから（load イベントのあとで）呼ぶのがおすすめです。

  4. 単位：時間の単位はすべてミリ秒、大きさの単位はバイトです。

  5. 使いどころ：パフォーマンスの監視、分析、改善などでよく使われます。