Medir las Core Web Vitals
Supervisar y mejorar las métricas de rendimiento
Medir las Core Web Vitals es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Por qué importan las métricas vitales
Las Core Web Vitals son métricas de rendimiento de Google centradas en el usuario. Cuantifican la carga, la interactividad y la estabilidad visual, e influyen tanto en la experiencia de usuario como en la clasificación en buscadores.
Las tres métricas
El trío está formado por LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) e INP (Interaction to Next Paint). Cada métrica evalúa un aspecto diferente del rendimiento percibido.
LCP
LCP mide cuándo termina de renderizarse el elemento visible más grande (la imagen principal o el encabezado). Un buen resultado es inferior a 2,5 segundos. El SSR ayuda a conseguirlo al entregar ese contenido en el HTML inicial.
CLS
CLS mide los cambios inesperados en el diseño mientras se carga la página. Un buen resultado es inferior a 0,1. Reserve espacio para las imágenes y los anuncios, y evite insertar contenido por encima del contenido existente.
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP mide la capacidad de respuesta ante las interacciones del usuario durante toda la vida de la página y sustituye al antiguo FID. Un buen resultado es inferior a 200 ms. Un JavaScript pesado en el hilo principal perjudica el INP.
Cómo ayuda el SSR a las métricas vitales
El SSR mejora el LCP al mostrar antes el contenido y puede reducir el CLS al proporcionar pronto un diseño estable. La hidratación incremental mejora el INP al enviar menos JavaScript de antemano.
Datos de laboratorio frente a datos de campo
Los datos de laboratorio proceden de herramientas sintéticas como Lighthouse en un entorno controlado. Los datos de campo (CrUX, RUM) proceden de usuarios reales. Optimice utilizando ambos; los datos de campo son los que se utilizan para la clasificación.
Medir con Lighthouse
Ejecute Lighthouse en Chrome DevTools o en CI para obtener el LCP y el CLS de laboratorio, un indicador del tiempo total de bloqueo para el INP y diagnósticos prácticos.
// npx lighthouse https://example.com --viewLa biblioteca web-vitals
Recopile las métricas vitales de usuarios reales en el navegador con la biblioteca web-vitals y envíelas a su endpoint de análisis.
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);Reducir JavaScript
Los paquetes más pequeños mejoran el INP y el tiempo hasta la interactividad. Utilice la carga diferida por ruta, @defer, la hidratación incremental y el tree-shaking para reducir el JS enviado.
Iterar y verificar
El trabajo de rendimiento consiste en medir, cambiar y volver a medir. Después de activar SSR, la hidratación o defer, vuelva a ejecutar Lighthouse y observe la evolución de los datos de campo durante varias semanas para confirmar las mejoras reales.
Comprobación rápida
Compruebe cuánto sabe sobre las Core Web Vitals.
Resumen
Aprendió cuáles son las Core Web Vitals (LCP, CLS e INP), cómo las mejoran el SSR y la hidratación incremental, la diferencia entre datos de laboratorio y de campo, y cómo medirlas con Lighthouse y la biblioteca web-vitals para después iterar mediante nuevas mediciones.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 38
- Lecciones
- 144
Preguntas frecuentes
¿La lección «Medir las Core Web Vitals» es gratis?
Sí — el texto completo de «Medir las Core Web Vitals» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Medir las Core Web Vitals»?
Supervisar y mejorar las métricas de rendimiento Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Medir las Core Web Vitals»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Qué es la hidratación
- Activar la hidratación completa
- Hidratación incremental con @defer
- Medir las Core Web Vitals