wandres.dev
LIGHTHOUSE · La auditoría automática

Qué mide Lighthouse y cómo lo simula

Las cinco métricas de rendimiento que puntúa, el dispositivo y la red que emula, la diferencia entre throttling simulado y aplicado, y qué implica cada elección.

⏱ 18 min

Lighthouse es la herramienta de rendimiento web más usada del mundo y la peor entendida. Produce un número entre cero y cien que los equipos persiguen, los responsables citan y los clientes exigen, sin que casi nadie sepa de dónde sale, qué mide exactamente, en qué condiciones, ni qué relación tiene con lo que experimentan los usuarios reales. Este nivel trata de eso, y empieza por lo básico: qué hace la herramienta cuando pulsas el botón.

🎯 Al terminar esta lección sabrás
  • Enumerar las métricas que componen la puntuación de rendimiento.
  • Describir las condiciones de dispositivo y red que emula por defecto.
  • Distinguir la ralentización simulada de la aplicada y sus implicaciones.
  • Configurar una auditoría que corresponda al escenario que quieres medir.

Lo que ocurre al pulsar el botón

La auditoría, en su modo por defecto, hace esto: abre la página en un contexto limpio, con emulación de un dispositivo móvil, con ralentización de red y de CPU, recarga desde cero, registra una traza completa de todo lo que ocurre, y después analiza esa traza extrayendo métricas y comprobando decenas de condiciones.

El resultado tiene dos partes que conviene no confundir. Las métricas, que son mediciones de tiempo, y de las que sale la puntuación. Y las auditorías de diagnóstico, que son comprobaciones de buenas prácticas y que no puntúan: informan.

Esa distinción resuelve una confusión frecuentísima. Una auditoría de diagnóstico en rojo no baja la puntuación. La puntuación sale exclusivamente de las métricas. Un informe puede tener quince diagnósticos en rojo y una puntuación excelente, y al revés.

Las cinco métricas y sus pesos

La puntuación de rendimiento es una media ponderada de cinco métricas, cada una con un peso fijo.

Métrica Qué mide Peso aproximado
Tiempo total de bloqueo Suma de los excesos sobre el umbral de las tareas largas El mayor
Pintura de contenido mayor Cuándo aparece el elemento principal Alto
Desplazamiento acumulado de disposición Cuánto se mueve el contenido Alto
Primera pintura con contenido Cuándo aparece el primer contenido Bajo
Índice de velocidad Cuán rápido se rellena visualmente la pantalla Bajo

Los pesos exactos han cambiado entre versiones y volverán a cambiar, así que memorizarlos no sirve de mucho. Lo que sí es estable y decisivo es el orden: el tiempo de bloqueo pesa más que ninguna otra, y las dos primeras juntas se llevan la mayor parte de la puntuación.

Esa jerarquía tiene una consecuencia práctica inmediata: la forma más eficaz de subir la puntuación es reducir el JavaScript que se ejecuta durante la carga. No es una opinión sobre buenas prácticas, es aritmética sobre cómo está construido el número.

ℹ️
Nota

La métrica de tiempo de bloqueo es la sustituta en laboratorio de la métrica de capacidad de respuesta, que no se puede medir sin un usuario real que interactúe. Correlaciona razonablemente con ella y no es lo mismo: mide cuánto tiempo habría estado bloqueado alguien que hubiera intentado interactuar, no cuánto esperó nadie.

El dispositivo y la red emulados

Por defecto, la auditoría móvil emula un teléfono de gama media con unas condiciones de red que corresponden aproximadamente a una conexión celular mediocre: latencia de bastantes decenas de milisegundos, ancho de banda de unos pocos megabits, y una ralentización de CPU de varias veces respecto a la máquina que ejecuta la prueba.

Tres consecuencias de esa elección.

La emulación de dispositivo cambia el viewport y el identificador de agente, así que si tu sitio sirve contenido distinto a móviles, la auditoría mide esa versión.

La ralentización de CPU es relativa a tu máquina. El mismo factor sobre un portátil potente y sobre uno modesto produce dos velocidades distintas. Es la razón principal de que la misma página puntúe distinto en dos ordenadores, y de que la puntuación de tu equipo local y la de tu servidor de integración no coincidan.

El modo de escritorio existe y usa condiciones muy distintas: sin ralentización de red significativa y sin ralentización de CPU. Comparar una puntuación de escritorio con una de móvil no tiene ningún sentido, y sin embargo se hace constantemente.

Ralentización simulada frente a aplicada

Esta es la diferencia más importante de toda la lección y la que menos se conoce.

La ralentización simulada carga la página sin ralentizar la red de verdad, registra todo lo que ocurre, y después calcula cuánto habría tardado bajo las condiciones objetivo mediante un modelo. Es rápida, es reproducible, y es una estimación.

