Laboratorio frente a campo: dos números que no miden lo mismo

Un equipo consigue una puntuación de noventa y cinco en el laboratorio y sus datos de campo siguen en rojo. Otro tiene una puntuación mediocre y unos usuarios perfectamente contentos. Las dos situaciones son habituales, ninguna es una contradicción, y las dos se explican por lo mismo: laboratorio y campo miden cosas distintas, con métodos distintos, para responder preguntas distintas. Confundirlos es la causa de la mayor parte del trabajo de rendimiento mal dirigido.

Las diferencias

Las dos filas que más consecuencias tienen son la de interacción y la de latencia.

La interacción explica por qué el laboratorio no puede medir capacidad de respuesta de forma representativa: no hay nadie interactuando, y el sustituto que se usa —el tiempo de bloqueo— es una aproximación al peor caso, no una medida de lo que le pasó a nadie.

La latencia del dato explica por qué el campo no sirve para iterar: si el agregado tarda días o semanas en reflejar un cambio, no se puede usar para decidir si una optimización funcionó esta tarde.

Las cinco causas de discrepancia

Uno: el dispositivo real es peor que el emulado. La distribución de dispositivos de una audiencia real tiene una cola larga de aparatos lentos, y el percentil que se reporta en campo está influido por esa cola. Un dispositivo de gama media emulado es aproximadamente la mediana; el percentil setenta y cinco está bastante por debajo.

Dos: la caché cambia el escenario. El laboratorio mide en frío por defecto; el campo mezcla visitas en frío y en caliente. Si tu sitio tiene muchos usuarios recurrentes, el campo será mejor que el laboratorio. Si tiene muchos primerizos con red mala, peor.

Tres: el campo incluye rutas que no auditas. La puntuación de laboratorio suele medirse sobre la página principal; el agregado de campo, en su forma más común, incluye el origen entero. Si tu página principal está optimizada y una sección interna es pesada, el campo lo refleja y el laboratorio no.

Cuatro: el usuario interactúa y eso cambia las métricas. Una interacción temprana fija la métrica de pintura mayor en el valor que tuviera. Un usuario que desplaza inmediatamente puede producir métricas mejores o peores que un navegador quieto.

Cinco: las extensiones y el entorno del usuario. Bloqueadores, antivirus que inspeccionan tráfico, proxies corporativos, redes compartidas. Todo eso está en el campo y en ningún laboratorio.

Cuál manda en cada decisión

La división de trabajo entre los dos es clara si se plantea como una secuencia.

El campo decide qué hay que arreglar. Es la única fuente que sabe qué sufren los usuarios reales. Cualquier priorización que no parta de datos de campo está priorizando por intuición.

El laboratorio decide cómo arreglarlo. Es la única herramienta que da una traza completa con atribución. Una vez el campo señala que la métrica de respuesta va mal en una sección, el laboratorio dice qué función concreta la está bloqueando.

El laboratorio verifica que el arreglo funciona a corto plazo. Comparación antes y después, en condiciones idénticas, en minutos.

El campo confirma que el arreglo importó. Días después, sobre usuarios reales. Y ahí a veces hay sorpresas: optimizaciones que en laboratorio mejoraban claramente y en campo no mueven nada, porque el cuello de botella real estaba en otra parte de la distribución.

Recoger campo propio

Los datos de campo agregados que ofrecen los servicios públicos tienen dos límites: solo cubren orígenes con suficiente tráfico, y no se pueden segmentar por lo que a ti te interese. La instrumentación propia resuelve los dos.

// Recogida de metricas de campo con las dimensiones que hacen falta para actuar
(() => {
  const cola = [];
  const enviar = () => {
    if (!cola.length) return;
    const cuerpo = JSON.stringify({
      // Dimensiones sin las cuales el dato agregado no sirve para nada
      ruta: location.pathname,
      version: window.__VERSION_APP ?? 'desconocida',
      dispositivo: {
        nucleos: navigator.hardwareConcurrency ?? null,
        memoriaGB: navigator.deviceMemory ?? null,
        dpr: devicePixelRatio,
        ancho: innerWidth
      },
      conexion: navigator.connection?.effectiveType ?? null,
      ahorroDatos: navigator.connection?.saveData ?? null,
      tipoNavegacion: performance.getEntriesByType('navigation')[0]?.type ?? null,
      recargas: performance.getEntriesByType('navigation')[0]?.type === 'reload',
      msDesdeCarga: Math.round(performance.now()),
      metricas: cola.splice(0)
    });
    // sendBeacon sobrevive a que la pagina se cierre
    navigator.sendBeacon?.('/telemetria/vitals', cuerpo);
  };

  const anota = (nombre, valor, extra = {}) =>
    cola.push({ nombre, valor: Math.round(valor * 1000) / 1000, ...extra });

  new PerformanceObserver(l => {
    const e = l.getEntries().at(-1);
    anota('lcp', e.startTime, {
      elemento: e.element?.tagName?.toLowerCase() ?? null,
      url: e.url ? e.url.split('/').pop() : null
    });
  }).observe({ type: 'largest-contentful-paint', buffered: true });

  let cls = 0;
  new PerformanceObserver(l => {
    for (const e of l.getEntries()) if (!e.hadRecentInput) cls += e.value;
  }).observe({ type: 'layout-shift', buffered: true });

  let peorInp = 0;
  new PerformanceObserver(l => {
    for (const e of l.getEntries()) {
      if (e.interactionId && e.duration > peorInp) {
        peorInp = e.duration;
        anota('inp', e.duration, {
          tipo: e.name,
          destino: e.target?.tagName?.toLowerCase() ?? null,
          entrada: Math.round(e.processingStart - e.startTime),
          proceso: Math.round(e.processingEnd - e.processingStart)
        });
      }
    }
  }).observe({ type: 'event', buffered: true, durationThreshold: 40 });

  // Enviar cuando la pagina se oculta: es el unico momento fiable
  addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') { anota('cls', cls); enviar(); }
  });
  addEventListener('pagehide', () => { anota('cls', cls); enviar(); });

  console.log('Telemetria de campo activa. Los datos se envian al ocultar la pagina.');
})();

Las dimensiones que acompañan a cada métrica son la parte que decide si el dato sirve. Un agregado de la métrica de respuesta sin segmentar por ruta y por dispositivo dice que va mal; el mismo agregado segmentado dice que va mal en una pantalla concreta y en dispositivos de pocos núcleos, que es una tarea. La dimensión de versión de la aplicación es la que permite comprobar el efecto de un despliegue.

El envío al ocultar la página, y no al descargarla, es el detalle técnico que hace que el dato llegue: en móvil, el evento de descarga muchas veces no se dispara, y el de ocultación sí.