0Pricing
Next.js 15 Fullstack Web Apps · Lektion

Core Web Vitals und Monitoring

Verstehen Sie LCP, INP und CLS, messen Sie sie bei echten Nutzern und nutzen Sie Next.js-Funktionen sowie Observability-Tools, damit Ihre Produktions-App schnell bleibt.

Core Web Vitals und Monitoring ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Core Web Vitals und Monitoring“ kostenlos?

Ja — der vollständige Text von „Core Web Vitals und Monitoring“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Core Web Vitals und Monitoring“?

Verstehen Sie LCP, INP und CLS, messen Sie sie bei echten Nutzern und nutzen Sie Next.js-Funktionen sowie Observability-Tools, damit Ihre Produktions-App schnell bleibt. Du übst Next.js 15 Fullstack Web Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Next.js 15 Fullstack Web Apps zu starten?

Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Core Web Vitals und Monitoring“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?

Ja. Jede Next.js 15 Fullstack Web Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Bereitstellung auf Vercel und Netlify
  2. Bild- und Font-Optimierung
  3. Bundle-Analyse und Performance-Audits
  4. Core Web Vitals und Monitoring
← Zurück zu Next.js 15 Fullstack Web Apps