Velocidad Web y Core Web Vitals: Guía para Mejorar Rendimiento SEO

La velocidad web es un factor de ranking directo desde 2020. Los Core Web Vitals son las 3 métricas que Google utiliza para medir experiencia de usuario.

¿Por Qué Importa la Velocidad?

• 53% de usuarios abandona sitios que tarden > 3 segundos
• Ranking directo en Google
• Mejor conversión
• Menos bounce rate

Los 3 Core Web Vitals

1. Largest Contentful Paint (LCP)

Tiempo para cargar el contenido más grande visible.

Target: < 2.5 segundos

Problemas comunes:

• Servidores lentos
• Imágenes no optimizadas
• JavaScript bloqueante
• CSS subóptimo

Soluciones:

• Upgrade hosting
• Comprimir imágenes a WebP
• Demorar JS no crítico
• Minificar CSS

2. First Input Delay (FID)

Tiempo de respuesta cuando usuario interacciona.

Target: < 100ms

Problemas comunes:

• JavaScript pesado bloqueando main thread
• Ejecución de código de terceros
• Falta de web workers

Soluciones:

• Splitear JavaScript (code splitting)
• Demorar JS innecesario
• Web Workers para tareas pesadas

3. Cumulative Layout Shift (CLS)

Movimiento visual inesperado de elementos.

Target: < 0.1

Problemas comunes:

• Imágenes sin dimensiones especificadas
• Ads cargando fuera de lugar
• Fonts que cambian de tamaño
• Iframes sin especificar tamaño

Soluciones:

/* Especifica dimensiones */
<img width="400" height="300" src="...">

/* Reserva espacio para contenido dinámico */
.ad-container {
  min-height: 300px;
}

Herramientas de Medición

PageSpeed Insights

• Gratuito
• Reporte detallado
• Sugerencias específicas
• Lab vs Field data

WebPageTest

• Análisis profundo
• Waterfall detallada
• Comparación con competencia
• Detalles de terceros

Lighthouse

• Chrome DevTools integrado
• Performance, Accessibility, Best Practices
• Local testing

Google Search Console

• Real User Data (CrUX)
• Páginas problemáticas
• Tendencias

Estrategia de Optimización

Nivel 1: Imágenes (Mayor impacto)

1. Formato WebP moderno
2. Compresión sin pérdida
3. Tamaños responsive
4. Lazy loading

<img 
  srcset="small.jpg 600w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  loading="lazy"
  src="large.jpg"
>

Nivel 2: CSS/JS

1. Minificación
2. Tree-shaking
3. Code splitting
4. Demorar JS

Nivel 3: Infraestructura

1. Upgrade servidor
2. CDN global
3. Caching agresivo
4. Compresión GZIP

Nivel 4: Terceros

1. Auditar scripts de terceros
2. Cargar estratégicamente
3. Considerar alternativas
4. Limitar cantidad

Optimización por Métrica

Mejorar LCP

• Optimizar imágenes (70% del impacto)
• Preload recursos críticos
• Minificar CSS
• Demorar fonts no críticas

Mejorar FID

• Reducir JavaScript total
• Demorar inicialización
• Web Workers para proceso pesado
• Time Slicing

Mejorar CLS

• Especificar tamaños
• Evitar contenido dinámico sin espacio
• Fonts preload
• Animations con transform

Checklist de Optimización

• [ ] Imágenes en WebP y comprimidas
• [ ] Lazy loading activo
• [ ] CSS minificado y crítico inline
• [ ] JS demorado/deferred
• [ ] Fonts preload
• [ ] Caching headers optimizados
• [ ] GZIP habilitado
• [ ] CDN configurado
• [ ] 404s y errores 503 revisados
• [ ] Core Web Vitals < umbral

Impacto en Ranking

Estudios muestran:

• Cada 1 seg demora = 7% menos conversiones
• Sitios con LCP < 2.5s = 24% menos abandono
• CLS 0.1 = 3x menos interacciones erróneas

Monitoreo Continuo

1. Configura alertas en GSC
2. Monitorea weekly
3. Actúa ante degradación
4. Celebra mejoras en SearchConsole

¿Necesitas ayuda? Nuestra Auditoría SEO incluye análisis detallado de Core Web Vitals y plan de mejora.