¿Sabías que una mejora de solo 0.5 segundos en la percepción de carga puede aumentar las conversiones y la retención de usuarios? “La velocidad no es una característica: es una expectativa” – esta frase resume por qué las métricas de experiencia de página ya no son opcionales. Cuando un cliente me llamó la primera vez por un sitio lento, no eran las cifras las que les preocupaban: eran ventas que se esfumaban en cada milésima. En esta guía práctica vamos a realizar una auditoría y diagnóstico inicial centrada en Core Web Vitals y Page Experience (Lighthouse, PageSpeed Insights), con pasos reproducibles, interpretación de resultados y recomendaciones accionables para implementar en cualquier sitio – especialmente pensado para audiencia técnica y de negocio en México, aunque aplicable globalmente.
¿Qué son Core Web Vitals y por qué importan?
Core Web Vitals son un subconjunto de indicadores de rendimiento web que miden la experiencia real del usuario – carga, interactividad y estabilidad visual – y que Google utiliza como parte de su evaluación de Page Experience. Estas métricas ayudan a cuantificar la percepción del usuario sobre la velocidad y la calidad de la interacción en una página. Google recomienda a los propietarios de sitios que logren valores “Good” en estas métricas para mejorar la experiencia de los visitantes y su competitividad en resultados de búsqueda.
Importante: la Page Experience no es el único factor de ranking: es uno más entre muchos, pero puede actuar como tiebreaker cuando el contenido es similar entre competidores. Mejorar estos indicadores suele mejorar métricas de negocio (CTR, tiempo en página, conversiones).
Métricas clave: LCP, INP, CLS – definición y umbrales
Largest Contentful Paint (LCP)
- Qué mide: el tiempo que tarda en renderizarse el elemento de mayor tamaño en el viewport (texto, imagen, video). Es una aproximación a “cuándo el usuario ve el contenido principal”.
- Umbrales generales (referencia práctica):
- Good: ≤ 2.5 s
- Needs Improvement: 2.5 – 4 s
- Poor: > 4 s
- Consecuencia para auditoría: LCP lento => optimizar carga crítica (servidor, imágenes, CSS crítico, prioridad de recursos).
Interaction to Next Paint (INP)
- Qué mide: la latencia de respuesta percibida en interacciones del usuario (clics, taps, eventos). INP reemplazó a FID: captura la experiencia en interacciones múltiples y es más representativa de la interactividad real.
- Umbrales (práctica): Google propone percentiles para determinar “Good”; consulte Search Console y PageSpeed para los umbrales actuales. INP es ahora la métrica principal de interactividad en Core Web Vitals.
Cumulative Layout Shift (CLS)
- Qué mide: estabilidad visual – cuánto se desplazan (shift) los elementos visibles durante la carga y la interacción, medido como una puntuación.
- Umbrales:
- Good: < 0.1
- Needs Improvement: 0.1 – 0.25
- Poor: > 0.25
- Causa típica: recursos asíncronos sin espacio reservado, ads que inyectan contenido, fuentes que cambian layout.
Observación técnica: Google evalúa Core Web Vitals usando datos de usuarios reales (CrUX) y herramientas de laboratorio (Lighthouse/PageSpeed) para diagnóstico. Para pasar la “asssessment (análisis integral del rendimiento de un sitio web)” de Core Web Vitals, Google comprueba que el percentil 75 de las mediciones reales(tiempo de carga web) del sitio cumpla los umbrales. Esto es crítico para interpretación y priorización.
Herramientas de diagnóstico (qué usan los profesionales)
PageSpeed Insights (PSI)
- Qué ofrece: combina datos de campo (CrUX) con laboratorio (Lighthouse) y reporta LCP, INP, CLS además de oportunidades y diagnósticos. Útil para ver la salud por URL y sugerencias priorizadas.
Lighthouse (Chrome DevTools)
- Qué ofrece: auditoría de laboratorio ejecutable localmente o en CI; emula condiciones de red / CPU y calcula puntaje de performance con métricas (LCP, CLS y heurísticos). Ideal para reproducir problemas en desarrollo.
WebPageTest
- Qué ofrece: pruebas sintéticas en navegadores reales desde múltiples ubicaciones, filmstrip/Waterfall, captura de Core Web Vitals en entorno real. Muy útil para debug profundo y comparativas geolocalizadas. (Gratis/opensource con opciones de enterprise).
RUM (Real User Monitoring) – CrUX, Google Search Console, herramientas comerciales
- Qué ofrece: métricas reales agregadas por usuarios (CrUX via PageSpeed Insights/BigQuery o dashboards comerciales). La Core Web Vitals report en Search Console es la fuente para ver si tus URL grupos están “Good / Need improvement / Poor”.
Plataformas comerciales (Calibre, SpeedCurve, Semrush, etc.)
- Qué ofrecen: dashboards de monitoreo, alertas, correlación con conversiones y testing continuo. Útiles para equipos que necesitan reportes y SLA. Precios varían según plan y volumen.
Proceso de auditoría: metodología reproducible (paso a paso)
A continuación presento un proceso de auditoría técnico y replicable – pensado para que un equipo pequeño (dev + SEO) pueda aplicarlo en menos de una semana por sitio crítico.
Alcance y preparación (Día 0–1)
- Define objetivos (páginas importantes: home, categoría, producto, landing de campaña).
- Reúne accesos: Google Search Console, PageSpeed Insights API, hosting/infra logs.
- Establece criterios de éxito: e.g., LCP ≤ 2.5s, INP en percentil 75 dentro de “Good”, CLS < 0.1 en 75% de tráfico.
Recolección de datos (Día 1–2)
- Ejecuta PageSpeed Insights para 10–20 URLs representativas (móvil y desktop). Exporta JSON via PSI API si es posible.
- Ejecuta tests en Lighthouse (modo CLI para consistencia) y WebPageTest (al menos 3 runs por URL desde la ubicación objetivo: México → usa un punto de prueba en Ciudad de México o región cercana).
- Extrae datos CrUX(datos anónimos de rendimiento de usuarios reales) y Core Web Vitals report desde Search Console para identificar grupos con problemas (Poor / Need improvement).
Diagnóstico (Día 2–3)
- Analiza causas raíz por métrica:
- LCP: revisar TTFB, render-blocking CSS, imágenes/video sin lazy load, recursos de terceros.
- INP: tareas largas en el hilo principal (long tasks), heavy JS, event handlers bloqueantes.
- CLS: imágenes/iframes sin dimensiones, inyección dinámica de anuncios, fonts swapping.
- Usa waterfall y filmstrip de WebPageTest para pinpoint. Reproduce en Lighthouse con CPU/Network throttling para confirmar.
Priorización y plan de acción (Día 3)
- Prioriza por impacto x esfuerzo (matriz RICE simplificada):
- Alto impacto / bajo esfuerzo → implementar primero.
- Ejemplo: añadir width/height a imágenes (bajo esfuerzo, alto impacto en CLS).
Implementación y verificación (Día 4–7)
- Implementa cambios en staging: optimizar imágenes (serve WebP/AVIF, dimensionar), critical CSS inline, lazy-loading diferido, carga diferida de scripts no críticos (use async/defer).
- Vuelve a medir en Lighthouse/WebPageTest y observa cambios en PSI y Search Console (los datos de campo tardan en reflejarse según tráfico).
Interpretación de resultados: ejemplos y cómo priorizar
Ejemplo 1 – LCP alto por imagen hero
- Síntoma: LCP = 4.2s (móvil), waterfall muestra imagen hero como último recurso en terminar.
- Diagnóstico: imagen pesada + falta de preload + TTFB alto.
- Acciones: optimizar imagen (generar versiones responsive + WebP/AVIF), preload del recurso crítico, cambiar prioridad de fetch (rel=preload), mover carga de terceros fuera del critical path.
- Resultado esperado: LCP < 2.5 s o reducción significativa.
Ejemplo 2 – INP alto por JavaScript pesado
- Síntoma: INP en percentil 75 > umbral (p. ej. lenta respuesta al hacer tap en botones).
- Diagnóstico: long tasks > 50 ms (scripts de terceros, render blocking).
- Acciones: dividir bundles (code splitting), usar requestIdleCallback para tareas no críticas, optimizar handlers, eliminar polyfills innecesarios, implementar web workers si hay cálculos pesados.
- Resultado esperado: menor latencia de interacción y mejores puntuaciones INP.
Ejemplo 3 – CLS por ads o fonts
- Síntoma: CLS = 0.25 (Poor).
- Diagnóstico: anuncios inyectados por client-side sin placeholder o fuentes que causan FOUT/FOIT.
- Acciones: reservar espacio para anuncios con CSS (containers con min-height), usar font-display: swap y preconnect a font origins; para ads, coordinar con ad network para placeholder estático.
- Resultado esperado: CLS < 0.1.
Recomendaciones iniciales (con fragmentos prácticos)
Reducción de LCP
- Server / TTFB: habilitar caching (CDN), optimizar backend (queries lentas).
- Preload para hero: <link rel=”preload” as=”image” href=”/images/hero-1200.webp”>
- Imágenes responsivas y formatos modernos: srcset + WebP/AVIF.
Mejora de INP
- Evitar long tasks: audita con Chrome DevTools Performance → identifica tareas >50ms.
- Defer y async: <script src=”/vendor.bundle.js” defer></script>
- Web Worker (ejemplo sencillo): para cálculos intensos, mover a worker y comunicarse con postMessage.
Reducción de CLS
- Reservar espacio para imágenes y iframes: siempre incluir width y height o usar aspect-ratio.
- <img src=”/photo.jpg” width=”1200″ height=”800″ alt=”…”>
- Ads placeholders: contenedor con tamaño fijo o dinámico controlado por CSS.
Diagnóstico de terceros
- Audit de third-party scripts: medir impacto con ttfb y long tasks; remover o cargar de forma diferida los que no sean imprescindibles.
Factores de Page Experience adicionales (no métricas Core Web Vitals)
- Seguridad (HTTPS): imprescindible. No tener HTTPS puede afectar la confianza y la experiencia.
- Mobile-friendly / Usabilidad: diseño responsive, botones accesibles.
- Interstitials intrusivos: evítalos para no dañar la experiencia.
- Accesibilidad: mejora la experiencia y, por tanto, métricas de comportamiento.
Costos estimados y elección de herramientas (orientación práctica)
Herramientas gratuitas / low-cost
- Lighthouse & PageSpeed Insights: gratis y suficientes para auditorías iniciales.
- WebPageTest: plan gratuito para pruebas sintéticas; opciones empresariales disponibles.
Herramientas comerciales (cuando escalar)
- Semrush (site audit + integración SEO): planes desde rangos comerciales (ej., Pro/Guru/Business — tarifas varían; referencia: planes desde aprox. $139–$299 USD/mes según uso y promociones). Útil para auditorías integrales y reporting.
- SpeedCurve / Calibre: dashboards y RUM integrados para monitoreo continuo. Precios empresariales dependiendo de páginas y tráfico; ideal cuando necesitas correlacionar rendimiento con conversión.
Checklist de auditoría rápida (para ejecutar en 60–90 minutos)
- Ejecutar PageSpeed Insights (móvil y desktop) – exportar JSON.
- Ejecutar Lighthouse CLI (3 runs) – revisar LCP/INP/CLS y long tasks.
- WebPageTest filmstrip desde México / nearest location.
- Revisar Search Console → Core Web Vitals report (URL groups).
- Identificar 3 quick wins: images, CSS crítico, dimensiones en imágenes/iframes.
- Implementar en staging y medir antes/después.
Interpretación avanzada: cómo presentar resultados a dirección (KPIs de negocio)
- Traduce mejoras técnicas a métricas de negocio: e.g., “Reducir LCP de 3.5s a 2.0s puede aumentar CTR en landing X en un Y%” (usa A/B testing para validar).
- Propone roadmap 30/60/90 días con hitos técnicos y KPIs (ej.: LCP objetivo, INP objetivo, reducción de CLS).
Buenas prácticas para mantener mejoras a largo plazo
- Integrar pruebas de rendimiento en CI (Lighthouse CI).
- Monitoreo RUM continuo para detectar regresiones.
- Revisión trimestral de terceros y de bundles JS.
- Cultura de performance: code reviews con checklist de performance.
Fuentes y referencias (selección verificada)
- Google – Understanding Core Web Vitals & Search: definición y rol en Search.
- Google Developers – Introducing INP (reemplazo de FID) y detalles técnicos.
- Lighthouse docs – LCP y scoring de performance.
- PageSpeed Insights – agregación y uso de CrUX (75th percentile).
- WebPageTest / comparativas y uso en diagnóstico profundo.
- Plataformas de monitoreo (SpeedCurve, Semrush) para selección y pricing.
Conclusión práctica (acción inmediata)
Si solo puedes hacer tres cosas hoy para avanzar en la auditoría:
- Ejecuta PageSpeed Insights en tus 5 URLs más importantes y exporta los resultados.
- Reserva espacio en HTML/CSS para imágenes/iframes (reduce CLS rápido).
- Identifica 2 grandes tareas largas con Chrome DevTools y divide o difiere su ejecución (mejorará INP).
