1. ¿Qué son los Core Web Vitals y por qué afectan tu ranking?
Los Core Web Vitals son un conjunto de tres métricas de rendimiento reales recopiladas por Google a través del Informe de Experiencia del Usuario de Chrome (CrUX). Estas métricas miden aspectos de la experiencia de usuario: velocidad de carga visual, responsividad a las interacciones y estabilidad visual de la pantalla. En Chile, con conexiones móviles variables de 4G/5G, optimizar estas señales asegura que no pierdas hasta un 40% de visitas debido al rebote temprano.
| Métrica | Bueno | Necesita Mejora | Pobre |
|---|---|---|---|
| LCP (Carga) | ≤ 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (Interactividad) | ≤ 200ms | 200ms - 500ms | > 500ms |
| CLS (Estabilidad) | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
2. LCP (Largest Contentful Paint) — El Tiempo de Carga Principal
El LCP mide cuánto tarda en cargarse el elemento de texto o imagen más grande de la zona visible. En e-commerce chilenos, el LCP suele ser el banner principal o la foto del producto destacado.
Optimización clave: Precarga la imagen destacada (LCP element) agregando la etiqueta rel="preload" en el header de tu HTML:
<link rel="preload" fetchpriority="high" as="image" href="/hero.webp" type="image/webp">3. INP (Interaction to Next Paint) — Crítico para E-commerce Chilenos
El INP evalúa la responsividad de tu página frente a clics, toques o entradas de teclado del usuario. Reemplazó al antiguo FID (First Input Delay) en marzo de 2024 para ofrecer una métrica que evalúa todo el ciclo de vida del usuario en la página, y no solo el primer clic.
Los e-commerce construidos en builders pesados de WordPress o que cargan decenas de scripts de analítica suelen fallar en INP debido al bloqueo prolongado del hilo principal de ejecución por parte de JavaScript.
4. CLS (Cumulative Layout Shift) — Estabilidad Visual
¿Alguna vez has intentado hacer clic en un botón en tu celular y justo antes de presionar, la página se mueve y terminas presionando un anuncio? Eso es exactamente lo que mide el CLS.
Cómo solucionarlo: Asegúrate de que todas las imágenes y bloques de publicidad tengan dimensiones width y height explícitas en el código HTML:
<img src="logo.webp" width="180" height="60" alt="Logo Sustenta Web">5. 10 Optimizaciones Técnicas de Alto Impacto
- 1. Convertir imágenes a WebP/AVIF: Reduce hasta un 80% el tamaño del archivo sin pérdida notable de calidad visual.
- 2. Implementar Lazy Loading: Carga imágenes no críticas de forma diferida usando
loading="lazy". - 3. Usar CDN local: Sirve los recursos desde servidores cercanos (Santiago de Chile) para reducir la latencia de red.
- 4. Habilitar la compresión Gzip o Brotli: Disminuye el peso de los archivos de texto (HTML, CSS y JS) en tránsito.
- 5. Eliminar CSS y JS que bloqueen la carga: Usa directivas
deferoasyncen los elementos script de terceros.
