getPerformance

Recoge las métricas de rendimiento de la página: resolución de DNS, conexión TCP, carga de recursos y demás indicadores.

API

getPerformance

Devuelve

Argumento	Descripción	Tipo
BasicType | undefined	El objeto con las métricas de rendimiento	BasicType | undefined

BasicType

Propiedad	Descripción	Tipo
dnsSearch	Tiempo de resolución de DNS (ms)	number
tcpConnect	Tiempo de conexión TCP (ms)	number
sslConnect	Tiempo de la conexión segura SSL (ms)	number
request	TTFB: tiempo de la petición de red (ms)	number
response	Tiempo de transferencia de los datos (ms)	number
parseDomTree	Tiempo de análisis del DOM (ms)	number
resource	Tiempo de carga de los recursos (ms)	number
domReady	Tiempo hasta DOM Ready (ms)	number
httpHead	Tamaño de las cabeceras HTTP (bytes)	number
interactive	Tiempo hasta poder interactuar (ms)	number
complete	Tiempo hasta la carga completa de la página (ms)	number
redirect	Número de redirecciones	number
redirectTime	Tiempo de las redirecciones (ms)	number
duration	Tiempo total de las peticiones de recursos (ms)	number
fp	Tiempo hasta el primer pintado (pantalla en blanco, ms)	number | undefined
fcp	Tiempo hasta el primer pintado con contenido (fin de la primera pantalla, ms)	number | undefined

Parámetros

Sin parámetros

Ejemplo

Uso básico

import { getPerformance } from 'ranuts';

const perf = getPerformance();
if (perf) {
  console.log('Resolución de DNS:', perf.dnsSearch, 'ms');
  console.log('Conexión TCP:', perf.tcpConnect, 'ms');
  console.log('Primera pantalla:', perf.fcp, 'ms');
}

Medición del rendimiento

import { getPerformance } from 'ranuts';

window.addEventListener('load', () => {
  const perf = getPerformance();
  if (perf) {
    // Enviar los datos de rendimiento al servidor
    sendToServer({
      dns: perf.dnsSearch,
      tcp: perf.tcpConnect,
      request: perf.request,
      fcp: perf.fcp,
    });
  }
});

Análisis del rendimiento

import { getPerformance } from 'ranuts';

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

  console.log('=== Análisis del rendimiento ===');
  console.log('Resolución de DNS:', perf.dnsSearch, 'ms');
  console.log('Conexión TCP:', perf.tcpConnect, 'ms');
  console.log('Apretón de manos SSL:', perf.sslConnect, 'ms');
  console.log('Respuesta a la petición:', perf.request, 'ms');
  console.log('Transferencia de datos:', perf.response, 'ms');
  console.log('Análisis del DOM:', perf.parseDomTree, 'ms');
  console.log('Carga de recursos:', perf.resource, 'ms');
  console.log('Primer pintado:', perf.fp, 'ms');
  console.log('Primer pintado con contenido:', perf.fcp, 'ms');
}

Notas

1. Compatibilidad: hace falta que el navegador admita la Performance API, cosa que hacen todos los modernos.

2. En el servidor: devuelve undefined en entornos de servidor (sin objeto window).

3. Cuándo llamarlo: conviene hacerlo después de que la página termine de cargar (evento load) para tener los datos completos.

4. Unidades: todos los tiempos van en milisegundos y los tamaños en bytes.

5. Cuándo usarlo: es habitual para vigilar, analizar y afinar el rendimiento.