Next.js 15 Fullstack Web Apps · درس

مؤشرات أداء الويب الأساسية والمراقبة

افهم LCP وINP وCLS، وقِسها لدى المستخدمين الفعليين، واستخدم ميزات Next.js وأدوات قابلية الرصد للحفاظ على سرعة تطبيقك في بيئة الإنتاج.

الدرس 4 من 413 خطوة

مؤشرات أداء الويب الأساسية والمراقبة درس مجاني في Next.js 15 Fullstack Web Apps على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Next.js 15 Fullstack Web Apps، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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.

البدء مجانًا

تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 12
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «مؤشرات أداء الويب الأساسية والمراقبة» مجاني؟

نعم — نص درس «مؤشرات أداء الويب الأساسية والمراقبة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Next.js 15 Fullstack Web Apps، انتقل إلى CoddyKit PRO. تتضمن دورة Next.js 15 Fullstack Web Apps 4 دروس في المجموع.

ماذا ستتعلم في «مؤشرات أداء الويب الأساسية والمراقبة»؟

افهم LCP وINP وCLS، وقِسها لدى المستخدمين الفعليين، واستخدم ميزات Next.js وأدوات قابلية الرصد للحفاظ على سرعة تطبيقك في بيئة الإنتاج. تتمرن على Next.js 15 Fullstack Web Apps مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Next.js 15 Fullstack Web Apps؟

لا تُشترط خبرة سابقة. Next.js 15 Fullstack Web Apps على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «مؤشرات أداء الويب الأساسية والمراقبة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Next.js 15 Fullstack Web Apps هذا؟

نعم. كل درس في Next.js 15 Fullstack Web Apps يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Next.js 15 Fullstack Web Apps