Tres métricas, tres preguntas diferentes
LCP describe cuándo se muestra el elemento de contenido más grande de la vista inicial. INP describe la capacidad de respuesta a interacciones. CLS mide cambios inesperados de posición. Son preguntas distintas: cargar rápido no garantiza que un formulario responda bien.
Los umbrales de buena experiencia publicados por web.dev son LCP de hasta 2,5 segundos, INP de hasta 200 milisegundos y CLS de hasta 0,1, evaluados en el percentil 75 de las visitas. Los datos de escritorio y móvil deben revisarse por separado.
| Síntoma | Métrica | Primera revisión |
|---|---|---|
| El contenido principal tarda | LCP | Imagen principal, respuesta del servidor y fuentes |
| Los controles responden tarde | INP | Tareas de JavaScript e interacciones |
| El contenido salta al cargar | CLS | Dimensiones de imágenes, fuentes y bloques insertados |
Lighthouse y visitantes reales no son lo mismo
Lighthouse permite repetir una carga en condiciones simuladas. Es útil para detectar problemas durante el desarrollo, pero su puntuación puede variar con la máquina, la red y el entorno de prueba. Una cifra aislada no resume toda la experiencia.
El TBT de Lighthouse ayuda a investigar bloqueo durante la carga; no equivale a INP. Los datos de campo recogen visitas reales y pueden no estar disponibles si falta tráfico suficiente. En ese caso, indica la ausencia de datos en lugar de presentar una prueba local como resultado de todos los usuarios.
Empieza por lo que realmente ocupa la pantalla
Identifica el elemento principal de cada plantilla: portada, ficha de producto o artículo. Una fotografía enorme que se muestra pequeña desperdicia descarga. Sirve tamaños adecuados, comprime con criterio y evita retrasar la imagen principal con carga diferida.
Reserva anchura y altura para que el navegador conozca el espacio antes de descargar. Las imágenes de una galería que están más abajo pueden cargarse después. Revisa también el recorte: una imagen ligera que oculta el detalle del producto no cumple su función.
Revisa lo que se ejecuta al entrar
Haz inventario de chat, analítica, vídeos, mapas y animaciones. Pregunta qué necesita estar disponible inmediatamente y qué puede esperar a la intención del usuario. Un vídeo explicativo con controles puede descargar el archivo cuando se reproduce, manteniendo una portada ligera.
Las animaciones deberían respetar movimiento reducido y detener trabajo fuera de pantalla. En interfaces complejas, prueba además abrir el menú, filtrar proyectos y enviar un formulario. Reducir JavaScript de carga no demuestra por sí solo que esas acciones sean fluidas.
Prioriza por plantilla y por impacto
Elige páginas representativas en vez de medir solo la portada. Si una plantilla de propiedad sirve a todo el catálogo, corregirla puede mejorar muchas URLs a la vez. Anota el problema observado, la hipótesis, el cambio y una medición comparable después.
Empieza por errores que impiden completar acciones y por contenido que salta o tarda en aparecer. Después ajusta recursos secundarios. No elimines información comercial importante únicamente para subir una puntuación: busca otra forma de servirla.
Pide una validación que puedas repetir
Una entrega útil incluye las URLs medidas, el dispositivo o perfil, la fecha y el informe completo. Conserva una referencia antes de añadir una integración nueva. Así puedes distinguir un cambio de código de una variación normal de la prueba.
Tras publicar, revisa los datos disponibles en Search Console y PageSpeed Insights. Relaciona el rendimiento con tareas del negocio: encontrar una propiedad, consultar disponibilidad o terminar un pedido. Las métricas son una herramienta para mejorar esas tareas, no una garantía de posicionamiento o ventas.
Carga, respuesta y estabilidad
Leer la transcripción completa
¿Cuándo aparece lo principal?
Revisa imagen inicial, servidor y fuentes cuando el contenido más importante tarda en mostrarse.
¿Responde al interactuar?
Prueba menús, filtros y formularios. Investiga las tareas que retrasan la respuesta a una acción.
¿Se mueve el contenido?
Reserva espacio para imágenes y componentes. Evita insertar bloques que desplacen controles mientras se usan.
Compara pruebas equivalentes
Lighthouse mide un escenario de laboratorio. Comprueba también datos de visitantes reales cuando estén disponibles.
Preguntas frecuentes
¿Tener 100 en Lighthouse garantiza buenas Core Web Vitals?
No. Lighthouse observa una carga de laboratorio y no representa todas las visitas ni las interacciones reales. Usa su diagnóstico para investigar y revisa datos de campo cuando estén disponibles.
¿Hay que quitar todas las animaciones para tener una web rápida?
No necesariamente. Puedes limitar trabajo fuera de pantalla, usar recursos adecuados y respetar movimiento reducido. La decisión debe apoyarse en mediciones y en pruebas de las acciones importantes del sitio.
Fuentes consultadas
Referencias para los criterios técnicos de esta guía. Contenido revisado el .