Core Web Vitals: Mejorando la Velocidad y la Experiencia del Usuario

En el pasado, la "velocidad" era un concepto vago. ¿Cargó rápido el sitio? Hoy, Google ha cuantificado exactamente qué se siente como "rápido" y "fluido" para un usuario. Estas métricas se llaman Core Web Vitals (CWV).

Desde que se convirtieron en una señal de clasificación, las CWV han cambiado el enfoque de la velocidad bruta del servidor a la experiencia de usuario percibida. No se trata solo de qué tan rápido carga el código; se trata de qué tan pronto el usuario puede usar realmente la página.

Tres métricas específicas componen las Core Web Vitals. Para pasar la evaluación, una página debe calificar como "Bueno" en las tres.

1. LCP (Largest Contentful Paint) – Rendimiento de Carga

"¿Qué tan rápido aparecen las cosas principales?"

LCP mide el tiempo que tarda el elemento visible más grande (generalmente una imagen de héroe, video o titular principal) en cargar completamente y aparecer en la pantalla. Le dice al usuario: "Esta página realmente está sucediendo."

Los Umbrales

• Bueno: ≤ 2.5 segundos
• Necesita Mejora: ≤ 4.0 segundos
• Pobre: > 4.0 segundos

Causas Comunes de Pobre LCP

• Tiempos de Respuesta del Servidor Lentos: Si tu hosting es barato o está sobrecargado, el navegador espera demasiado para recibir datos.
• Retardo de Carga de Recursos: La imagen de héroe no está optimizada o se carga mediante carga diferida (lazy-loading), lo cual debe evitarse para la imagen superior.
• JavaScript que Bloquea el Renderizado: El navegador pausa la construcción de la página para leer un archivo de script.

Cómo Mejorar

• Optimizar Imágenes: Comprime imágenes (formato WebP) y asegúrate de que la imagen de héroe no tenga carga diferida.
• Usar un CDN: Una Red de Entrega de Contenido sirve imágenes desde un servidor físicamente más cercano al usuario.

2. INP (Interaction to Next Paint) – Interactividad

"¿Se congela la página cuando hago clic?"

Nota: INP reemplazó oficialmente a First Input Delay (FID) como la métrica principal en marzo de 2024.

INP observa la latencia de todas las interacciones que un usuario realiza con una página (clics, toques y pulsaciones de teclas) a lo largo de toda su visita. Mide el tiempo entre la acción del usuario y la capacidad del navegador para pintar el siguiente cuadro que muestra el resultado (por ejemplo, abrir un menú o expandir un acordeón).

Los Umbrales

• Bueno: ≤ 200 milisegundos
• Necesita Mejora: ≤ 500 milisegundos
• Pobre: > 500 milisegundos

Causas Comunes de Pobre INP

• Ejecución Pesada de JavaScript: El "hilo principal" del navegador está demasiado ocupado procesando código para responder al clic del usuario.
• Diseños Complejos: El navegador tarda demasiado en volver a dibujar la página después de una interacción.

Cómo Mejorar

• Dividir Tareas Largas: Los desarrolladores pueden dividir grandes fragmentos de JavaScript en piezas más pequeñas para que el navegador pueda respirar.
• Optimizar Manejadores de Eventos: Asegúrate de que el código activado por un clic sea ligero y rápido.

3. CLS (Cumulative Layout Shift) – Estabilidad Visual

"¿El contenido salta inesperadamente?"

Todos hemos experimentado esto: Vas a hacer clic en un botón, pero de repente un anuncio carga encima de él, empujando el contenido hacia abajo, y accidentalmente haces clic en lo incorrecto. Esto es un cambio de diseño. CLS mide la suma total de todos los cambios de diseño inesperados que ocurren durante la vida útil de la página.

Los Umbrales

• Bueno: ≤ 0.1
• Necesita Mejora: ≤ 0.25
• Pobre: > 0.25

Causas Comunes de Pobre CLS

• Imágenes Sin Dimensiones: Si no le dices al navegador width="800" y height="600", no sabe cuánto espacio reservar.
• Anuncios e Incrustaciones: Los banners de anuncios que cambian de tamaño dinámicamente a menudo empujan el contenido hacia abajo.
• Fuentes Web: A veces el texto está oculto hasta que la fuente personalizada se descarga (FOIT) o cambia de estilo (FOUT), causando que la altura de la línea cambie.

Cómo Mejorar

• Establecer Dimensiones: Siempre incluye atributos de ancho y alto en elementos de imagen y video.
• Reservar Espacio: Si tienes un espacio publicitario dinámico, reserva un tamaño de caja específico para él en CSS para que el contenido no se mueva cuando cargue el anuncio.

Tabla Resumen: Las Métricas de un Vistazo

Cómo Medir Tu Puntuación

No necesitas adivinar. Google proporciona herramientas gratuitas para probar tu sitio contra estos estándares:

• PageSpeed Insights: La herramienta de referencia para una instantánea rápida. Proporciona tanto "Datos de Laboratorio" (simulados) como "Datos de Campo" (datos de usuarios reales).
• Google Search Console: El informe "Core Web Vitals" te muestra qué URLs en tu sitio están fallando y las agrupa por tipo de problema.
• Lighthouse: Una herramienta de desarrollador integrada en el navegador Chrome (Clic derecho > Inspeccionar > Lighthouse) para pruebas locales.