Monitorea los Core Web Vitals de Google para mejorar la experiencia del usuario y el posicionamiento en los buscadores.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son las métricas de Google para medir la experiencia del usuario:
| Métrica | Nombre completo | Mide | Bueno | Necesita mejora | Malo |
|---|---|---|---|---|---|
| LCP | Largest Contentful Paint | Carga | ≤2,5s | 2,5-4s | >4s |
| INP | Interaction to Next Paint | Interactividad | ≤200ms | 200-500ms | >500ms |
| CLS | Cumulative Layout Shift | Estabilidad visual | ≤0,1 | 0,1-0,25 | >0,25 |
Por qué importan
- Impacto en SEO: Google usa los CWV como señales de posicionamiento
- Experiencia del usuario: Se correlacionan con la participación y conversión
- Presupuesto de rendimiento: Establece objetivos medibles
Habilitando el monitoreo de CWV
La recopilación de Core Web Vitals está habilitada de forma predeterminada en todos los planes, incluido Free. Mientras tu script de seguimiento esté cargado, el tracker mide LCP, CLS, INP, FCP y TTFB en cada sesión de visitante real y envía exactamente un beacon cuando el visitante abandona la página.
Tu etiqueta de script estándar es suficiente:
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
Sin atributos adicionales, sin cambios en el script. Para confirmar que el tracker está disparando, abre la pestaña Install Health en la configuración de tu sitio web.
Deshabilitando para un sitio específico (avanzado)
Si necesitas excluir un sitio rastreado de la recopilación de CWV, establece el feature flag enable_core_web_vitals a false en la configuración de ese sitio. No hay un interruptor en la interfaz porque el predeterminado está habilitado para todos — contacta a soporte en [email protected] si deseas cambiarlo para uno de tus sitios.
Descripción general del panel
Resumen de CWV
Abre el panel de tu sitio web y selecciona la pestaña Performance (bajo el grupo COMPORTAMIENTO en la barra lateral):
Descripción general de Core Web Vitals
LCP ████████████████░░░░ 2.1s ✓ Bueno
INP ██████████████████░░ 156ms ✓ Bueno
CLS ████████████████████ 0.05 ✓ Bueno
Puntuaciones P75
La barra de herramientas te permite cambiar el percentil (P75, P90, P95, P99), filtrar por dispositivo (Todos, Escritorio, Móvil) y cambiar el rango de tiempo (24 horas, 7 días, 30 días o 90 días).
Distribución de puntuaciones
Cada mosaico de métrica muestra cómo se distribuyen tus visitas entre los umbrales Bueno/Necesita mejora/Malo para el percentil seleccionado:
| Calificación | LCP | INP | CLS |
|---|---|---|---|
| Bueno | 65% | 72% | 85% |
| Necesita mejora | 25% | 20% | 10% |
| Malo | 10% | 8% | 5% |
Largest Contentful Paint (LCP)
Qué mide
Tiempo hasta que el elemento de contenido más grande sea visible:
- Imágenes
- Miniaturas de video
- Imágenes de fondo
- Bloques de texto
LCP en el panel
- Tendencia en el tiempo: LCP en el percentil seleccionado en el rango elegido
- Por página: Rutas más lentas
- Por dispositivo: Escritorio vs Móvil
- Por geografía: Un mapa coroplético de LCP por país/región
- Elementos problemáticos: Los elementos específicos medidos como el LCP
Problemas comunes de LCP
| Problema | Impacto | Solución |
|---|---|---|
| Respuesta del servidor lenta | Alto | Optimizar TTFB, usar CDN |
| Recursos que bloquean el renderizado | Alto | Diferir CSS/JS no críticos |
| Imágenes grandes | Alto | Optimizar, usar WebP, carga diferida |
| Renderizado del lado del cliente | Medio | SSR, pre-renderizado |
| Scripts de terceros | Medio | Carga asincrónica, eliminar innecesarios |
Mejorando el LCP
Optimización de imágenes:
<!-- Precargar imagen LCP -->
<link rel="preload" as="image" href="hero.webp">
<!-- Imágenes receptivas -->
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="100vw"
loading="eager"
fetchpriority="high"
/>
Indicios de recursos:
<!-- Preconectar a orígenes críticos -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">
Interaction to Next Paint (INP)
Qué mide
Capacidad de respuesta a las interacciones del usuario:
- Clics
- Pulsaciones
- Pulsaciones de teclas
INP mide el tiempo desde la interacción hasta la próxima actualización visual.
INP en el panel
- Puntuación INP: En el percentil seleccionado (por defecto P75)
- Por página: Rutas más lentas para interactividad
- Por dispositivo: Escritorio vs Móvil
Problemas comunes de INP
| Problema | Impacto | Solución |
|---|---|---|
| Tareas JavaScript largas | Alto | Dividir tareas, usar web workers |
| DOM grande | Medio | Virtualizar listas, simplificar estructura |
| Manejadores de eventos pesados | Alto | Debounce, optimizar manejadores |
| Trashing de diseño | Medio | Agrupar lecturas/escrituras DOM |
| Scripts de terceros | Medio | Carga diferida, aislar |
Mejorando el INP
Dividiendo tareas largas:
// Antes: Tarea síncrona larga
function processLargeArray(items) {
items.forEach(item => expensiveOperation(item));
}
// Después: Ceder al hilo principal
async function processLargeArray(items) {
for (const item of items) {
expensiveOperation(item);
// Ceder para permitir el renderizado
await new Promise(r => setTimeout(r, 0));
}
}
Usando requestIdleCallback:
function runWhenIdle(callback) {
if ('requestIdleCallback' in window) {
requestIdleCallback(callback, { timeout: 2000 });
} else {
setTimeout(callback, 100);
}
}
Cumulative Layout Shift (CLS)
Qué mide
Estabilidad visual - cuánto se desplaza el contenido inesperadamente:
- Imágenes que se cargan sin dimensiones
- Anuncios/incrustaciones que se redimensionan
- Inserción de contenido dinámico
- Carga de fuentes web
CLS en el panel
- Puntuación CLS: En el percentil seleccionado (por defecto P75)
- Por página: Páginas con mayor desplazamiento
- Por dispositivo: Escritorio vs Móvil
Problemas comunes de CLS
| Problema | Impacto | Solución |
|---|---|---|
| Imágenes sin dimensiones | Alto | Siempre establecer ancho/alto |
| Anuncios sin espacio reservado | Alto | Usar contenedores de espacio reservado |
| Contenido dinámico por encima de la línea de flotación | Medio | Reservar espacio, usar transformaciones |
| Carga de fuentes web | Medio | Usar font-display: swap |
| Incrustaciones que se cargan tarde | Medio | Reservar espacio, carga diferida |
Mejorando el CLS
Reservando espacio para imágenes:
<!-- Siempre incluir dimensiones -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
<!-- O usar relación de aspecto -->
<style>
.image-container {
aspect-ratio: 16 / 9;
}
</style>
Reservando espacio para anuncios:
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}
Estrategia de carga de fuentes:
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
Análisis a nivel de página
Desglose por página
La pestaña Performance incluye un desglose por ruta para que veas qué páginas afectan una métrica:
- Abre la pestaña Performance
- Desplázate hacia el desglose por página
- Ordena para encontrar los peores resultados
- Usa el panel de elementos problemáticos para ver qué se mide como LCP
Tarjeta de rendimiento de la página
/products/widget
LCP: 2.8s ⚠ Necesita mejora
INP: 145ms ✓ Bueno
CLS: 0.18 ⚠ Necesita mejora
Elementos problemáticos:
• Elemento LCP: img.hero-banner
• Origen CLS: .reviews-widget
• Objetivo INP: button.add-to-cart
Muestras: 12.450
El panel de elementos problemáticos muestra el elemento de página específico medido como el LCP, la mayor fuente de desplazamiento de diseño y el elemento con el que un usuario interactuó para el INP más lento. Estos selectores CSS te indican directamente qué necesita repararse.
Segmentación
Por tipo de dispositivo
Filtra toda la pestaña Performance por dispositivo (Todos, Escritorio o Móvil):
Dispositivo LCP INP CLS
Escritorio 2.0s 120ms 0.05
Móvil 3.2s 210ms 0.12
Por geografía
El mapa coroplético muestra puntuaciones CWV por país/región para ayudarte a identificar problemas de CDN o ubicación del servidor:
Región LCP INP CLS
América del N. 2.1s 140ms 0.05
Europa 2.4s 150ms 0.06
Asia 3.6s 180ms 0.08
Alertas e informes
Las alertas automatizadas de Zenovay cubren detección de anomalías y picos de tráfico en lugar de umbrales Web Vitals por métrica. Para recibir notificaciones cuando el rendimiento general cambia y programar resúmenes recurrentes, consulta la guía dedicada Alertas de rendimiento.
Integración con otras herramientas
Google Search Console
Compara datos de Zenovay con GSC:
- Zenovay: Datos de usuario real (RUM)
- GSC: Datos de laboratorio + datos de campo
Lighthouse
Correlaciona auditorías de Lighthouse con datos del mundo real.
PageSpeed Insights
Usa Zenovay para monitoreo, PageSpeed para recomendaciones.
Comparación histórica
Análisis de tendencias
- Compara los rangos de 24h, 7d, 30d y 90d
- Ve la mejora en el tiempo
- Correlaciona tendencias con tus fechas de implementación
- Rastreat hacia tus objetivos
Mejores prácticas
Estrategia de monitoreo
- Establecer baselines: Conoce el rendimiento actual
- Definir objetivos: Basados en industria/competidores
- Monitorear continuamente: No solo auditorías puntuales
- Análisis segmentado: Móvil a menudo peor
- Priorizar correcciones: Impacto vs esfuerzo
Presupuesto de rendimiento
Métrica Actual Objetivo Presupuesto
LCP 2.8s 2.0s ✗ Excedido
INP 150ms 150ms ✓ En objetivo
CLS 0.08 0.1 ✓ Bajo objetivo
Revisiones regulares
- Semanal: Verificar regresiones
- Mensual: Análisis profundo
- Trimestral: Planificación estratégica
Solución de problemas
Los datos no aparecen
Verifica:
- Script instalado correctamente (usa la pestaña Install Health en la configuración de tu sitio para confirmar que el tracker está disparando)
- La recopilación de Core Web Vitals no ha sido deshabilitada para el sitio (está habilitada por defecto — consulta « Deshabilitando para un sitio específico » arriba)
- Tráfico suficiente (se requieren usuarios reales)
Valores inesperados
Considera:
- El tráfico de bots sesgando datos
- Tráfico de desarrollo/staging
- Diferencias en la compatibilidad del navegador
Discrepancia con datos de laboratorio
Normal – RUM captura:
- Condiciones reales de red
- Rendimiento real del dispositivo
- Comportamiento real del usuario
- Distribución geográfica