Caso de Estudio: Cómo Mejoramos las Core Web Vitals en un 60% en Dos Semanas

El Antes

Un sitio de e-commerce con Next.js, 12.000 SKUs y $2M de ingresos mensuales. Su tráfico orgánico había estado decayendo durante seis meses. Google Search Console mostró el problema: el 68% de las URL en el grupo de LCP "poor".

Después: 92% "good" en las tres métricas. Esto es exactamente lo que cambiamos.

LCP: 4.2s → 1.1s

La imagen hero de cada página de producto se cargaba a resolución completa: 4000x4000px, 2.3MB. El eslogan decía "optimizado", pero usaban un CDN genérico sin conversión a WebP. Para un desglose completo de cómo diagnosticar y arreglar el LCP, consulta nuestra guía de LCP en profundidad.

Lo que hicimos:

- Convertimos todas las imágenes hero a WebP con un 85% de calidad

- Añadimos fetchpriority="high" a la imagen LCP

- Implementamos tamaños de imagen responsivos mediante el componente Image de Next.js con el atributo sizes

- Movimos el widget de reseñas de terceros debajo del pliegue (cargaba 180KB de JS antes del hero)

La mayor victoria fue el widget de reseñas. Eliminar una sola etiqueta <script> del camino crítico recortó el LCP en 1.8 segundos por sí solo.

INP: 320ms → 95ms

El sitio tenía cinco scripts de analítica cargándose todos de forma eager. Session replay, heatmaps, dos proveedores de analítica distintos y un chatbot.

Lo que hicimos:

- Consolidamos a un solo proveedor de analítica

- Diferimos el chatbot a un idle callback

- Movimos los heatmaps a una carga lazy condicionada al consentimiento de cookies

- Auditamos los event handlers en la página de producto: un componente accordion estaba re-adjuntando listeners en cada renderizado

La herramienta de medición de latencia mostró que el 75% del INP provenía de scripts de terceros. Eliminar tres de ellos fue toda la solución.

CLS: 0.25 → 0.03

El layout se estaba desplazando por tres razones: las imágenes de producto sin width/height, un anuncio de banner inyectado dinámicamente y una web font que cambiaba después del paint.

Lo que hicimos:

- Añadimos width y height explícitos a todas las imágenes de producto

- Reservamos un espacio de 60px para el contenedor del anuncio de banner (incluso cuando está vacío)

- Precargamos la fuente principal y usamos font-display: optional

El Cronograma

Días 1-3: Auditoría con Lighthouse, WebPageTest y datos de CrUX. Días 4-8: Optimización de imágenes y consolidación de scripts. Días 9-12: Correcciones de layout y optimización de fuentes. Día 14: Medimos un 92% "good" en las tres métricas en Search Console.

¿El resultado? El tráfico orgánico se recuperó a los niveles anteriores en tres semanas y la tasa de conversión mejoró un 12%: las páginas más rápidas convierten mejor. Para una guía completa de cómo arreglar todas las métricas de Core Web Vitals, consulta nuestra guía para arreglar Core Web Vitals.

Artículos Relacionados

- Cómo Arreglar Problemas de Core Web Vitals: LCP, INP y CLS Explicados

- LCP en Profundidad: Diagnosticando y Arreglando la Core Web Vital Más Difícil