Core Web Vitals 2026: playbook CSS para mejorar LCP, INP y CLS

Core Web Vitals ya no son una metrica bonita para dashboards. Afectan visibilidad en buscadores, conversion y confianza. Si la pagina se ve bien pero tarda en pintar o se mueve mientras carga, el problema es real.

Por que CSS pesa tanto aqui

Muchos equipos culpan primero a JavaScript, pero CSS suele decidir cuanto tarda el navegador en pintar algo util:

• hojas globales demasiado grandes
• selectores caros
• bloques media inestables
• carga de fuentes mal resuelta

LCP

Para mejorar Largest Contentful Paint:

.hero-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
}

INP

INP castiga interfaces que se sienten lentas al interactuar. Conviene animar propiedades baratas:

.card {
  transition: transform .2s ease, opacity .2s ease;
}
.card:hover {
  transform: translateY(-2px);
}

Evita mover width, height, top o left si no es imprescindible.

CLS

La estabilidad visual sigue siendo critica:

• define width, height o aspect-ratio
• reserva espacio para banners y bloques async
• no metas contenido por encima de lo ya renderizado
• elige fallbacks de fuente cercanos al resultado final

.ad-slot {
  min-height: 280px;
}

Fuentes

• font-display: swap u optional
• subsets por idioma
• menos familias y menos pesos

Checklist

• auditar CSS muerto
• medir Web Vitals por tipo de plantilla
• revisar riesgo de CLS en nuevos componentes
• poner budgets en CI
• probar en dispositivos lentos

Conclusion

Optimizar Core Web Vitals no es una limpieza ocasional. Es disciplina de producto. Si el CSS se controla bien, media, fuentes y layout dejan de sabotear la experiencia.