Core Web Vitals: cómo arreglarlos en empresa mediana

Si tu sitio carga lento, se mueve cuando el usuario va a hacer clic, o tarda en responder a interacciones, Google te está penalizando en ranking. No es opinión — es métrica oficial desde 2021 vía Core Web Vitals. Y para empresa mediana colombiana que quiere aparecer en búsquedas locales, los Core Web Vitals son lo más cercano a un examen aprobado/reprobado que existe.

Esta guía explica las 3 métricas, por qué cada una falla en sitios típicos de empresa mediana, y cómo arreglarlas sin reescribir el sitio desde cero.

Las 3 métricas oficiales

Google mide tres aspectos de la experiencia real del usuario en tu sitio:

LCP — Largest Contentful Paint

Qué mide: cuánto tarda en aparecer el elemento más grande visible (el hero image, el título principal, lo que el usuario percibe como “ya cargó”).

Umbrales 2026:

• Bueno: < 2.5 segundos
• Mejorable: 2.5 - 4.0 segundos
• Pobre: > 4.0 segundos

Causa más común de LCP malo: imágenes pesadas sin optimizar. Un hero image de 2MB en formato PNG sin CDN aumenta el LCP a 5-8 segundos sin esfuerzo.

CLS — Cumulative Layout Shift

Qué mide: cuánto se mueve el contenido visualmente mientras carga. Cero CLS = página carga estable. CLS alto = botones, texto, imágenes saltando — el usuario va a hacer clic en algo y se mueve, frustración inmediata.

Umbrales 2026:

• Bueno: < 0.1
• Mejorable: 0.1 - 0.25
• Pobre: > 0.25

Causa más común de CLS malo: imágenes sin dimensiones declaradas, fonts custom que cargan después y mueven el texto, ads dinámicos que inyectan altura, banners de cookies que aparecen tarde.

INP — Interaction to Next Paint

Qué mide: cuánto tarda el sitio en responder cuando el usuario hace clic, scrollea o tipea. Reemplazó al FID (First Input Delay) en marzo 2024.

Umbrales 2026:

• Bueno: < 200 ms
• Mejorable: 200 - 500 ms
• Pobre: > 500 ms

Causa más común de INP malo: demasiado JavaScript ejecutando en el thread principal. Scripts de tracking, chats, redes sociales, todos disputando atención al CPU del navegador.

Por qué importan más para Colombia que para mercados desarrollados

Razón estructural: en Colombia, la mayoría del tráfico web viene de móvil con conexión 4G de calidad variable. Lo que en San Francisco con fibra rinde bien (sitio “pesado pero bonito”) en Manizales con 4G en hora pico tarda 15 segundos en cargar — y el cliente cierra la pestaña.

Datos típicos de empresas medianas colombianas:

• LCP móvil promedio sin optimizar: 5-9 segundos
• CLS típico sitios WordPress con plantilla genérica: 0.3-0.6
• INP en sitios con tracking pesado: 400-800 ms

Casi todos fallan los 3 umbrales sin saberlo. Esto significa que arreglar Core Web Vitals te separa de la mayoría de competidores que también están fallando.

Cómo medir lo que tienes

Tres herramientas gratuitas:

PageSpeed Insights

pagespeed.web.dev — la herramienta oficial de Google. Pega tu URL y obtienes:

• Lighthouse score (simulación)
• Real User Metrics si tu sitio tiene suficiente tráfico (CrUX dataset)
• Diagnóstico con recomendaciones específicas

Importante: mide en modo móvil primero. Google rankea por la versión móvil. Si el desktop está OK pero móvil mal, sigues penalizado.

Lighthouse (Chrome DevTools)

Abrir Chrome DevTools (F12) → tab “Lighthouse” → Generate report. Te da el mismo análisis pero corriendo en TU navegador con TU conexión — útil para iterar sin esperar la actualización del CrUX dataset.

Google Search Console — Core Web Vitals report

Si ya tienes tu sitio en GSC, hay sección “Experiencia → Web Vitals” que muestra páginas con problemas reales detectados en datos de usuarios reales. Es la única vista que el algoritmo realmente usa.

Los fixes que cubren 80% de los casos

Orden de impacto típico (haz primero los más arriba):

1. Optimizar imágenes (fix LCP)

• Convierte PNG/JPG grandes a webp o avif. webp suele reducir 50-80% el tamaño sin pérdida visual.
• Sirve cada imagen al tamaño exacto donde se muestra (no 3000px para mostrar a 600px).
• Lazy loading en imágenes below the fold: loading="lazy" HTML attribute.
• Para hero image: loading="eager" + fetchpriority="high" para forzar prioridad de carga.
• Si tu hosting no incluye CDN, usa Cloudflare gratis frente a tu sitio.

2. Declarar dimensiones de imagen (fix CLS)

