Rompiendo la 4ª pared: tu visita en directo
En cualquier otro proyecto, mostrar estas métricas en el front no tendría ningún sentido. Así que sírvete tu buena dosis de alimento frente a tu hambre curiosa y despliega cualquier línea para descubrir qué estamos midiendo y cuál debería ser el valor ideal.
La conexión
Cómo ha viajado esta página desde el servidor hasta tu navegador.
protocolo —
La versión de HTTP que han negociado tu navegador y el servidor. Con h2 y h3 los archivos viajan en paralelo por la misma conexión; con h1.1 cada uno espera su turno. objetivo: h2 o h3
dns —
Lo que ha tardado el dominio en traducirse a una dirección IP. Se resuelve una vez y luego se cachea, así que en la segunda visita suele ser cero. objetivo: < 50 ms
conexión —
Abrir el canal con el servidor: el saludo TCP. Cuanto más lejos está el servidor, más tarda, y por eso existen las CDN. Si marca 0 ms es que el navegador ha reutilizado una conexión que ya tenía abierta. objetivo: < 100 ms
tls —
Negociar el cifrado de HTTPS. Va dentro del tiempo de conexión y sólo aparece en https. También marca 0 ms cuando la conexión se reutiliza: el saludo ya estaba hecho. objetivo: < 100 ms
redirecciones —
Cada salto es una petición entera antes de ver nada: DNS, conexión y respuesta. Se paga dos veces, en tiempo de carga y en presupuesto de rastreo. objetivo: ninguna
caché —
Si este HTML ha venido de la red o del disco. HIT significa que tu navegador ya lo tenía guardado y no ha pedido nada.
compresión —
Cuánto ha encogido el HTML al viajar, con gzip o brotli. Si sale «sin comprimir», hay algo mal configurado en el servidor y se está pagando ancho de banda de más. objetivo: > 60 %
tu red —
Lo que tu propio navegador declara sobre tu conexión. No depende de la web: sirve para recordar que no todo el mundo entra con fibra.
Lo que has visto
La experiencia real de carga, medida en tu pantalla.
ttfb —
Tiempo hasta el primer byte: lo que tarda el servidor en empezar a contestar. Es el primer sitio donde mirar cuando una web va lenta, porque todo lo demás ocurre después. objetivo: < 800 ms
descarga —
Desde el primer byte del HTML hasta el último. Si es alto con un documento pequeño, sospecha del servidor, no de la red.
fcp —
First Contentful Paint: cuándo aparece el primer texto o la primera imagen. Es el momento en que dejas de ver una pantalla en blanco. objetivo: < 1,8 s
lcp —
Largest Contentful Paint: cuándo termina de pintarse el elemento más grande visible. Es una de las tres métricas de Core Web Vitals y la que más se resiente con imágenes de cabecera pesadas. objetivo: < 2,5 s
cls —
Cumulative Layout Shift: cuánto se ha movido solo el contenido mientras cargaba. Cada salto es un clic que va a parar donde no querías. Se calcula por ventanas de sesión, no como suma bruta. objetivo: < 0,1
inp —
Interaction to Next Paint: lo que tarda la página en responder cuando tocas algo. Aquí es una aproximación —la peor interacción de esta visita—; el valor oficial se calcula sobre muchas. objetivo: < 200 ms
dom listo —
Cuándo el navegador ha terminado de leer el HTML y de ejecutar los scripts que bloquean el análisis.
carga total —
El evento load: ya no queda nada pendiente de la carga inicial. Hace años era la métrica de referencia; hoy dice poco de la experiencia.
bloqueo —
Tareas de JavaScript que han ocupado el hilo principal más de 50 ms, y cuánto tiempo suman por encima de ese límite. Mientras bloquean, la página no responde aunque se vea entera. objetivo: < 200 ms
Lo que has descargado
El inventario de esta página, archivo por archivo.
html —
El peso del documento que devuelve el servidor, ya comprimido. Es lo único que un rastreador necesita descargar para entender la página. objetivo: < 250 kB
peso total —
Todo junto: HTML, hojas de estilo, JavaScript, imágenes y fuentes. objetivo: < 500 kB
peticiones —
Cuántos archivos ha pedido la página. El presupuesto de rastreo no se cuenta en bytes, se cuenta en peticiones: cada una lleva DNS, conexión y respuesta aunque el cuerpo esté vacío. objetivo: < 40
javascript —
Número de scripts y peso sumado. Es el recurso más caro: hay que descargarlo, analizarlo y ejecutarlo, y lo tercero es lo que duele. objetivo: < 150 kB
css —
Hojas de estilo y peso sumado. Bloquean el pintado: hasta que no llegan, no hay nada en pantalla. objetivo: < 50 kB
imágenes —
Cuántas y cuánto pesan. Suelen ser la mitad del peso de una página y casi siempre la causa de un LCP malo. objetivo: < 300 kB
fuentes —
Tipografías descargadas. Cada peso y cada estilo es un archivo distinto, y ahí es donde se acumula el peso sin darse cuenta.
terceros —
Recursos que vienen de otros dominios: analítica, incrustados, píxeles. No los controlas tú, así que si van lentos, tu página va lenta.
Lo que vería Google
Las señales que un rastreador lee de este mismo HTML.
indexación —
Lo que dice la etiqueta meta robots. Si pone noindex, esta página no entra en el índice por bien hecha que esté: es el error más caro y el más fácil de cometer.
canónica —
La URL que la página declara como versión buena. Si apunta fuera, le estás diciendo a Google que indexe otra en su lugar.
idioma —
El atributo lang del html. Lo usan los lectores de pantalla y la segmentación por idioma.
title —
Longitud del título. Alrededor de 55 caracteres suele caber entero en un resultado de escritorio; más allá, Google lo corta o lo reescribe. referencia: ~55 car.
description —
Longitud de la meta description. No posiciona, pero decide si te hacen clic, y eso sí acaba notándose. referencia: ~150 car.
h1 —
Cuántos h1 hay en la página. Uno solo dice de qué va; varios reparten el foco y ninguno queda claro. objetivo: 1
alt —
Cuántas imágenes hay y cuántas se han quedado sin atributo alt. Sin alt no hay accesibilidad ni búsqueda de imágenes. objetivo: 0 sin alt
enlaces —
Enlaces internos y externos que salen de aquí. Los internos son los que reparten autoridad y marcan por dónde sigue el rastreo.
schema —
Tipos de datos estructurados encontrados en el JSON-LD. Son los que abren la puerta a los resultados enriquecidos.
El servidor
Lo que ha costado construir este HTML antes de enviarlo.
generación —
Lo que ha tardado WordPress en montar este documento, sin contar la red. Es la parte del TTFB que sí depende de ti. objetivo: < 200 ms
consultas sql —
Consultas a la base de datos necesarias para pintar esta página. Cuando se disparan, casi siempre hay un plugin detrás. objetivo: < 40
memoria —
Memoria máxima que ha usado PHP durante la generación.
