0Pricing
Next.js 15 Fullstack Web Apps · Lección

Core Web Vitals y monitorización

Comprenda LCP, INP y CLS, mídalos en usuarios reales y use las funciones de Next.js y las herramientas de observabilidad para mantener rápida su aplicación en producción.

Core Web Vitals y monitorización es una lección gratuita de Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

What Are Core Web Vitals

Core Web Vitals are Google's user-centric performance metrics that influence both UX and SEO ranking. The three current metrics are:

  • LCP — Largest Contentful Paint (loading)
  • INP — Interaction to Next Paint (responsiveness)
  • CLS — Cumulative Layout Shift (visual stability)

LCP: Loading Speed

LCP measures when the largest visible element (often a hero image or heading) finishes rendering. Aim for under 2.5s. Improve it with image optimization, priority loading, and server rendering.

import Image from 'next/image';

<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

INP: Responsiveness

INP replaced FID. It measures the latency of user interactions across the whole visit. Aim for under 200ms. Long JavaScript tasks on the main thread hurt INP most.

CLS: Visual Stability

CLS quantifies unexpected layout shifts. Aim for under 0.1. Always set explicit width and height on images and reserve space for ads and embeds.

Lab vs Field Data

Lab data comes from a controlled run (Lighthouse). Field data (RUM) comes from real users on real devices. Field data is the source of truth for ranking; lab data is great for debugging.

Reporting with useReportWebVitals

Next.js exposes useReportWebVitals to collect real-user metrics and send them to your analytics endpoint.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function Vitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

Bucketing a Metric

Classify a metric value into good / needs-improvement / poor. Pure logic you can run anywhere.

function rateLCP(ms) {
  if (ms <= 2500) return 'good';
  if (ms <= 4000) return 'needs-improvement';
  return 'poor';
}
console.log(rateLCP(1800));
console.log(rateLCP(3200));
console.log(rateLCP(5000));

Reducing Main-Thread Work

To improve INP, ship less JavaScript and defer non-critical work. Use dynamic imports to code-split heavy client components.

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });

Server Components Help

React Server Components render on the server and send no JavaScript to the client for that part of the tree, directly reducing bundle size and improving INP and LCP.

Production Monitoring Tools

Set up continuous observability:

  • Vercel Speed Insights for built-in RUM.
  • Vercel Analytics for traffic.
  • Sentry / OpenTelemetry for errors and traces.

Alert when a metric regresses past its threshold.

Set a Performance Budget

Define budgets (e.g. LCP < 2.5s, JS < 170KB) and enforce them in CI so regressions fail the build before they reach users.

Quick Check

Which Core Web Vital measures the responsiveness of user interactions, and what is its target?

Recap

You learned to keep production fast:

  • LCP (loading), INP (responsiveness), and CLS (stability) with their targets.
  • The difference between lab and field data.
  • Collecting RUM with useReportWebVitals.
  • Reducing JS via code splitting and Server Components, plus monitoring and budgets.

Preguntas frecuentes

¿La lección «Core Web Vitals y monitorización» es gratis?

Sí — el texto completo de «Core Web Vitals y monitorización» 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 Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

¿Qué aprenderé en «Core Web Vitals y monitorización»?

Comprenda LCP, INP y CLS, mídalos en usuarios reales y use las funciones de Next.js y las herramientas de observabilidad para mantener rápida su aplicación en producción. Practicas Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps?

No se requiere experiencia previa. Next.js 15 Fullstack Web Apps 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 «Core Web Vitals y monitorización»?

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 Next.js 15 Fullstack Web Apps?

Sí. Cada lección de Next.js 15 Fullstack Web Apps 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

  1. Despliegue en Vercel y Netlify
  2. Optimización de imágenes y fuentes
  3. Análisis del bundle y auditorías de rendimiento
  4. Core Web Vitals y monitorización
← Volver a Next.js 15 Fullstack Web Apps