• Cada <img> debe tener width y height en HTML.
• También aplica a <iframe>, <video>, embeds de redes sociales.
• En WordPress: la mayoría de themes ya lo hacen, pero plugins que cargan contenido dinámicamente NO.
• En Astro/Next.js: el componente <Image> lo declara automáticamente cuando importas la imagen.

3. Cargar fonts inteligentemente (fix CLS)

• Usa font-display: swap en CSS para mostrar fallback antes que la custom font cargue.
• Pre-carga la font crítica: <link rel="preload" href="font.woff2" as="font" crossorigin> en el head.
• Limita a 1-2 fonts custom (no 5 weights distintos).

4. Diferir scripts (fix INP)

• Cada <script> que no es esencial para el first paint: defer o async.
• Google Tag Manager + scripts de chat + pixels: TODOS deben ir con defer.
• Mejor aún: si usas GTM, las cargas de plataformas (Meta Pixel, etc.) las disparas desde GTM con condiciones, no inline.

5. Reducir JavaScript del thread principal (fix INP)

• Bundle splitting: solo cargar el JS de cada página, no todo el JS del sitio.
• Si usas React/Vue/Astro/Next.js: usa rendering estático cuando sea posible. La mayoría de sitios de empresa mediana NO necesitan SPA — necesitan páginas estáticas con interactividad puntual.
• Plugin audit en WordPress: si tienes 30 plugins activos, probablemente la mitad agregan JS innecesario.

Casos comunes en empresas medianas colombianas

Sitio WordPress con plantilla pesada

Lo más común. Tema premium (Avada, BeTheme, Salient) carga librerías universales pesadas. Plugins acumulados durante años. Imágenes nunca optimizadas.

Solución típica: optimización con WP-Rocket o LiteSpeed Cache + plugin para webp (Imagify) + audit de plugins eliminando los no usados + CDN gratuito Cloudflare frente al sitio.

Impacto realista: LCP de 7s → 2.5s, CLS de 0.4 → 0.08, INP de 600ms → 250ms. Mejora visible en 1-2 semanas.

Sitio Shopify con apps acumuladas

Cada app de Shopify suele inyectar su JS. 15 apps activas = LCP malo + INP alto.

Solución: audit de apps eliminando no usadas (la mayoría de Shopify stores tienen apps que probaron y nunca quitaron) + optimización de tema custom (no plantilla amazonical) + WebP para imágenes de producto.

Sitio custom (Astro, Next.js, etc.)

La mayoría arrancan bien por diseño, pero se degradan con tiempo cuando se agrega tracking pesado sin disciplina. Audit periódico de scripts third-party + presupuesto de performance en cada nuevo feature.

bigdarwin.com — donde estás leyendo esto — está construido en Astro 6 + Tailwind 4 + Cloudflare Pages. Heroes de blog post pesan ~10KB en webp (vs ~700KB que pesaban antes). LCP típico bajo 2s en móvil colombiano.

La trampa de las herramientas de “optimización” pagas

WP-Rocket, NitroPack, Optimole, etc. — herramientas que prometen “1 click PageSpeed 100”. La verdad:

• Funcionan bien para los problemas obvios (caching, minificación)
• No arreglan los problemas estructurales (tema pesado, plugins inflados, imágenes mal dimensionadas)
• A veces introducen problemas nuevos (CSS o JS roto por minificación agresiva)

Usar herramienta de optimización SÍ ayuda, pero no sustituye el audit técnico real. Si tu sitio aún sale rojo después de instalar la herramienta, hay trabajo de fondo que solo desarrollador serio puede hacer.

Cuánto cuesta arreglar Core Web Vitals

Rangos realistas para empresa mediana colombiana:

• Audit + plan de acción (sin implementación): $800.000 - $1.500.000 COP
• Optimización completa sitio existente WordPress/Shopify (1-4 semanas trabajo): $2.000.000 - $5.000.000 COP
• Migración a stack moderno (Astro/Next.js): cae en presupuesto de diseño web completo

Cuándo NO vale la pena optimizar: cuando el sitio está tan mal estructurado que el audit recomienda reconstruir. Mejor invertir en nuevo sitio que parchear el viejo indefinidamente.

Si quieres acompañamiento

En Big Darwin hacemos audits de Core Web Vitals + implementación de fixes para empresas medianas colombianas. El audit inicial es relativamente barato — la mayor parte del valor está en la implementación correcta. Escríbenos por WhatsApp si tu sitio carga lento y no sabes por dónde empezar.

Lecturas relacionadas

• Cuánto cuesta un sitio web para empresa mediana
• CRO sitio web Colombia — performance es prerequisito de CRO
• SEO local para Manizales — Core Web Vitals como señal de ranking
• Glosario de marketing digital — definición concisa de Core Web Vitals