Rendimiento percibido frente a rendimiento medido
Por qué dos páginas con el mismo tiempo de carga se sienten distintas, qué factores modulan la percepción de la espera, y cuándo el rendimiento percibido es honesto y cuándo es un engaño.
Dos páginas que tardan exactamente 2.400 milisegundos pueden producir experiencias completamente distintas según qué ocurra durante esos 2.400 milisegundos. La percepción de la duración no es lineal con la duración real: depende del orden en que aparecen las cosas, de si el usuario entiende qué está pasando, y de si tiene algo que hacer mientras espera. Esta es la parte del rendimiento que no se resuelve con ingeniería de sistemas sino con diseño de la secuencia.
- Enumerar los factores que hacen que una espera se perciba más corta o más larga a igual duración.
- Distinguir el rendimiento percibido honesto del que solo desplaza el problema.
- Diseñar el orden de aparición del contenido para minimizar la espera percibida.
- Identificar los patrones de percepción que empeoran las métricas medidas.
Qué modula la percepción de la espera
La investigación sobre psicología de las colas identifica varios factores que alteran la duración percibida sin tocar la real. Los que aplican directamente a una interfaz son estos.
La espera ocupada se percibe más corta que la desocupada. Si durante la carga el usuario puede leer algo, mirar algo o empezar a orientarse, el tiempo se le hace más corto. De ahí que mostrar el encabezado, la navegación y el texto antes que las imágenes sea mejor que mostrarlo todo de golpe al final, aunque el momento en que todo está listo sea el mismo.
La espera sin explicación se percibe más larga. Una pantalla en blanco durante dos segundos es peor que dos segundos con un indicador que diga qué está pasando. Y no porque el indicador acorte nada, sino porque elimina la duda de si el sistema está roto.
La incertidumbre alarga la espera. Una espera de duración desconocida se percibe más larga que una de la misma duración con final visible. Es la razón por la que un progreso determinado que va del 0 al 100 se tolera mejor que una ruleta que gira, aunque ambos duren lo mismo.
Las esperas injustas se perciben más largas. Si el usuario cree que su espera no está justificada, la vive peor. En una interfaz esto se traduce en que las esperas que ocurren después de una acción explícita del usuario se toleran mejor que las que ocurren sin motivo aparente.
El final pesa más que el promedio. La evaluación retrospectiva de una experiencia la dominan el momento peor y el momento final. Una carga que va apareciendo suavemente y termina con un salto de layout brusco se recuerda peor que una que tarda lo mismo y acaba en calma.
El orden de aparición importa más que el total
La consecuencia práctica más importante es que el mismo presupuesto de tiempo reparte muy distinto según el orden. Compara dos estrategias con idéntico tiempo total hasta que la página está completa.
Estrategia A: todo o nada
0 ms ---------------------------- 2400 ms
[ en blanco ][pagina completa]
Estrategia B: aparicion progresiva
0 ms ------ 700 ---- 1400 ------- 2400 ms
[en blanco][cabecera][texto][imagenes y resto]El tiempo hasta la página completa es el mismo. La experiencia no. En la estrategia B, el usuario tiene contenido útil a los 700 ms y puede empezar a leer y a orientarse; el resto llega mientras está ocupado. En la A, mira una pantalla en blanco durante 2,4 segundos, y esos 2,4 segundos son de espera desocupada, sin explicación y de duración desconocida: los tres factores que alargan la percepción actuando a la vez.
Y aquí viene lo interesante: las métricas modernas capturan esta diferencia. El FCP de la estrategia B es de 700 ms frente a 2.400 de la A. El LCP puede ser similar o mejor. Es decir, la métrica y la percepción están alineadas, cosa que no ocurría con las métricas antiguas como load, que daban el mismo valor a ambas. Esa alineación no es casual: las Core Web Vitals se diseñaron precisamente para medir lo que el usuario percibe.
Sirve primero lo que permite orientarse, después lo que permite leer, y al final lo que solo decora. En términos concretos: estructura y texto antes que imágenes decorativas, y la imagen del área visible antes que las de más abajo. El pecado más común es el inverso: una fuente web que bloquea todo el texto mientras se descarga, con lo cual el usuario tiene el diseño completo y ni una palabra que leer.
Percibido honesto frente a percibido tramposo
No todas las técnicas de rendimiento percibido son legítimas. La distinción es clara y merece precisión.
Es honesto cuando adelantas contenido real. Renderizar el encabezado a los 500 ms en vez de a los 2.000 es una mejora auténtica: el usuario tiene información antes. Lo mismo vale para mostrar los datos que ya tienes en caché mientras revalidas por detrás, o para responder visualmente al clic antes de que llegue la confirmación del servidor.
Es tramposo cuando la señal no corresponde a nada. Un esqueleto que simula seis tarjetas cuando la respuesta va a traer dos, o una barra de progreso que avanza a velocidad fija independientemente del progreso real, o un indicador de carga que se muestra durante un tiempo mínimo artificial “para que se vea que hemos trabajado”. El usuario aprende rápido a desconfiar de esas señales, y cuando desconfía, dejan de funcionar incluso cuando son ciertas.
Hay un caso intermedio que genera debate: la actualización optimista, mostrar el resultado de una acción antes de que el servidor la confirme. Es honesta si la probabilidad de fallo es muy baja y la reversión es clara y comprensible. Deja de serlo si el fallo es frecuente o si revertir deja al usuario sin entender qué ha pasado. Marcar un mensaje como leído es un buen candidato. Confirmar un pago no lo es.
Existe además una categoría claramente ilegítima que conviene nombrar porque es tentadora: retrasar contenido para mejorar la métrica. Si tu elemento LCP es una imagen grande y decides ocultarla hasta que cargue todo lo demás para que el elemento LCP pase a ser un titular pequeño que aparece antes, tu LCP baja y tu usuario ve la imagen más tarde. Has optimizado el número a costa de la experiencia. Es la definición exacta de la ley de Goodhart aplicada al rendimiento.
Los esqueletos de carga se han convertido en un reflejo, y la mitad de las veces empeoran las dos cosas a la vez, la percepción y la métrica. La prueba objetiva es esta: graba la carga en vídeo, ponla a un cuarto de velocidad y cuenta cuántas veces cambia la geometría de la pantalla entre el esqueleto y el contenido real. Si el esqueleto tiene una altura distinta de la del contenido que sustituye, cada sustitución es un desplazamiento de layout que suma al CLS, y el usuario percibe la página como inestable justo en el momento en que empieza a leer. Un esqueleto correcto reserva exactamente el mismo espacio que ocupará el contenido, con el mismo número de elementos, o no se pone. Y hay un caso donde directamente no debe ponerse: cuando la espera es menor de unos 300 ms, porque entonces el esqueleto aparece y desaparece en un parpadeo que se percibe como un fallo visual, no como una carga. Muestra el esqueleto solo si la espera supera ese umbral, y hazlo con un retardo para no penalizar el caso rápido.
Diseñar la secuencia
Cerrando con un método concreto. Para diseñar el orden de aparición de una vista, haz este ejercicio antes de escribir código.
- Lista lo que hay en la pantalla y clasifícalo en tres cubos: lo que permite entender dónde estás, lo que permite empezar la tarea, y lo que completa la experiencia.
- Asigna presupuesto a cada cubo. El primero debería estar antes del segundo perceptivo; el segundo, antes de los 2,5 segundos del objetivo del LCP; el tercero puede llegar después.
- Comprueba las dependencias. Si algo del primer cubo depende de una petición de red que depende de otra, no vas a cumplir el presupuesto y hay que romper la cadena.
- Reserva el espacio de todo lo que llegue tarde. Cualquier cosa del cubo tres que aparezca sin hueco reservado convierte tu mejora de percepción en un salto de layout.
- Verifica con vídeo, no con números. Graba la carga y mírala fotograma a fotograma. Los números te dicen cuándo ocurrió cada cosa; el vídeo te dice si la secuencia tiene sentido.
La lección siguiente entra en el caso concreto que más se usa y peor se hace: los indicadores de progreso.