La ralentización aplicada ralentiza de verdad la red y la CPU durante la carga y mide lo que pasa. Es más lenta y más fiel.

El modo por defecto en muchas configuraciones es el simulado, y eso explica varios comportamientos desconcertantes.

Una auditoría tarda menos de lo que dice el resultado. Porque la carga real fue rápida y los números son calculados.

Algunos cambios no se reflejan como esperas. El modelo hace suposiciones sobre paralelismo, prioridades y dependencias, y una optimización que el modelo no representa bien puede no aparecer.

Los resultados de servicios que ejecutan la auditoría en la nube pueden diferir de los tuyos. Distinta máquina, distinta latencia real hasta tu servidor, distinto modelo aplicado sobre esa base.

La regla práctica: para comparar tus propias versiones entre sí, el modo simulado es perfectamente válido y más estable. Para entender qué está pasando de verdad, el modo aplicado, o directamente el panel de rendimiento.

Ejecutarla de forma comparable

Si el resultado va a compararse con otro, las condiciones tienen que ser idénticas. Este guion documenta la configuración junto al resultado, que es lo que hace comparables dos ejecuciones separadas en el tiempo.

// Registra las condiciones de la maquina junto a la auditoria
(() => {
  const condiciones = {
    fecha: new Date().toISOString(),
    url: location.href,
    nucleos: navigator.hardwareConcurrency,
    memoriaGB: navigator.deviceMemory ?? 'no expuesta',
    conexion: navigator.connection
      ? {
          tipo: navigator.connection.effectiveType,
          bajadaMbps: navigator.connection.downlink,
          rttMs: navigator.connection.rtt,
          ahorroDatos: navigator.connection.saveData
        }
      : 'no expuesta',
    ventana: innerWidth + 'x' + innerHeight,
    dpr: devicePixelRatio,
    agente: navigator.userAgent.slice(0, 90)
  };
  console.table([condiciones]);
  console.log('Copia esto junto a la puntuacion. Sin estas condiciones, dos puntuaciones no se comparan.');

  // Calibracion rapida de la CPU de esta maquina, para saber cuanto vale su factor
  const t0 = performance.now();
  let x = 0;
  for (let i = 0; i < 5e6; i++) x += Math.sqrt(i) % 7;
  const msCalibracion = performance.now() - t0;
  console.log('Referencia de CPU de esta maquina:', Math.round(msCalibracion), 'ms');
  console.log('Compara este numero entre maquinas antes de comparar puntuaciones.');
})();

Esa referencia de CPU es el dato que falta en casi todas las discusiones sobre por qué la puntuación varía entre máquinas. Si el número de calibración de dos máquinas difiere en un factor de dos, sus puntuaciones no son comparables por mucho que la configuración de la auditoría sea idéntica.

Lighthouse mide una carga en frío de un visitante que llega por primera vez, y ese visitante puede ser una minoría de tu tráfico

El escenario que la auditoría reproduce es muy concreto y conviene tenerlo presente antes de tomar decisiones basadas en él: un usuario que llega a esta URL por primera vez, sin nada en caché, sin sesión, sin service worker, en un dispositivo de gama media y con una conexión mediocre, y que no interactúa. Es un escenario legítimo y para muchos sitios es el más importante que existe: una tienda que recibe visitas de búsquedas, un medio al que se llega desde redes sociales, una página de aterrizaje de una campaña. Para esos, la puntuación mide casi exactamente lo que importa. Para otros no mide casi nada. Una aplicación interna que la gente usa ocho horas al día tiene una carga en frío al día y miles de interacciones: optimizar la carga en frío mejora un segundo al día por usuario, y ninguna de las cinco métricas dice absolutamente nada sobre las miles de interacciones que componen el resto de la jornada. Una aplicación de una sola página donde el usuario navega entre secciones sin recargar tiene su carga inicial medida y todo su uso posterior invisible. Un producto con usuarios recurrentes tiene la mayoría de sus cargas en caliente, con caché llena, que es un escenario que la auditoría no mide en su configuración por defecto. La consecuencia es que el primer trabajo con esta herramienta no es ejecutarla sino decidir si el escenario que reproduce es el tuyo, y esa decisión debería tomarse mirando datos: qué fracción de tus sesiones son primeras visitas, cuántas páginas ve un usuario por sesión, cuánto dura una sesión, cuántas interacciones hay por carga. Si el noventa por ciento de tu tráfico son visitas únicas desde búsqueda, la puntuación es una aproximación excelente a la experiencia de tu usuario y perseguirla está bien empleado. Si tus usuarios abren la aplicación por la mañana y la cierran por la tarde, la puntuación es una métrica de algo que ocurre una vez al día y el trabajo de rendimiento que importa está en la capacidad de respuesta durante la sesión, que esta herramienta no puede medir por construcción.