Minificar JavaScript promete velocidad y entrega 3% de LCP en el mejor escenario. Servir la imagen correcta entrega 30%. Esa diferencia de escala guía este análisis de las Core Web Vitals: las métricas que Google usa en el ranking, con las optimizaciones ordenadas por impacto medido en producción, no por orden de checklist.

¿Cuáles son los límites de cada métrica?

Un LCP por debajo de 2,5s mide la percepción de carga del elemento visible más grande. INP, que reemplazó al FID en marzo de 2024, exige responder a interacciones en menos de 200ms a lo largo de toda la sesión. CLS queda bajo 0,1 cuando nada salta en pantalla. Los datos de campo le ganan a los números de laboratorio: CrUX y RUM capturan Androids de gama media en red 4G, mientras que tu MacBook con SSD cuenta otra historia.

¿Por qué las imágenes dominan el LCP?

El hero suele ser una imagen, así que ahí vive la ganancia. AVIF o WebP recortan entre 20 y 50% del peso frente al JPEG, srcset sirve el tamaño correcto para cada viewport y fetchpriority="high" adelanta la descarga del elemento principal. El error clásico persiste: aplicar loading="lazy" en el propio LCP hace que el navegador descubra la imagen solo después del layout, y pagas segundos de retraso.

¿Qué bloquea al INP?

  • Tareas largas en la main thread: code splitting por ruta e hidratación diferida le devuelven espacio al browser para responder
  • Scripts de terceros: tag manager, chat widget y pixel de publicidad cuestan cientos de ms por interacción
  • DOM gigante: por encima de unos 1.400 nodos, el recálculo de estilo y layout se vuelve lento

scheduler.yield() divide tareas largas sin renunciar a prioridad, y el efecto aparece directo en el INP.

¿De dónde viene el CLS?

Una imagen sin width ni height declarados, el intercambio de fuente web y un banner inyectado sobre el contenido explican la mayoría de los casos. En fuentes, font-display: optional le gana a swap para CLS porque elimina el período de fallback visible. Reserva espacio con aspect-ratio y haz preload de las fuentes usadas por encima del pliegue.

¿Cuánto JavaScript necesita tu página?

Envía menos código: el code splitting por ruta ya es default en Next.js y Nuxt, pero bundles únicos todavía aparecen en SPAs legadas. Corre un bundle analyzer (webpack-bundle-analyzer, rollup-plugin-visualizer) y confirma si el tree-shaking funciona. Las auditorías de dependencias tumbaron moment.js de muchos proyectos; cada freeloader eliminado vale más que cualquier microbenchmark de runtime.

¿Qué papel juega el servidor en el resultado?

Cache en el borde con Cache-Control correcto saca el origen de la ecuación para visitas repetidas. Early Hints (status 103) adelanta el preload del CSS crítico antes de que el servidor termine de armar el HTML. La elección SSR versus CSR merece decisión por ruta, no por aplicación: página de marketing en SSR, dashboard autenticado en CSR con datos en cache.

¿Cómo medir sin engañarse?

El informe Core Web Vitals de Search Console señala qué templates sufren en campo. PageSpeed Insights hace el diagnóstico URL por URL, y la librería web-vitals envía métricas reales a tu analytics, con atribución a releases. Configura alerta ante regresión de métrica de campo dentro de la semana posterior a cada deploy; el culpable seguirá fresco en el git log.