SEO y rendimiento web
Core Web Vitals en la práctica para sitios corporativos
LCP, INP y CLS explicados con causas reales en sitios B2B: imágenes hero, JS bloqueante, fuentes web y terceros — con priorización de fixes por impacto.
13 min de lectura · Actualizado 2026-07-22
Qué miden LCP, INP y CLS (y qué no)
Largest Contentful Paint (LCP): tiempo hasta el elemento principal visible (hero image, H1 block, video poster). Bueno: ≤ 2.5 s. Malo en corporativos: imagen hero 2 MB sin comprimir servida desde origen lento.
Interaction to Next Paint (INP): sustituye FID; mide latencia de respuesta a interacciones (clic menú, botón CTA, acordeón FAQ) durante la visita. JS pesado en main thread y long tasks de terceros (chat, analytics) son culpables típicos.
Cumulative Layout Shift (CLS): movimiento visual inesperado. Clásicos: banner cookies sin altura reservada, fuentes web swap sin metric override, embeds de YouTube/LinkedIn sin aspect-ratio.
Core Web Vitals son señal de ranking y experiencia; no son sustituto de contenido relevante. Optimiza métricas después de indexabilidad básica.
Arreglar LCP sin reescribir el sitio
Identifica el elemento LCP en PageSpeed Insights o Chrome DevTools → Performance. En 80 % de landings corporativas es una imagen.
Comprime hero a WebP/AVIF con el compresor del Toolbox; sirve tamaño display real (max 1920px ancho), no original 4000px. Lazy-load solo below-the-fold — el hero LCP debe tener fetchpriority=high y no lazy.
Preload fuente crítica y LCP image si está above-the-fold: link rel=preload as=image href=hero.webp.
CDN (Cloudflare) + cache HTML estático o ISR en Next.js reduce TTFB. LCP > 4 s con TTFB < 200 ms casi siempre es asset, no servidor.
INP y el costo de JavaScript third-party
Audita long tasks > 50 ms en Performance panel. Chat widgets, heatmaps, A/B testing y tag managers cargados sync en head bloquean interacción.
Diferir JS no crítico: async/defer, import dinámico en React, Partytown para analytics si aplica. Cada script «solo 30 KB» suma.
Hydration parcial o islands architecture en frameworks modernos reduce JS enviado al cliente en landings mostly-static.
Mide INP en dispositivo móvil real gama media, no solo MacBook M3 en laboratorio. Field data en Search Console manda sobre lab cuando hay discrepancia.
CLS: reservar espacio es gratis
Toda imagen y video: width y height explícitos o aspect-ratio CSS. Next.js Image lo hace por defecto si lo usas consistentemente.
Fuentes: font-display: swap + size-adjust o fallback metric-matched reduce shift al cargar Inter/Roboto.
Anuncios, iframes embeds y banners GDPR: contenedor min-height fijo antes de que cargue el script externo.
CLS < 0.1 es objetivo «bueno». Un sitio corporativo con CLS 0.35 suele perder conversiones en formularios — el botón «Enviar» se mueve bajo el dedo.
Proceso de mejora continua
Baseline PageSpeed + CrUX field data Search Console. Prioriza URLs con impresiones orgánicas altas y CWV «necesita mejora».
Un fix por sprint: semana 1 imágenes, semana 2 fuentes, semana 3 third-party audit. Mide regresión en CI con Lighthouse CI budget.
Hosting LiteSpeed + cache y HTTP/3 en origen administrado complementa optimización front — no compensa hero de 3 MB.
Conecta combina auditoría SEO, hosting administrado LiteSpeed y desarrollo web optimizado para clientes que necesitan CWV en verde sin equipo front dedicado.
Ponlo en práctica ahora
Usa las herramientas gratuitas del Toolbox para validar tu configuración en minutos.
¿Necesitas que lo resolvamos contigo?
Un ingeniero de Conecta puede aplicar esto en tu operación: servicio relacionado o conversación directa.