Cuando hablamos de velocidad no basta con que la página cargue rápido en nuestro portátil. Las métricas que se usan hoy miden cuándo aparece el contenido principal, cuánto tarda la página en responder a una interacción y cuánto se mueve el diseño mientras carga.

LCP: cuándo aparece lo que el visitante ha venido a ver

El Largest Contentful Paint mide el momento en el que se pinta el bloque más grande visible en pantalla. En un sitio corporativo suele ser la imagen de cabecera o el titular principal. Si esa imagen pesa más de lo necesario o se carga tarde porque hay scripts bloqueando el renderizado, el LCP se dispara aunque el resto de la página parezca rápida.

Lo que funciona: comprimir y servir la imagen en el formato adecuado, marcarla como prioritaria y evitar que el CSS crítico dependa de un archivo externo. Lo que no funciona: cambiar el color del titular o reordenar bloques decorativos. Eso no mueve la métrica.

INP: cuánto tarda la página en reaccionar

El Interaction to Next Paint sustituyó al antiguo FID y mide la latencia de todas las interacciones, no solo la primera. En portales con menús desplegables, filtros o formularios largos, el INP suele ser la métrica que más se resiente. Un clic que tarda medio segundo en mostrar respuesta se percibe como lentitud aunque la carga inicial haya sido buena.

Aquí el trabajo es menos visible: dividir tareas largas de JavaScript, diferir scripts de terceros que no son imprescindibles y revisar los manejadores de eventos que se ejecutan en cada pulsación. En un caso reciente, quitar una librería de animaciones que solo se usaba en la home redujo el INP del catálogo a la mitad.

CLS: cuánto se mueve el diseño mientras carga

El Cumulative Layout Shift mide los saltos inesperados de los elementos. El caso típico: un banner de cookies que empuja el contenido hacia abajo justo cuando el usuario va a pulsar un enlace, o una imagen sin dimensiones reservadas que desplaza el texto al aparecer.

La solución es casi siempre la misma: reservar espacio con atributos de ancho y alto en las imágenes, cargar las fuentes con font-display: swap y no insertar bloques publicitarios o avisos por encima del contenido sin haber previsto su hueco. Son cambios pequeños pero medibles.

Qué cambios dan resultado y cuáles son cosméticos

En los proyectos que revisamos, las mejoras reales vienen de tres frentes: peso de las imágenes, cantidad de JavaScript que se ejecuta en el navegador y estabilidad del layout. Los ajustes de color, tipografía o espaciado no afectan a estas métricas, aunque a veces se presenten como optimizaciones.

No hay una fórmula única. Un sitio editorial con muchas imágenes se parece poco a una tienda online con filtros dinámicos, y las prioridades cambian. Lo razonable es medir primero, identificar qué métrica está por debajo del umbral y atacar esa, no todas a la vez.